<table> - テーブル(表)

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

■ 概要

項目説明
形式<table>~</table>
サポートH3 / e2 / Ch1 / Fx1 / Sa1 / Op1 / N2
カテゴリフローコンテンツ, パルパブルコンテンツ
親要素フローコンテンツ を子要素に持てるもの
子要素caption, colgroup, thead, tbody, tfoot要素
タグの省略開始タグ:必須 / 終了タグ:必須

■ 説明

<tr><th><td> と組み合わせてテーブル(表)を作成します。

■ 属性

【ボーダー関連属性】
属性意味
border=nH3/e2/Ch/Fx/Sa/Op/N2。枠線の太さを指定します。この属性を記述しない、または、0 を指定すると枠線を表示しません。HTML5 では 1 のみ指定可能で、太さはスタイルシートを用いるようになります。
bordercolor=colore2/Ch/Fx/Sa/Op/N4。枠線の色を指定します。HTML5 には採用されていません。代わりに border-color を使用してください。
bordercolordark=colore2。立体的な枠線の暗い部分の色を指定します。
bordercolorlight=colore2。立体的な枠線の明るい部分の色を指定します。
frame=frameH4-4/e3/Ch/Fx/Sa/Op。各セルの上下左右の枠線について、表示する/しないを制御します。HTML5 では廃止されました。
  void:表示しない。(既定値)
  above:上側のみ。
  below:下側のみ。
  hsides:上下のみ。
  vsides:左右のみ。
  lhs:左側(Left Hand Side)のみ。
  rhs:右側(Right Hand Side)のみ。
  box:上下左右。
  border:上下左右。
rules=rulesH4-4/e3/Ch/Fx/Sa/Op。テーブルの内側の枠線を表示するルールを指定します。HTML5 では廃止されました。
  none:表示しない。
  groups:<thead>, <tbody>, <tfoot> で指定したグループの境界のみ。
  rows:横方向のみ。
  cols:縦方向のみ。
  all:すべて。(既定値)
【背景関連属性】
属性意味
background=urle3/Ch/Fx/Sa/Op/N4。背景画像を指定します。<tr>, <th>, <td> でも指定可能です。スタイルシートの場合は backgroung-image を使用してください。
bgcolor=colorH4T-4T/e2/Ch/Fx/Sa/Op/N3。背景色を指定します。<tr>, <th>, <td> でも指定可能です。スタイルシートの場合は backgroung-color を使用してください。
【配置関連属性】
属性意味
align=alignH3-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=nH3-H4/e2/Ch/Fx/Sa/Op/N2。枠線とセルの内容の間の隙間をピクセル単位で指定します。
cellspacing=nH3-H4/e2/Ch/Fx/Sa/Op/N2。内枠の太さを指定します。0 を指定すると、立体感の無い枠線を表示することができます。
width=nH3-H4/e2/Ch/Fx/Sa/Op/N2。テーブルの横幅をピクセルまたはパーセンテージで指定します。
height=ne2/Ch/Fx/Sa/Op/N2。テーブルの高さをピクセルまたはパーセンテージで指定します。
hspace=nCh/Sa/Op/N2。テーブルの周りの横方向の余白をピクセル単位で指定します。
vspace=nCh/Sa/Op/N2。テーブルの周りの縦方向の余白をピクセル単位で指定します。
【その他属性】
属性意味
cols=ne3/N4。列数を指定します。この属性を指定することにより、テーブルの表示速度が若干速くなる場合がある。
datapagesize=sizee4。データバインド機能を用いる際の、レコード数を指定します。
datasrc=datasrce4。データバインド機能を用いる際の、データソースの ID を指定します。
summary=summaryH4-4。音声読み上げブラウザなどのために、この表の目的や構成の説明を記述します。HTML4.01 では必須属性とされていましたが、HTML5 では廃止されました。
【一般属性】
属性意味
accesskey=keyH4/e4/Ch2/Fx2/Sa3/Op12/N6/i1。アクセスキーを指定します。
class=classH4/e3/Ch1/Fx1/Sa1/Op1/N4。クラスを指定します。
contenteditable=boolH5/e55/Ch11/Fx3/Op10.6/Sa3.2。要素を編集可能にします。
dir=dirH4/e5/Ch5/Fx4/Sa6/Op25/N6。文字の表示方向を指定します。
hiddenH5/e/Ch/Fx/Sa/Op。要素を非表示にします。
id=idH4/e3/Ch/Fx/Sa/Op/N4。ID を指定します。
lang=langH4/e4/Ch/Fx/Sa/Op/N6。言語を指定します。
spellcheck=boolH5。スペルをチェックします。
style=styleH4/e3/Ch/Fx/Sa/Op/N4。スタイルシートを指定します。
tabindex=nH4/e4/Ch/Fx/Sa/Op/N6。タブインデックスを指定します。
title=titleH2/e2/Ch/Fx/Sa/Op/N6。タイトルを指定します。
translate=titleH5。翻訳可否を指定します。

■ 使用例

HTML
<table 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

■ セルに色をつける

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

HTML
<style type="text/css">
.table2 th {
  background-color: #cccccc;
}
</style>
<table class="table2" 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

■ 枠線を細くする

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

HTML
<style type="text/css">
.table3 {
  border-collapse: collapse;
}
.table3 th {
  background-color: #cccccc;
}
</style>
<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 を指定します。

HTML
<style type="text/css">
.table4 {
  border-collapse: collapse;
  width: 250px;
}
.table4 th {
  background-color: #cccccc;
}
</style>
<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-ailgn を指定します。

HTML
<style type="text/css">
.table5 {
  border-collapse: collapse;
  width: 250px;
}
.table5 th {
  background-color: #cccccc;
}
.table5 td {
  text-align: center;
}
</style>
<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属性を指定します。

HTML
<table border=1>
 <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
<table border=1 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 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>
</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-2015 杜甫々
初版:1996年9月10日 最終更新:2015年1月24日
http://www.tohoho-web.com/html/table.htm