<table> - テーブル(表)

トップ > HTMLリファレンス > <table>

概要

形式
<table>～</table>
サポート
LS / H3 / e2 / Ch1 / Fx1 / Sa1 / Op1 / N2
カテゴリ
フローコンテンツ
パルパブルコンテンツ
親要素
フローコンテンツ を子要素に持てるもの
子要素
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 では廃止されました。

使用例

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>テーブルテスト</title>
<style>
.table1 {
  border: 1px solid gray;
}
.table1 th, .table1 td {
  border: 1px solid gray;
}
</style>
</head>
<body>
<table class="table1">
  <tr><th></th><th>列-A</th><th>列-B</th></tr>
  <tr><td>行-1</td><td>A-1</td><td>B-1</td></tr>
  <tr><td>行-2</td><td>A-2</td><td>B-2</td></tr>
  <tr><td>行-3</td><td>A-3</td><td>B-3</td></tr>
</table>
</body>
</html>
表示
列-A列-B
行-1A-1B-1
行-2A-2B-2
行-3A-3B-3

セルに色をつける

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

CSS
.table2 {
  border: 1px solid gray;
}
.table2 th, .table2 td {
  border: 1px solid gray;
}
.table2 th {
  background-color: #ccf;
}
HTML
<table class="table2">
  <tr><th></th><th>列-A</th><th>列-B</th></tr>
  <tr><td>行-1</td><td>A-1</td><td>B-1</td></tr>
  <tr><td>行-2</td><td>A-2</td><td>B-2</td></tr>
  <tr><td>行-3</td><td>A-3</td><td>B-3</td></tr>
</table>
表示
列-A列-B
行-1A-1B-1
行-2A-2B-2
行-3A-3B-3

枠線を細くする

枠線を細くするには、border-collapse を指定します。

CSS
.table3 {
  border-collapse: collapse;
}
.table3 th, .table3 td {
  border: 1px solid gray;
}
HTML
<table class="table3" border=1>
  <tr><th></th><th>列-A</th><th>列-B</th></tr>
  <tr><td>行-1</td><td>A-1</td><td>B-1</td></tr>
  <tr><td>行-2</td><td>A-2</td><td>B-2</td></tr>
  <tr><td>行-3</td><td>A-3</td><td>B-3</td></tr>
</table>
表示
列-A列-B
行-1A-1B-1
行-2A-2B-2
行-3A-3B-3

横幅を指定する

横幅を指定するには、width を指定します。

CSS
.table4 {
  border-collapse: collapse;
  width: 250px;
}
.table4 th, .table4 td {
  border: 1px solid gray;
}
HTML
<table class="table4" border=1>
  <tr><th></th><th>列-A</th><th>列-B</th></tr>
  <tr><td>行-1</td><td>A-1</td><td>B-1</td></tr>
  <tr><td>行-2</td><td>A-2</td><td>B-2</td></tr>
  <tr><td>行-3</td><td>A-3</td><td>B-3</td></tr>
</table>
表示
列-A列-B
行-1A-1B-1
行-2A-2B-2
行-3A-3B-3

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

セルを右寄せ・中央寄せするには、text-align を指定します。

HTML
.table5 {
  border-collapse: collapse;
  width: 250px;
}
.table5 th, .table5 td {
  text-align: center;
}
HTML
<table class="table5" border=1>
  <tr><th></th><th>列-A</th><th>列-B</th></tr>
  <tr><td>行-1</td><td>A-1</td><td>B-1</td></tr>
  <tr><td>行-2</td><td>A-2</td><td>B-2</td></tr>
  <tr><td>行-3</td><td>A-3</td><td>B-3</td></tr>
</table>
表示
列-A列-B
行-1A-1B-1
行-2A-2B-2
行-3A-3B-3

セルを連結する

セルを横に連結するには colspan属性、縦に連結するには rowspan属性を指定します。

CSS
.table6 {
  border-collapse: collapse;
}
.table6 th, .table6 td {
  border: 1px solid gray;
}
HTML
<table class="table6">
 <tr><th></th><th>列-A</th><th>列-B</th></tr>
 <tr><td>行-1</td><td colspan=2>A-1</td></tr>
 <tr><td>行-2</td><td rowspan=2>A-2</td><td>B-2</td></tr>
 <tr><td>行-3</td><td>B-3</td></tr>
</table>
表示
列-A列-B
行-1A-1
行-2A-2B-2
行-3B-3

テーブルを横に並べる

セルを横に並べるには、float を指定します。

HTML
HTML
<table class="table4" style="float:left; margin-right:20px;">
  <tr><th></th><th>列-A</th><th>列-B</th></tr>
  <tr><td>行-1</td><td>A-1</td><td>B-1</td></tr>
  <tr><td>行-2</td><td>A-2</td><td>B-2</td></tr>
</table>
<table class="table4">
  <tr><th></th><th>列-A</th><th>列-B</th></tr>
  <tr><td>行-1</td><td>A-1</td><td>B-1</td></tr>
  <tr><td>行-2</td><td>A-2</td><td>B-2</td></tr>
</table>
表示
列-A列-B
行-1A-1B-1
行-2A-2B-2
列-A列-B
行-1A-1B-1
行-2A-2B-2

関連項目

<caption>、 <tr>、 <th>、 <td>、 <thead>、 <tbody>、 <tfoot>、 <col>、 <colgroup>

参考

リンク

Copyright (C) 1996-2017 杜甫々
初版:1996年9月10日 最終更新:2017年12月31日
http://www.tohoho-web.com/html/table.htm