HTMLで表（テーブル）を作る方法と結合や枠線の設定方法を覚えよう

今回は、「tableタグ」を使って表（テーブル）をつくる方法を覚えましょう。

tableタグとは？

tableタグは、主に「表」を作成するための要素です。

エクセルという表計算ソフトを使ったことがある方はエクセルのテーブルをイメージしてください。

例えば、お店のメニュー表やカレンダーを表示する時などに使用します。

また、テーブル内のそれぞれの要素を「セル」と呼びます。

tableタグの書き方

tableタグの書き方は以下の様になります。

使用例：HTML

<table>
  <tr>
    <th>見出しセル</th>
    <th>見出しセル</th>
  </tr>
<tr>
    <td>内容セル</td>
    <td>内容セル</td>
  </tr>
</table>

使用例：ブラウザ

テーブルタグを使用するには、<table></table>で表示したい要素を囲んでいきます。リストタグと同様に「入れ子」で記述していきます。

trタグ

trタグ（table row）は、横一列をグループ化するための要素です。同じ行に表示したい内容を<tr></tr>で囲います。

thタグ

thタグ（table header cell）は、縦列もしくは横列の「見出し」を表します。<th></th>で内容を囲います。

tdタグ

tdタグ（table data cell）は、テーブル内の内容を表すデータであることを表します。<td></td>で内容を囲います。

テーブルタグを使ってみよう

ここでは、学校の時間割を作ってみましょう。

まず、テーブルに必要なデータは、「教科」と「時限」です。今回は、「国語・数学・理科・社会」をそれぞれ1～4限目まで表にしてみます。

完成すると下記のようになります。

完成例：ブラウザ

まずは、見出しを設定してみましょう。

使用例：HTML

<table>
  <tr>
    <th>時限</th>
    <th>教科</th>
  </tr>
</table>

次に、内容を<td>タグで囲み、追加しましょう。また、横一列ずつ<tr></tr>で囲むことに注意しましょう。

使用例：HTML

<table>
  <tr>
    <th>時限</th>
    <th>教科</th>
  </tr>
  <tr>
    <td>1時限目</td>
    <td>国語</td>
  </tr>
  <tr>
    <td>2時限目</td>
    <td>数学</td>
  </tr>
  <tr>
    <td>3時限目</td>
    <td>理科</td>
  </tr>
  <tr>
    <td>4時限目</td>
    <td>社会</td>
  </tr>
</table>

使用例：ブラウザ

かなり、表らしくなりました。しかし、表には罫線があるとさらに見やすくなりますね。

罫線は、HTMLやCSSでは「ボーダー」と呼ばれます。

通常、ボーダーはCSSで付けますが、今回はHTMLでボーダーを設定してみましょう。

<table border="1">
  <tr>
    <th>時限</th>
    <th>教科</th>
  </tr>
    <!--省略-->
</table>

tableタグには「border」という属性があります。border属性を指定することで、テーブルの外枠にボーダーを設定できます。「”1″」は、ボーダーの幅を指定します。

完成例：ブラウザ

これで完成です。

その他の属性

テーブルタグにはborder属性以外にも属性が用意されています。使用頻度は少ないかもしれませんが、載せておきます。

cellpadding属性

cellpadding属性は、ボーダーとセルの内容との余白（間隔）を調整します。

使用例：HTML

<table cellpadding="5">
  <tr>
    <th>見出しセル</th>
    <th>見出しセル</th>
  </tr>
</table>

cellspacing属性

cellspacing属性は、「セルのボーダーの幅」を調整します。border属性はテーブルの外枠の幅を調整しますが、こちらは、セル１つ１つのボーダーの幅を調整します。

使用例：HTML

<table cellspacing="5">
  <tr>
    <th>見出しセル</th>
    <th>見出しセル</th>
  </tr>
</table>

セルを結合してみよう

ここまでで、基本的な表は作れるようになりました。しかし、エクセルなどと同様に、セルを結合して行や列の見た目を変更したいときもあると思います。

そこで、次はセルを結合してテーブルをカスタマイズしてみましょう。

横方向に結合してみよう

セルを横方向に結合する場合は、「colspan」という属性を<td>要素や<th>要素に使います。

使用例：HTML

<table border="1">
  <tr>
    <th colspan="2">氏名</th>
  </tr>
  <tr>
    <td>山田</td>
    <td>佐藤</td>
  </tr>
</table>

使用例：ブラウザ

結合したいセルに「colspan=”◯”」を指定します。「” “」には結合したいセルの数を入れます。この場合は、2つのセルを結合するので”2″となります。

縦方向に結合してみよう

縦方向にセルを結合したい場合は、「rowspan」という属性を<td>要素や<th>要素に使います。

使用例：HTML

<table border="1">
  <tr>
    <td rowspan="3">山田</td>
    <td>性別</td>
    <td>年齢</td>
  </tr>
  <tr>
    <td>男</td>
    <td>25</td>
  </tr>
</table>

使用例：ブラウザ

理解するポイントまとめ

• tableタグは、「表」を作成するための要素です。
• tableタグは、「入れ子」で記述していきます。
• tableタグには、border属性やcellpadding属性、cellspacing属性等があります。
• tableタグは、「rowspan」と「colspan」を使うと、セルの結合ができます。