テーブル（表）の作成

テーブル（表）の作成方法についての説明です。

★テーブル（表）を作る

tableタグで囲んだ部分はテーブル（表）であることを表します。
trタグはtableタグの中に書き、表の横一列を表します。tdタグはtrタグの中に書き、表の１つの部屋を表します。この部屋のことを「セル」とよびます。tableタグの前後は自動的に改行されます。

<table>
<tr>
<td>セル1</td>
</tr>
</table>

《表示結果》

セル1

★セルを増やす

trタグの中にtdタグを追加するとその分セルが横に追加されます。tdタグではなくthタグを使うとセルに見出しがついて太字になります。
tableタグの中にtrタグを追加するとその分セルが縦に追加されます。

<table>
<tr>
<td>セル1</td>
<th>セル2を横に追加</th>
</tr>
</table>

<table>
<tr>
<td>セル1</td>
</tr>
<tr>
<td>セル2を縦に追加</td>
</tr>
</table>

《表示結果》

セル1 セル2を横に追加

セル1
セル2を縦に追加

★セルの連結

td、thタグに rowspan="半角数字"、colspan="半角数字" をつけ加えるとセルを連結できます。rowspanは縦に、colspanは横に連結する数を指定します。

<table>
<tr>
<td colspan="2">【セル1】</td>
<th rowspan="2">【セル2】</td>
</tr>
<tr>
<td>セル3</td>
<th>セル4</th>
</tr>
</table>

<table>
<tr>
<td rowspan="2">【セル1】</td>
<th>セル2</td>
</tr>
<tr>
<td>セル3</td>
<th>セル4</th>
</tr>
</table>

《表示結果》

【セル1】 【セル2】
セル3 セル4

【セル1】 セル2
セル3 セル4
Tweet
　

>>HTML講座メニューへ戻る