HTML&CSS yy

HTML tableタグで簡単な表組みを作ろう

今回はHTMLのtableタグを使って、表を作る方法をご紹介します。

table要素と子要素

表組を作るには、table要素とtableの子要素を使います。
子要素は複数ありますが、必ず使うのは「tr要素」「th要素」「td要素」です。

プニャン
「開始タグ」・「内容」・「終了タグ」をセットで要素というよ

tableの子要素の主なものには次のようなものがあります。

要素名 役割
tr要素 行の作成
th要素 見出しセル
td要素 データセル
caption要素 表の見出しや説明
thead要素 ヘッダー部分の行グループ
tbody要素 メインの内容部分の行グループ
tfoot要素 フッター部分の行グループ


表組みの構造

表組みは行と列から出来ています。

表組み構造のイメージ図です。

<table>タグの中に<tr>タグで行を作成し、<tr>タグの中に<th>タグで見出しを、<td>タグでデータを入力していきます。

  • <tr>タグの数が増えた分だけ、下に行が増えます。
  • <th>タグと<td>タグの数が増えた分だけ右に列が増えます。


実際に下のテーブルのコードを見てみましょう。

プニャン
見出しセルは太字で表示されるよ。


実際のコードは下記の様になります。

<body>
    <table border="1">
      <caption>商品比較表</caption>
      <tr>
        <th>商品名</th>
        <th>価格</th>
        <th>在庫</th>
      </tr>
      <tr>
        <td>商品１</td>
        <td>100円</td>
        <td>あり</td>
      </tr>
      <tr>
        <td>商品２</td>
        <td>500円</td>
        <td>なし</td>
      </tr>
    </table>
</body>
マポン
表を分かり易くする為に属性[ border=”1″ ]を tableタグに 書いているよ。
装飾したい時は、CSSを使ってね。


セルを結合する

セルの結合には、水平方向に結合する場合と垂直方向に結合する場合の２種類があります。

  • 水平方向に結合 {各列(column)にあるセルを結合 }　→　colspan属性を使う　
  • 垂直方向に結合 { 各行(row)にあるセルを結合 }　→　rowspan属性を使う　

水平方向のセルを結合

水平方向にセルを結合する場合はcolspan属性を使います。

書き方


それでは、下の表のコードはどうかくでしょうか。見てみましょう。

<table border="1">
	<tr>
		<th colspan="2">セル２つを横に結合</th>
	</tr>
	<tr> 
		<td>セル１</td>
		<td>セル２</td>
	</tr>
</table>

 

<table border="1">
	<tr>
		<th>見出しセル１</th>
		<th>見出しセル２</th>
		<th>見出しセル３</th>
	</tr>
	<tr>
		<td colspan="3">セル３つを横に結合</td>
	</tr>
</table>

 

垂直方向にセルを結合

垂直方向にセルを結合する場合はrowspan属性を使います。

書き方

下の表を見てみましょう。

コードは下記のようになります。

<table border="1">
    <tr>
        <th>見出しセル１</th>
        <th>見出しセル２</th>
        <th>見出しセル３</th>			
    </tr>
    <tr>
        <td rowspan="2">結合</td>
        <td>データセル２</td>
        <td>データセル３</td>
    </tr>
    <tr>
        <td>データセル２</td>
        <td>データセル３</td>
    </tr>
</table>

以上となります。表組の構造をイメージしながら、表を作ってみてください。

RECOMMENDこちらの記事も人気です。