表（テーブル）を作る
<table border="1">
<tr>
<td>あいうえお</td>
<td>かきくけこ</td>
</tr>
<tr>
<td>さしすせそ</td>
<td>たちつてと</td>
</tr>
</table>
|
→ |
|
<table>
<tr>
<td>あいうえお</td>
<td>かきくけこ</td>
</tr>
<tr>
<td>さしすせそ</td>
<td>たちつてと</td>
</tr>
</table>
|
→ |
|
border に枠の太さを指定します。また、border="0" とするか指定しないと枠が表示されません。下に新しい行を追加するには <tr> 〜 </tr> を追加して、横方向に枠を追加するには <td> 〜 </td> を追加します。
テーブルの位置を変える
<table border="1" align="center">
<tr>
<td>あいうえお</td>
<td>かきくけこ</td>
</tr>
<tr>
<td>さしすせそ</td>
<td>たちつてと</td>
</tr>
</table>
|
↓ |
できれば <div align="left/center/right"> 〜 </div> 等を使用された方が良いと思います。
テーブルの大きさを決める
<table width="200" height="100" border="1">
<tr>
<td>あいうえお</td>
<td>かきくけこ</td>
</tr>
<tr>
<td>さしすせそ</td>
<td>たちつてと</td>
</tr>
</table>
|
→ |
|
<table width="70%" height="20%" border="1" align="center">
<tr>
<td>あいうえお</td>
<td>かきくけこ</td>
</tr>
<tr>
<td>さしすせそ</td>
<td>たちつてと</td>
</tr>
</table>
|
↓ |
セルの大きさを決める
<table width="400" height="200" border="1" align="center">
<tr>
<td width="250" height="50">あいうえお</td>
<td width="150" height="50">かきくけこ</td>
</tr>
<tr>
<td width="250" height="150">さしすせそ</td>
<td width="150" height="150">たちつてと</td>
</tr>
</table>
|
↓ |
セルの中の位置を指定する
<table width="70%" height="20%" border="1" align="center">
<tr align="right">
<td>あいうえお</td>
<td>かきくけこ</td>
</tr>
<tr>
<td align="center">さしすせそ</td>
<td>たちつてと</td>
</tr>
</table>
|
↓ |
セル内の文字等が勝手に改行されないようにする
<table width="150" border="1">
<tr>
<td nowrap>あいうえお</td>
<td>かきくけこ</td>
</tr>
<tr>
<td>さしすせそ</td>
<td>たちつてと</td>
</tr>
</table>
|
→ |
|
上のように最初の列に1つ指定するとその列にも反映されますが、できれば改行したくないところ全てに指定した方が良いと思います。これを指定しておくとウィンドウサイズを小さくしてもセル内の文字や画像が改行されずに表示されます。
テーブル全体に色をつけたり画像を入れる
<table border="1" bgcolor="#808080">
<tr>
<td>あいうえお</td>
<td>かきくけこ</td>
</tr>
<tr>
<td>さしすせそ</td>
<td>たちつてと</td>
</tr>
</table>
|
→ |
|
<table border="1" background="./image.gif">
<tr>
<td>あいうえお</td>
<td>かきくけこ</td>
</tr>
<tr>
<td>さしすせそ</td>
<td>たちつてと</td>
</tr>
</table>
|
→ |
|
セルに色をつけたり画像を入れる
<table border="1">
<tr bgcolor="#008000">
<td>あいうえお</td>
<td>かきくけこ</td>
</tr>
<tr>
<td bgcolor="#808080">さしすせそ</td>
<td>たちつてと</td>
</tr>
</table>
|
→ |
|
<table border="1">
<tr>
<td background="./image.gif">あいうえお</td>
<td>かきくけこ</td>
</tr>
<tr>
<td>さしすせそ</td>
<td background="./image.gif"></td>
</tr>
</table>
|
→ |
|
枠に色をつける
<table border="1" bordercolor="#ff0000">
<tr>
<td>あいうえお</td>
<td>かきくけこ</td>
</tr>
<tr>
<td>さしすせそ</td>
<td>たちつてと</td>
</tr>
</table>
|
→ |
|
枠の太さを変える
<table border="1" cellspacing="0">
<tr>
<td>あいうえお</td>
<td>かきくけこ</td>
</tr>
<tr>
<td>さしすせそ</td>
<td>たちつてと</td>
</tr>
</table>
|
→ |
|
<table border="1" cellspacing="5">
<tr>
<td>あいうえお</td>
<td>かきくけこ</td>
</tr>
<tr>
<td>さしすせそ</td>
<td>たちつてと</td>
</tr>
</table>
|
→ |
|
border と cellspacing の違い
<table border="10">
<tr>
<td>あいうえお</td>
<td>かきくけこ</td>
</tr>
<tr>
<td>さしすせそ</td>
<td>たちつてと</td>
</tr>
</table>
|
→ |
|
<table border="1" cellspacing="10">
<tr>
<td>あいうえお</td>
<td>かきくけこ</td>
</tr>
<tr>
<td>さしすせそ</td>
<td>たちつてと</td>
</tr>
</table>
|
→ |
|
セルの中身のまわりに隙間を空ける
<table border="1" cellpadding="10">
<tr>
<td>あいうえお</td>
<td>かきくけこ</td>
</tr>
<tr>
<td>さしすせそ</td>
<td>たちつてと</td>
</tr>
</table>
|
→ |
|
セルの結合（横方向）
<table border="1">
<tr>
<td colspan="2" align="center">あいうえお</td>
</tr>
<tr>
<td>かきくけこ</td>
<td>さしすせそ</td>
</tr>
</table>
|
→ |
|
この場合は本来横方向 (td) に2つのセルがあるものを1つに結合します。横方向に3つセルがあるのならば、colspan="3" とします。
colspan="2" で横のセルは結合されていますので、上段の <tr> 〜 </tr> 列の <td> 〜 </td> （「あいうえお」の部分）は1つになります。
セルの結合（縦方向）
<table border="1">
<tr>
<td rowspan="3">あいうえお</td>
<td>かきくけこ</td>
</tr>
<tr>
<td>さしすせそ</td>
</tr>
<tr>
<td>たちつてと</td>
</tr>
</table>
|
→ |
|
この場合も本来縦方向 (tr) に3つのセルがあるものを1つに結合します。rowspan="3" で縦のセルは結合されていますので、「あいうえお」列の td は1つになります。
colspan と rowspan の組み合わせ例
<table border="1">
<tr>
<td rowspan="2">あいうえお</td>
<td>かきくけこ</td>
</tr>
<tr>
<td>さしすせそ</td>
</tr>
<tr>
<td colspan="2" align="center">たちつてと</td>
</tr>
</table>
|
→ |
|
セル内における文字等の位置
<table height="150" border="1">
<tr>
<td>あいうえお</td>
<td valign="middle">かきくけこ</td>
</tr>
<tr>
<td valign="top">さしすせそ</td>
<td valign="bottom">たちつてと</td>
</tr>
</table>
|
→ |
|