テーブル（表）の作成 - 趣味サイトのためのHTML LS講座

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

テーブル（表）を作る

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	【セル2】

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

▲ページの先頭へ

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