<table> - テーブル(表)

目次

概要

形式
<table>～</table>
サポート
https://caniuse.com/mdn-html_elements_table
カテゴリ
フローコンテンツ
パルパブルコンテンツ
親要素
フローコンテンツ を子要素に持てるもの
子要素
caption, colgroup, thead, tbody, tr, tfoot, script, template要素
タグの省略
開始タグ:必須 / 終了タグ:必須
属性
グローバル属性

説明

テーブルを表示します。テーブルの行は <tr>、ヘッダセルは <th>、通常セルは <td> で表します。他にも下記の関連要素があります。

以前はレイアウトの目的でテーブルが多用された時期もありましたが、現在ではレイアウトは フレックスボックス や グリッド を用いることが推奨されています。

属性

共通属性

グローバル属性
詳細は グローバル属性 を参照してください。

ボーダー関連属性

border=n
[非推奨] H3/e2/Ch/Fx/Sa/Op/N2
枠線の太さを指定します。この属性を記述しない、または、0 を指定すると枠線を表示しません。HTML5 では 1 のみ指定可能で、太さはスタイルシートを用いるようになります。HTML Living Standard では廃止されました。
bordercolor=color
[非推奨] e2/Ch/Fx/Sa/Op/N4
枠線の色を指定します。HTML5 には採用されていません。代わりに border-color を使用してください。
bordercolordark=color
[非推奨] e2
立体的な枠線の暗い部分の色を指定します。
bordercolorlight=color
[非推奨] e2
立体的な枠線の明るい部分の色を指定します。
frame=frame
[非推奨] H4-4/e3/Ch/Fx/Sa/Op
各セルの上下左右の枠線について、表示する/しないを制御します。HTML5 では廃止されました。
void
表示しない。(既定値)
above
上側のみ。
below
下側のみ。
hsides
上下のみ。
vsides
左右のみ。
lhs
左側(Left Hand Side)のみ。
rhs
右側(Right Hand Side)のみ。
box
上下左右。
border
上下左右。
rules=rules
[非推奨] H4-4/e3/Ch/Fx/Sa/Op
テーブルの内側の枠線を表示するルールを指定します。HTML5 では廃止されました。
none
表示しない。
groups
<thead>, <tbody>, <tfoot> で指定したグループの境界のみ。
rows
横方向のみ。
cols
縦方向のみ。
all
すべて。(既定値)

背景関連属性

background=url
[非推奨] e3/Ch/Fx/Sa/Op/N4
背景画像を指定します。<tr>, <th>, <td> でも指定可能です。スタイルシートの場合は backgroung-image を使用してください。
bgcolor=color
[非推奨] H4T-4T/e2/Ch/Fx/Sa/Op/N3
背景色を指定します。<tr>, <th>, <td> でも指定可能です。スタイルシートの場合は backgroung-color を使用してください。

配置関連属性

align=align
[非推奨] H3-H4T/e2/Ch/Fx/Sa/Op/N2
テーブルの表示位置を指定します。
center
中央表示(H3/e2/Ch/Fx/Sa/Op/N4)
left
左端表示(H2/e2/Ch/Fx/Sa/Op/N2)(既定値)
right
右端表示(H2/e2/Ch/Fx/Sa/Op/N2)
cellpadding=n
[非推奨] H3-H4/e2/Ch/Fx/Sa/Op/N2
枠線とセルの内容の間の隙間をピクセル単位で指定します。
cellspacing=n
[非推奨] H3-H4/e2/Ch/Fx/Sa/Op/N2
内枠の太さを指定します。0 を指定すると、立体感の無い枠線を表示することができます。
width=n
[非推奨] H3-H4/e2/Ch/Fx/Sa/Op/N2
テーブルの横幅をピクセルまたはパーセンテージで指定します。
height=n
[非推奨] e2/Ch/Fx/Sa/Op/N2
テーブルの高さをピクセルまたはパーセンテージで指定します。
hspace=n
[非推奨] Ch/Sa/Op/N2
テーブルの周りの横方向の余白をピクセル単位で指定します。
vspace=n
[非推奨] Ch/Sa/Op/N2
テーブルの周りの縦方向の余白をピクセル単位で指定します。

その他属性

cols=n
[非推奨] e3/N4
列数を指定します。この属性を指定することにより、テーブルの表示速度が若干速くなる場合があります。
datapagesize=size
[非推奨] e4
データバインド機能を用いる際の、レコード数を指定します。
datasrc=datasrc
[非推奨] e4
データバインド機能を用いる際の、データソースの ID を指定します。
summary=summary
[非推奨] H4-4
音声読み上げブラウザなどのために、この表の目的や構成の説明を記述します。HTML4.01 では必須属性とされていましたが、HTML5 では廃止されました。

使用例

基本的なテーブル

基本的なテーブルは次のように記述します。<table> はテーブル、<tr> は行、<th> はヘッダセル、<td> はデータセルを示します。デフォルトでは枠線は表示されません。

HTML
<table>
  <tr><th></th><th>列-A</th><th>列-B</th></tr>
  <tr><th>行-1</th><td>A-1</td><td>B-1</td></tr>
  <tr><th>行-2</th><td>A-2</td><td>B-2</td></tr>
  <tr><th>行-3</th><td>A-3</td><td>B-3</td></tr>
</table>
表示
列-A列-B
行-1A-1B-1
行-2A-2B-2
行-3A-3B-3

枠線を表示する

枠線を表示するには スタイルシート の border を用います。下記は、class="my-table" を指定したテーブルの th と td に 1ピクセル、直線、色が #999 の枠線を描画することを意味します。

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<title>テーブルテスト</title>
<style>
.my-table th,
.my-table td {
  border: 1px solid #999;
}
</style>
</head>
<body>
<table class="my-table">
  <tr><th></th><th>列-A</th><th>列-B</th></tr>
  <tr><th>行-1</th><td>A-1</td><td>B-1</td></tr>
  <tr><th>行-2</th><td>A-2</td><td>B-2</td></tr>
  <tr><th>行-3</th><td>A-3</td><td>B-3</td></tr>
</table>
</body>
</html>
表示
列-A列-B
行-1A-1B-1
行-2A-2B-2
行-3A-3B-3

枠線の隙間を無くす

枠線の隙間を無くすには、border-collapse を指定します。

CSS
.my-table {
  border-collapse: collapse;
}
表示
列-A列-B
行-1A-1B-1
行-2A-2B-2
行-3A-3B-3

セルに色をつける

セルに色をつけるには background-color を指定します。

CSS
.my-table th {
  background-color: #ddf;
}
表示
列-A列-B
行-1A-1B-1
行-2A-2B-2
行-3A-3B-3

セルの幅や高さを指定する

セルの幅を指定するには width、高さを指定するには height を指定します。

CSS
.my-table th,
.my-table td {
  border: 1px solid #999;
  width: 6rem;
}
表示
列-A列-B
行-1A-1B-1
行-2A-2B-2
行-3A-3B-3

セルを右寄せ・左寄せ・中央寄せする

セルを右寄せ・左寄せ・中央寄せするには text-align に left(左寄せ), center(中央寄せ), right(右寄せ) を指定します。ヘッダセル(th)はデフォルトで中央寄せされています。

CSS
.my-table td {
  text-align: center;
}
表示
列-A列-B
行-1A-1B-1
行-2A-2B-2
行-3A-3B-3

3列目の td のみ制御したい場合は :nth-child(n) を指定します。

CSS
.my-table td:nth-child(3) {
  text-align: center;
}
表示
列-A列-B
行-1A-1B-1
行-2A-2B-2
行-3A-3B-3

セルを連結する

セルを連結するには <th> や <td> に rowspan=n, colspan=n を指定します。n は連結するセル数を指定します。

HTML
<table class="my-table">
  <tr><th></th><th>列-A</th><th>列-B</th></tr>
  <tr><th>行-1</th><td colspan="2">A-1</td></tr>
  <tr><th>行-2</th><td>A-2</td><td rowspan="2">B-2</td></tr>
  <tr><th>行-3</th><td>A-3</td></tr>
</table>
表示
列-A列-B
行-1A-1
行-2A-2B-2
行-3A-3

テーブルを横に並べる

テーブルを横に並べるには flex を使用します。

CSS
.my-flex {
  display: flex;
  gap: 1rem;
}
HTML
<div class="my-flex">
  <table class="my-table">
    ...
  </table>
  <table class="my-table">
    ...
  </table>
</div>
表示
列-A列-B
行-1A-1B-1
行-2A-2B-2
行-3A-3B-3
列-A列-B
行-1A-1B-1
行-2A-2B-2
行-3A-3B-3

角の丸いテーブルを表示する

少々マニアックですが、下記の様にして角の丸いテーブルを記述することができます。

CSS
.my-round-table { border-spacing: 0; }
.my-round-table > * > tr > th { background-color: #ddf; }
.my-round-table > * > tr > td { text-align: center; }
.my-round-table > * > tr > * { width: 6rem; border-right: 1px solid #999; border-bottom: 1px solid #999; }
.my-round-table > * > tr:first-child > *:first-child { border-top-left-radius:     .5rem; }
.my-round-table > * > tr:first-child > *:last-child  { border-top-right-radius:    .5rem; }
.my-round-table > * > tr:last-child  > *:first-child { border-bottom-left-radius:  .5rem; }
.my-round-table > * > tr:last-child  > *:last-child  { border-bottom-right-radius: .5rem; }
.my-round-table > * > tr:first-child > *  { border-top:  1px solid #999; }
.my-round-table > * > tr > *:first-child  { border-left: 1px solid #999; }
HTML
<table class="my-round-table">
  ...
</table>
表示
列-A列-B
行-1A-1B-1
行-2A-2B-2
行-3A-3B-3

ヘッダ固定のテーブルを表示する

ヘッダ固定のスクロールテーブル を参照してください。

Copyright (C) 1996-2025 杜甫々
初版:1996年9月10日 最終更新:2025年3月2日
https://www.tohoho-web.com/html/table.htm