テーブル(表)の作成 - 個人サイトのためのHTML LS講座

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

tableタグで囲んだ部分はテーブル(表)であることを表します。
trタグはtableタグの中に書き、表の横一列を表します。tdタグはtrタグの中に書き、表の1つの部屋を表します。この部屋のことを「セル」とよびます。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
▲ページの先頭へ

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