table タグ


HTMLの表の構造

 HTMLの表は table タグで 行を挟んだ構造になっています。行のうち、先頭はよく表題行として扱われます。

 行は trタグで複数のtdタグ(表題行の場合はthタグ)を挟んだ構造になっています。

 表の罫線はデフォルトでは表示されません。罫線を表示するには、スタイルを設定する必要があります。

<table>
<tr><td>行先</td><td>列車種別</td><td>発車時刻</td></tr>
<tr><td>千葉</td><td>快速</td><td>13:00</td></tr>
<tr><td>津田沼</td><td>普通</td><td>13:05</td></tr>
</table>
行先列車種別発車時刻
千葉快速13:00
津田沼普通13:05

 罫線と表題行を付けた例を示します。この例のように、スタイルを各セルに設定するのは面倒なのでスタイルシートでスタイルを設定するのがよいです。

<table style="border: solid 1px black;">
<tr><th style="border: solid 1px black;">行先</th><th style="border: solid 1px black;">列車種別</th>
  <th style="border: solid 1px black;">発車時刻</th></tr>
<tr><td style="border: solid 1px black;">三鷹</td><td style="border: solid 1px black;">普通</td>
  <td style="border: solid 1px black;">19:00</td></tr>
<tr><td style="border: solid 1px black;">立川</td><td style="border: solid 1px black;">快速</td>
  <td style="border: solid 1px black;">19:05</td></tr>
</table>
行先列車種別発車時刻
三鷹普通19:00
立川快速19:05

 大きな表では、ヘッダー部、表の本体部、フッター部に分けることができて、専用のタグが用意されています。さらに表のタイトルも付けることができます。

<table>
<!-- 表題 caption -->
<caption>
家計集計表
</caption>
<!-- ヘッダー部 thead -->
<thead>
<tr><th>費目</th><th>金額</th></tr>
</thead>
<!-- フッター部  tfoot -->
<tfoot>
<tr><td>合計</td><td>45,000</td></tr>
</tfoot>
<!-- 本体 tbody -->
<tbody>
<tr><td>食費</td><td>40,000</td></tr>
<tr><td>公共料金</td><td>10,000</td></tr>
<tr><td>交通費</td><td>10,000</td></tr>
<tr><td>雑費</td><td>5,000</td></tr>
</tbody>
</table>

家計集計表
費目金額
合計45,000
食費40,000
公共料金10,000
交通費10,000
雑費5,000

セルの結合

 隣り合ったセルを結合することができます。結合には、colspan, rowspan属性を使用します。下の例は隣り合ったセルを結合しています。(見やすさのため class属性を省略しています)

<table>
<tr><td>cell 11</td><td>cell 12</td><td> cell 13</td></tr>
<tr><td colspan="2">cell 21</td><td>cell 23</td></tr>
<tr><td>cell 31</td><td colspan="2">cell 32</td></tr>
</table>
cell 11cell 12 cell 13
cell 21cell 23
cell 31cell 32

 下の例は隣り合った列を結合しています。(見やすさのため class属性を省略しています)

<table>
<tr><td>cell 11</td><td>cell 12</td><td rowspan="3"> cell 13</td></tr>
<tr><td rowspan="2">cell 21</td><td>cell 22</td></tr>
<tr><td>cell 32</td></tr>
</table>
cell 11cell 12 cell 13
cell 21cell 22
cell 32

罫線の設定

 表の罫線はデフォルトでは表示されません。表示するには、スタイルを設定します。 表の罫線は表全体の罫線とそれぞれのセルの罫線が独立して表示されます。 デフォルトでは、これらの罫線は少しだけ離れているので、罫線を表示させると二重罫線のように見えます。

罫線のスタイル、幅、色

 罫線のスタイル、幅、色は、それぞれ border-style, border-width, border-color で設定できます。また、これらは border でまとめて設定可能です。

 border-styleは、罫線の種類を指定します。これは次の表のいずれかの値でなければなりません。

border-style意味
none罫線なし(デフォルト)
hidden罫線非表示
dotted点線
dashed破線
solid実戦
double二重線
groove3D わだち
ridge3D 逆わだち
inset3D へこみ
outset3D もりあがり
initial初期値(デフォルトにもどす)
inherit継承

罫線のサンプル

<style>
table.a, td.a {
  border-style: inset;
  border-width: 2px;
  border-color: green;
}
</style>

<table class="a">
<tr><td class="a">A1</td><td class="a">B1</td></tr>
<tr><td class="a">A2</td><td class="a">B2</td></tr>
<tr><td class="a">A3</td><td class="a">B3</td></tr>
</table>

A1B1
A2B2
A3B3


罫線どうしの余白

 セルどうしの隙間を埋めるには、border-collapseスタイルを使います。

<style>
table.b, td.b {
  border-style: solid;
  border-width: 1px;
  border-color: green;
  border-collapse: collapse;
}
</style>

<table class="b">
<tr><td class="b">A1</td><td class="b">B1</td></tr>
<tr><td class="b">A2</td><td class="b">B2</td></tr>
<tr><td class="b">A3</td><td class="b">B3</td></tr>
</table>

A1B1
A2B2
A3B3

 セルどうしの隙間の間隔は、border-spacingスタイルで調整できます。

<style>
table.c, td.c {
  border-style: solid;
  border-width: 1px;
  border-color: green;
  border-spacing: 0px 2px;
}
</style>

<table class="c">
<tr><td class="c">A1</td><td class="c">B1</td></tr>
<tr><td class="c">A2</td><td class="c">B2</td></tr>
<tr><td class="c">A3</td><td class="c">B3</td></tr>
</table>

A1B1
A2B2
A3B3

表の位置や余白や幅

中寄せ、右寄せ

 表をページの中央に表示するには、align属性を使用します。ただし、これはHTML5では廃止されているので、テーブルをdivタグで囲みstyle属性で"text-align:center"を設定します。あるいはcenterタグで囲むことも可能です。(centerタグはHTML5では廃止)

<table class="b" align="center">
<tr><td class="b">A1</td><td class="b">B1</td></tr>
<tr><td class="b">A2</td><td class="b">B2</td></tr>
<tr><td class="b">A3</td><td class="b">B3</td></tr>
</table>
A1B1
A2B2
A3B3

スタイルを設定してテーブルをセンタリングするには、下のようにしますが、長いのでalign属性かcenterタグを使ったほうが簡単です。

<table class="b" style="margin-left: auto; margin-right: auto;">
<tr><td class="b">A1</td><td class="b">B1</td></tr>
<tr><td class="b">A2</td><td class="b">B2</td></tr>
<tr><td class="b">A3</td><td class="b">B3</td></tr>
</table>
A1B1
A2B2
A3B3

 テーブルを右寄せするには、floatスタイルを使います。テーブルの後にclear属性を入れるのを忘れないでください。

<table class="b" style="float: right;">
<tr><td class="b">A1</td><td class="b">B1</td></tr>
<tr><td class="b">A2</td><td class="b">B2</td></tr>
<tr><td class="b">A3</td><td class="b">B3</td></tr>
</table>
<p style="clear:both;"> </p>
A1B1
A2B2
A3B3

 

表位置の余白

 表の左側に余白を入れるには、margin-leftスタイルを使います。もちろん、margin-rightやmargin-topもあって上下左右に余白を入れることができます。余白はピクセル(px)で指定できるほか、%で指定もできますが、%の場合はブラウザ全体の幅の%になります。

<table class="b" style="margin-left: 15%;">
<tr><td class="b">A1</td><td class="b">B1</td></tr>
<tr><td class="b">A2</td><td class="b">B2</td></tr>
<tr><td class="b">A3</td><td class="b">B3</td></tr>
</table>
A1B1
A2B2
A3B3

表の幅

 表の全体の幅を指定するには、widthスタイルを設定します。また、個別セルの幅を指定することで全体の幅を決めることができます。幅の単位ですが、絶対値(px)で指定することもできますが、相対値(%)で指定することもできます。%の場合、ブラウザのウィンドウ幅に対する%になります。

<table class="b" style="width: 50%;">
<tr><td class="b">A1</td><td class="b">B1</td></tr>
<tr><td class="b">A2</td><td class="b">B2</td></tr>
<tr><td class="b">A3</td><td class="b">B3</td></tr>
</table>
A1B1
A2B2
A3B3

<table class="b">
<tr><td class="b" style="width: 150px">A1</td><td class="b" style="width:100px">B1</td></tr>
<tr><td class="b">A2</td><td class="b">B2</td></tr>
<tr><td class="b">A3</td><td class="b">B3</td></tr>
</table>
A1B1
A2B2
A3B3

セルのスタイル

セルの余白

 セルに余白を入れるには、paddingスタイルを設定します。

<table class="b">
<tr><td class="b" style="padding: 10px;">A1</td><td class="b" style="padding: 10px;">B1</td></tr>
<tr><td class="b">A2</td><td class="b">B2</td></tr>
<tr><td class="b">A3</td><td class="b" style="padding-left: 20px;">B3</td></tr>
</table>
A1B1
A2B2
A3B3

セルの幅や高さ

 セルの幅や高さを指定するには、セルのwidth, heightスタイルを設定します。

<table class="b">
<tr><td class="b" style="width:100px;">A1</td><td class="b" style="width: 200px;">B1</td></tr>
<tr><td class="b" style="height: 40px;">A2</td><td class="b">B2</td></tr>
<tr><td class="b">A3</td><td class="b" style="height: 30px;">B3</td></tr>
</table>
A1B1
A2B2
A3B3

セル内の文字列の位置

 セル内の文字列の位置の設定には、横方向はtext-align, 縦方向はvertical-alignスタイルを使用します。

<table class="b">
<tr><td class="b" style="width:100px; text-align: center;">A1</td><td class="b" style="width: 200px; text-align: right;">B1</td></tr>
<tr><td class="b" style="height: 40px; vertical-align: center;">A2</td><td class="b" style="vertical-align: bottom;">B2</td></tr>
<tr><td class="b" style="vertical-align: top;">A3</td><td class="b" style="height: 30px; text-align: center;">B3</td></tr>
</table>
A1B1
A2B2
A3B3

セルの背景

 セルの背景色を変更するには、background-colorスタイルを使います。background-imageを使うことにより、イメージを設定することもできます。

<table class="b">
<tr><td class="b" style="width:100px; background-color: silver;">A1</td><td class="b" style="width: 200px;">B1</td></tr>
<tr><td class="b">A2</td><td class="b" style="background-image: url('back-pink.png');">B2</td></tr>
<tr><td class="b" style="background-color: beige;">A3</td><td class="b">B3</td></tr>
</table>
A1B1
A2B2
A3B3

 colgroup, colタグを使ってまとめて背景色を設定することもできます。

<table class="b">
<colgroup>
 <col style="background-color: #e0e0e0;">
</colgroup>
<tr><td class="b">行先</td><td class="b">列車種別</td><td class="b">発車時刻</td></tr>
<tr><td class="b">我孫子</td><td class="b">普通</td><td class="b">19:00</td></tr>
<tr><td class="b">取手</td><td class="b">快速</td><td class="b">19:05</td></tr>
<tr><td class="b">柏</td><td class="b">普通</td><td class="b">19:05</td></tr>
<tr><td class="b">土浦</td><td class="b">快速</td><td class="b">19:10</td></tr>
</table>
行先列車種別発車時刻
我孫子普通19:00
取手快速19:05
普通19:05
土浦快速19:10

 行に関してはtrタグにスタイルを設定することにより、まとめて背景色を変更できます。

<table class="b">
<tr style="background-color: #e0e0e0;"><td class="b">行先</td><td class="b">列車種別</td><td class="b">発車時刻</td></tr>
<tr><td class="b">小田原</td><td class="b">普通</td><td class="b">19:00</td></tr>
<tr style="background-color: lightcyan;"><td class="b">熱海</td><td class="b">普通</td><td class="b">19:10</td></tr>
<tr><td class="b">平塚</td><td class="b">普通</td><td class="b">19:16</td></tr>
<tr style="background-color: lightcyan;"><td class="b">小田原</td><td class="b">快速</td><td class="b">19:25</td></tr>
</table>

行先列車種別発車時刻
小田原普通19:00
熱海普通19:10
平塚普通19:16
小田原快速19:25

 

このページの先頭へ戻る