【 HTML入門 】table・tr・th・tdタグで表作成をしよう

この記事では表を作る上で欠かせない、HTMLのtable・tr・th・tdタグについて解説します。

WEBサイト内ではよく、会社概要や料金表などで使われていることがありますが、それ以外にもお世話になること間違いなしです。

table・tr・th・tdタグ

表（テーブル）を作成します。

trタグで表の行グループを定義し、その中でthタグで表の見出し、tdタグで表の中身であるセルを定義します。そして、それら全てをtableタグで挟むことで表を作成できます。tr要素の数がそのまま表の行数になります。thタグ（見出し）がなくても表は作成できます。

HTML

<table>
  <tr>
    <th>名前</th>
    <th>ポジション</th>
  </tr>
  <tr>
    <td>イチロー</td>
    <td>外野手</td>
  </tr>
  <tr>
    <td>田中将大</td>
    <td>投手</td>
  </tr>
  <tr>
    <td>山田哲人</td>
    <td>二塁手</td>
  </tr>
</table>

CSS

table,
th,
td{
  border: 1px solid #aaa;
}

上の例では見出しが横に並んでいますが、見出しを縦に並べることもできます。

HTML

<table>
  <tr>
    <th>名前</th>
    <td>イチロー</td>
    <td>田中将大</td>
    <td>山田哲人</td>
  </tr>
  <tr>
    <th>ポジション</th>
    <td>外野手</td>
    <td>投手</td>
    <td>二塁手</td>
  </tr>
</table>

属性について

thまたはtd要素に対して属性を指定すると、複数のセルをつなげることができます。

以下の場合、rowspan="3"となっているtd要素が縦に3つ結合されます。

HTML

<table>
  <tr>
    <th>名前</th>
    <th>ポジション</th>
    <th>出身国名</th>
  </tr>
  <tr>
    <td>イチロー</td>
    <td>外野手</td>
    <td rowspan="3">日本</td>
  </tr>
  <tr>
    <td>田中将大</td>
    <td>投手</td>
  </tr>
  <tr>
    <td>山田哲人</td>
    <td>二塁手</td>
  </tr>
</table>

こちらは、横に結合されるバージョンです。

HTML

<table>
  <tr>
    <th>名前</th>
    <td>イチロー</td>
    <td>田中将大</td>
    <td>山田哲人</td>
  </tr>
  <tr>
    <th>ポジション</th>
    <td>外野手</td>
    <td>投手</td>
    <td>二塁手</td>
  </tr>
  <tr>
    <th>出身国名</th>
    <td colspan="3">日本</td>
  </tr>
</table>

関連するCSSプロパティ

border

table・th・tdタグに、ボーダーを指定します。

CSS

table,
th,
td{
  border: 1px solid #00a3d3;
}

border-collapse

隣接するセルのボーダーを重ねて表示するか、間隔をあけて表示するかをtableタグに、指定します。

CSS

table{
  border-collapse: collapse;
}

table,
th,
td{
  border: 1px solid #00a3d3;
}

border-spacing

隣接するセルのボーダーとボーダーの間隔を、tableタグに指定します。

CSS

table{
  border-spacing: 10px
}

table,
th,
td{
  border: 1px solid #00a3d3;
}

text-align

セルの中身の横位置を、指定します。

table・tr・th・tdタグのどれにでも指定できます。何も指定していないと、基本左寄せですが、th要素だけはデフォルトが中央寄せです。

CSS

table,
th,
td{
  text-align: center;
  border: 1px solid #00a3d3;
}

vertical-align

セルの中身の縦位置を、tr・th・tdタグのどれかに指定します。

CSS

table,
th,
td{
  border: 1px solid #00a3d3;
  vertical-align: top;
}

padding

thタグ（見出し）やtdタグ（表の中身）の余白を指定します。

CSS

table,
th,
td{
  border: 1px solid #00a3d3;
}

th,
td{
  padding: 30px;
}

width

table（表）の幅を指定します。

幅を500pxなどと指定することももちろん可能ですが、100%と指定することで親要素にピッタリとはまるので、レスポンシブデザインで重宝されます。

CSS

table,
th,
td{
  border: 1px solid #00a3d3;
}

table{
  width: 100%;
}

height

table（表）の高さを指定します。

高さを指定すると、vertical-alignの効果がわかりやすくなります。

CSS

table,
th,
td{
  border: 1px solid #00a3d3;
}

table{
  height: 400px;
}

テーブル作成例

以上を踏まえて、簡単な会社概要を制作してみます。

HTML

<table>
  <tr>
    <th>会社名</th>
    <td>株式会社〇〇</td>
  </tr>
  <tr>
    <th>本社所在地</th>
    <td>東京都杉並区〇〇〇〇</td>
  </tr>
  <tr>
    <th>電話番号</th>
    <td>03-XXXX-XXXX</td>
  </tr>
  <tr>
    <th>設立</th>
    <td>2019年</td>
  </tr>
</table>

CSS

table,th,td{
  border:1px #2bc7ec solid;
  text-align: left;
  
}

table{
  border-collapse: collapse;
  width: 100%;
}

th,td{
  padding: 15px;
}

th{
  background: #c9e7ee;
}

まとめ

table・tr・th・tdタグについての記事、いかがでしたでしょうか。

HTML関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。