表組みのHTMLタグについて
【表組の基本的な考え方】
tableタグで表全体をくくり、trタグで横方向をどこまでにするかをくくり、
tdタグで各セルを指定します。
<table border=”1″>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
</table>
| 1 | 2 | 3 |
| 4 | 5 | 6 |
【表の幅を指定する】
表の幅はパーセンテージもしくはピクセル単位で指定できます。
<table border=”1″ width=”500″>
<tr>
<td width=”25%”>1</td><td width=”25%”>2</td><td width=”50%”>3</td>
</tr>
<tr><td width=”25%”>4</td><td width=”25%”>5</td><td width=”50%”>6</td>
</tr>
</table>
| 1 | 2 | 3 |
| 4 | 5 | 6 |
【セルの結合】
◆横方向への結合
colspan=”結合するセルの数” を結合する先頭のセルのtdタグ内に追記します。
<table border=”1″ width=”500″>
<tr>
<td width=”50%” colspan=”2″>1+2</td>
<td width=”50%”>3</td>
</tr>
<tr>
<td width=”25%”>4</td><td width=”25%”>5</td><td width=”50%”>6</td>
</tr>
</table>
| 1+2 | 3 | |
| 4 | 5 | 6 |
◆縦方向への結合
rowspan=”結合するセルの数” を結合する先頭のセルのtdタグ内に追記します。
<table border=”1″ width=”500″>
<tr>
<td width=”25%” rowspan=”2″>1+4</td><tdwidth=”25%”>2</td><td
width=”50%”>3</td>
</tr>
<tr>
<td width=”25%”>5</td><td width=”50%”>6</td>
</tr>
</table>
| 1+4 | 2 | 3 |
| 5 | 6 |
関連情報
主なタグについて
文字装飾の主なタグについて