メニュー

WEBページに表を作るtableタグの書き方

HTML その他
当ページのリンクには広告が含まれています。
  • URLをコピーしました！
生徒

WEBページに表を書きたいです

先生

HTMLのtableタグで表を書く方法を説明します

この記事でわかること
  • WEBページに表を書く方法
  • tableタグの書き方
目次

WEBページの表はtableタグで作成する

WEBページで表を書きたいときには作りたいときにはtableタグを使用します。

この記事では、tableタグでの表の作成について説明します。

See the Pen table_1 by mik20621 (@mik20621) on CodePen.

tableタグの構成

tableタグの内側のタグ構成は以下のようになります。

  • 表の内容全体をtableタグで囲む
  • 表の各行の内容をそれぞれtrタグで囲む
  • 行内の各列の内容をそれぞれth(見出しの場合) またはtd(見出し以外) で囲む
<!-- 表全体をtableタグで囲む -->
<table>
  <!-- 1行の内容をtrタグで囲む -->
  <tr>
    <!-- 見出しのセルはthタグで書く -->
    <th>国名</th>　　
    <th>首都</th>　
  </tr>　
  <!-- 2行目 -->
  <tr>
    <td>日本</td>
    <td>東京</td>
  </tr>　
  <!-- 3行目 -->
  <tr>
    <td>アメリカ</td>
    <td>ワシントンDC</td>
  </tr>　
</table>

trタグで行を定義する

trタグで囲んだ内容が、表の1行になります。

表の1行おきに背景色を変えるといった場合は、trタグのスタイルを定義します。

<table>
  <!-- 1行目 -->
  <tr>
    <td>セル</td>
    <td>セル</td>
    <td>セル</td>
  </tr>
  <!-- 2行目 -->
  <tr>
    <td>セル</td>
    <td>セル</td>
    <td>セル</td>
  </tr>
</table>

See the Pen CSS-table-td by mik20621 (@mik20621) on CodePen.

行ごとに背景色を変える

表の行の背景色を行ごとに変えるには、CSSでtrタグに対して以下のようにスタイルを指定します。

/* 偶数の行を指定 */
tr:nth-of-type(2n) {
  background: lightblue;
}
/* 奇数の行を指定 */
tr:nth-of-type(2n+1) {
  background: lightyellow;
}

See the Pen table_1 by mik20621 (@mik20621) on CodePen.

nth-of-typeの書き方については、以下の記事で説明しています。

あわせて読みたい
:nth-of-typeと:nth-last-of-typeの使い方とnth-childとの違い HTMLの特定の要素にだけスタイルを指定したいです CSSの:nth-of-typeと:nth-last-of-typeの使い方を説明します 特定の順番の要素にだけCSSを指定したい WEBページで、同…

thタグで見出しセルを定義する

行や列の見出しのセルはthタグで定義します。

thはTable Headerの略です。

See the Pen CSS-table-th2 by mik20621 (@mik20621) on CodePen.

thタグにはブラウザで、以下のスタイルが適用されています。

  • 文字が中央寄せ
  • 文字が太字

列見出しも行見出しもthタグで定義する

列の見出しも、行の見出しも両方ともthタグで書きます。

See the Pen CSS-table-caption by mik20621 (@mik20621) on CodePen.

scope属性で見出しセルを区別する

列の見出しと行の見出しを区別するにはscope属性を使用します。

<!-- 列の見出しセルの場合 -->
<th scope="col">列の見出し</th>
<!-- 行の見出しセルの場合 -->
<th scope="row">行の見出し</th>
属性値説明
scoperow行の見出しであることを表します。
col列の見出しであることを表します。
rowgroup行グループの見出しであることを表します。
colgroup列グループの見出しであることを表します。

tdタグでセルを定義する

見出し以外の通常のセルはtdタグで書きます。

tdはTable Dataの略です。

<table>
  <tr>
    <!-- 1行目の各セルを定義 -->
    <td>セル１−１</td>
    <td>セル１−２</td>
    <td>セル１−３</td>
  </tr>
  <tr>
    <!-- 1行目の各セルを定義 -->
    <td>セル２−１</td>
    <td>セル２−２</td>
    <td>セル２−３</td>
  </tr>
</table>

See the Pen CSS-table-th by mik20621 (@mik20621) on CodePen.

その他の定義

theadタグでヘッダー行を定義する

theadはヘッダにする行を囲むタグです。

表の見出し行にするtrタグをtheadタグで囲みます。

<table>
  <thead>
    <tr>
      <th colspan="2>国名</th>
      <th>首都</th>
    </tr>
    <tr>
      <th>国名</th>
      <th>首都</th>
    </tr>
  </thead>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

See the Pen ::before::after-thead by mik20621 (@mik20621) on CodePen.

tfootタグでフッター行を定義する

tfootは表の合計行などフッター部分の行を表すタグです。

フッター行のtrタグをfootタグで囲みます。

<table>
  <tr>
    <th>売上</ｔｈ>
    <td>100円</td>
    <td>50円</td>
    <td>200円</td>
    <td>150円</td>
  </tr>
  <!-- フッターにする行をtfootタグで囲む
  <tfoot>
    <tr>
      <th>半期合計</ｔｈ>
      <td colspan="2">150円</td>
　　　 <td colspan="2">350円</td>
    </tr>    
    <tr>
      <th>通期合計</ｔｈ>
      <td colspan="4">500円</td>
    </tr>
  </tfoot>
</table>

See the Pen ::before::after-thead by mik20621 (@mik20621) on CodePen.

colgroupタグで表の列をグループ化する

colgroupタグで表の列のグループを定義することができます。

グループ化することで、グループ単位でスタイルを定義できるようになります。

<table>
  <!-- 列のグループを定義する -->
  <colgroup>
    <!-- 2列をグループ化 -->
    <col span="2" class="group1"/>
    <!-- 2列をグループ化 -->
    <col span="2" class="group2"/>
    <!-- 1列をグループ化 -->
    <col class="group3"/>
  </colgroup>
  <tr>
    <th>見出し</th>
    <th>見出し</th>
    <th>見出し</th>
    <th>見出し</th>
    <th>見出し</th>    
  </tr>
  <tr>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
</table>

See the Pen CSS-table-colgroup by mik20621 (@mik20621) on CodePen.

セルのプロパティを定義する

colspanは水平方向に複数のセルを結合する

colspanはセルが何列にまたがるかを指定します。

横方向に結合するセルの数を設定します。

See the Pen CSS-table-td by mik20621 (@mik20621) on CodePen.

rowspanは垂直方向に複数のセルを結合する

rowspanはセルが何行にまたがるかを指定します。

縦方向に結合するセルの数を設定します。

See the Pen CSS-table-colapan by mik20621 (@mik20621) on CodePen.

tableのルール

tableには以下のルールがあります。

  • 全ての行のセル数を同じにする（rowspan=”2″の場合、2個と数える)
  • 全ての列のセル数を同じにする（colspan=”2″の場合、2個と数える)

このルールに従っていないと、表示がおかしくなりますので、colspanやrowspanを使うときは特に注意が必要です。

captionタグで表の見出しを設定する

captionタグで表の見出しを書くことができます。

CSSのcaption-sideプロパティで見出しを表の上下どちらに表示するか設定できます。

See the Pen CSS-border-spacing by mik20621 (@mik20621) on CodePen.

tableタグの見た目を変更する

tableタグの表は、初期値のままだと見た目が古い感じがします。

CSSでスタイルを変更することで、見た目を変えることができます。

See the Pen table_1 by mik20621 (@mik20621) on CodePen.

border-collapseプロパティは枠線の形式を設定

tableの各セルの枠線の形式を以下の2つから設定します。

  • collapseは隣り合う枠線を重ねる
  • separateは隣り合う枠線を離す

collapseは隣り合う枠線を重ねる

border-collapse: collapse;は親要素や隣り合う要素の枠線を重ねて表示します。

親要素と子要素が重なる場合は子要素、同じ階層の要素の場合は下 ＞ 右 ＞ 上 ＞ 左の順で上に重なります。

See the Pen Untitled by mik20621 (@mik20621) on CodePen.

separateは隣り合う枠線を離す

border-collapse: separate;は親要素や隣り合う要素の枠線を離して表示します。

親要素と子要素が重なる場合は子要素、同じ階層の要素の場合は下 ＞ 右 ＞ 上 ＞ 左の順で上に重なります。

See the Pen Untitled by mik20621 (@mik20621) on CodePen.

枠線の間隔をborder-spacingプロパティで定義する

border-collapse: separate;の場合border-spacingプロパティで枠線の間のサイズを設定できます。

See the Pen CSS-border-spacing by mik20621 (@mik20621) on CodePen.

HTML その他
よかったらシェアしてね！
  • URLをコピーしました！
目次