【HTML】【table】表の作り方

【HTML】
表の作り方(「table」タグ)

「HTML&CSS」の表を作るための「table」関連のタグの使い方。

INDEX

「Table（表）」関連タグ一覧

「table」	「table」タグ、「tr」タグ、「th」タグ、「td」タグと組み合わせてテーブル（表）を作成。
「tr」	「table」タグ、「tr」タグ、「th」タグ、「td」タグと組み合わせてテーブル（表）を作成。
「th」	「table」タグ、「tr」タグ、「th」タグ、「td」タグと組み合わせてテーブル（表）を作成。「th」は Table Header の略。テーブルのヘッダ部分のセルの内容を記述。多くのブラウザでは、文字が太字の中央表示となる。
「td」	「table」タグ、「tr」タグ、「th」タグ、「td」タグと組み合わせてテーブル（表）を作成します。
「caption」	テーブルの見出しを記述するために用います。「table」タグの直後に一回だけ記述可能。
「thead」	テーブルの行を、ヘッダ行、フッタ行、ボディ行に明示的に分けることに使用。
「tbody」	ボディ行を記述。テーブルの行を、ヘッダ行、フッタ行、ボディ行に明示的に分けることに使用。
「tfoot」	テーブルの行を、ヘッダ行、フッタ行、ボディ行に明示的に分けることに使用。
「colgroup」	テーブルのカラム（列）グループに対して、横幅や右寄せ、左寄せなどの指定。 colgroupでカラムグループの設定、col で個々の設定をする。
「col」	テーブルのカラム（列）に関する指定。

Back

「table」タグの使い方（表の作り方）

表は、「table」関連のHTMLタグを使って作成する。
色々な機能をつけた表を作成すると色々な関連タグを使用するようになるが、表だけを作るには、
・「table」
・「tr」
・「td」
の少ないタグで作成できる。
ただシンプルで味気ないので、好みの表を作成するには、「table」関連タグを使って、色々と機能を加えていく必要がある。

最低限の表作成HTMLコード

下記の表HTMLコードは、
・「table」
・「tr」
・「th」
・「td」
だけで作成したシンプルな表のサンプルコード

<table>
<tr>
<th>Header</th>
<th>Header</th>
</tr>
<tr>
<td>Sample</td>
<td>Sample</td>
</tr>
</table>

出力結果

Header	Header
Sample	Sample

表のサイズや背景・枠線などを全く指定していない。
ここから表に色々なレイアウトデザインを加える。

表のサンプルHTMLコード

表テーブルに色々なタグ・要素を加えると、少し豪華な表になる。
CSSを使って、見やすい視認性の良いレイアウトデザインを加えて完成となる。

<table border=1 style="border-collapse:collapse;">
<caption>【表の例】</caption>
<colgroup bgcolor="#ffcccc" width=150 align="center">
</colgroup>
<colgroup>
<col span=1 width=100 align="center">
<col span=2 width=100 align="right">
</colgroup>
<thead style="background-color:#9999ff;">
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sample</td>
<td>Sample</td>
<td>Sample</td>
<td>Sample</td>
</tr>
<tr>
<td>Sample</td>
<td>Sample</td>
<td>Sample</td>
<td>Sample</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Footer</th>
<td><br/></td>
<td><br/></td>
<td>Footer</td>
</tr>
</tfoot>
</table>

出力結果

【表の例】
Header	Header	Header	Header
Sample	Sample	Sample	Sample
Sample	Sample	Sample	Sample
Footer			Footer

Back

テーブル（表）のCSS設定

「Table]関連のCSSプロパティ

属性名	説明
caption-side	テーブルのキャプション表示位置を指定
table-layout	テーブルのレイアウト方式を指定
border-collapse	隣り合ったテーブルセルの枠線の描画方法を指定
border-spacing	隣り合ったテーブルセルの枠線間の距離を指定。border-collapse:separate が指定時のみ有効。
empty-cells	空セルを表示するか指定。

caption-sideの値一覧

top	上部に表示。
bottom	下部に表示。

table-layoutの値一覧

auto	各列横幅を最適に表示。
fixed	テーブル1行目を読み込み時、各列の横幅を算出。以後、その横幅を維持。長いテーブルの表示速度が改善。

border-collapseの値一覧

collapse	表の枠線を重なり合わせて表示。
separate	表の枠線を離して表示。隙間の間隔は border-spacing で調節。

border-spacingの値一覧

length

セル枠線間の距離を指定。

empty-cellsの値一覧

show	表示。
hide	表示しない。

記述例：

caption-side: top;
caption-side: bottom;

table-layout: fixed;

border-collapse: collapse;
border-collapse: separate;

border-spacing: 10px;

Back

表の枠間の隙間をなくす方法

デフォルトで、表に線を入れると、各枠の間に隙間ができていて、２重線になってしまいます。
CSSで設定をすれば、各枠の間をなくして、シンプルな１本線枠の表にすることができます。
設定は簡単で、下記のCSSを「table」タグに設定するだけ。

border-collapse:collapse;

「border-collapse:collapse」を未設定の表

「border-collapse:collapse」を設定した表

Back

Table関連タグの属性

【一般属性】	意味	使用可能タグ
id=id	ID を指定	「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
class=class	クラスを指定します。	「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
style=style	スタイルシートを指定	「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
title=title	タイトルを指定。	「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
dir=dir	文字の表示方向を指定。	「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
lang=lang	言語を指定。	「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
accesskey=key	アクセスキーを指定。	「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
tabindex=n	タブインデックスを指定。	「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
contenteditable=bool	要素を編集可能にする。	「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
contextmenu=id	コンテキストメニューを指定。	「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
draggable=bool	ドラッグを可能にする。	「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
dropzone=value	ドロップを可能にする。	「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
hidden	要素を非表示にする。	「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
spellcheck=bool	スペルをチェックする。	「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
IE拡張属性	他にもIEで拡張された属性が指定可能。	「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
【ボーダー関連属性】	意味	使用可能タグ
border=n	枠線の太さを指定。0を指定すると枠線表示なし。HTML5 では 1 のみ指定可能で、太さはスタイルシートを用いる。	「table」
bordercolor=color	枠線の色を指定します。	「tr」,「td」,「th」
bordercolordark=color	立体的な枠線の暗い部分の色を指定します。	「tr」,「td」,「th」
bordercolorlight=color	立体的な枠線の明るい部分の色を指定します。	「tr」,「td」,「th」
frame=frame	各セルの上下左右の枠線について、表示する/しないを制御。HTML5 では廃止予定。　　void：表示しない。（既定値）　　above：上側のみ。　　below：下側のみ。　　hsides：上下のみ。　　vsides：左右のみ。　　lhs：左側（Left Hand Side）のみ。　　rhs：右側（Right Hand Side）のみ。　　box：上下左右。　　border：上下左右。	「table」
rules=rules	テーブルの内側の枠線を表示するルールを指定。HTML5 では廃止予定。　　none：表示しない。　　groups：<thead>, <tbody>, <tfoot> で指定したグループの境界のみ。　　rows：横方向のみ。　　cols：縦方向のみ。　　all：すべて。（既定値）	「table」
【背景関連属性】	意味	使用可能タグ
background=url	背景画像を指定します。	「table」,「tr」,「th」,「td」
bgcolor=color	背景色を指定します。	「table」,「tr」,「th」,「td」,「tbody」
【配置関連属性】	意味	使用可能タグ
align=align 　　center：中央表示　　char：指定文字揃え　　justify：均等割付　　left：左寄せ　　right：右寄せ	セル内データの横方向の配置を指定。HTML5 では廃止予定。	「caption」,「tr」,「td」,「th」,「tbody」,「thead」,「tfoot」
valign=valign 　　baseline：ベースライン揃え　　bottom：下揃え　　center：中央揃え　　middle：中央揃え　　top：上揃え	セル内データの縦方向の配置を指定。HTML5 では廃止予定。	「caption」,「tr」,「td」,「th」,「tbody」,「thead」,「tfoot」
cellpadding=n	枠線とセルの内容の間の隙間をピクセル単位で指定。	「table」
cellspacing=n	内枠の太さを指定します。0 を指定すると、立体感の無い枠線を表示する。	「table」
hspace=n	テーブルの周りの横方向の余白をピクセル単位で指定。	「table」
vspace=n	テーブルの周りの縦方向の余白をピクセル単位で指定。	「table」
height=n	セルの高さを 300px、または 50% で指定。HTML5 では廃止予定。	「table」,「tr」,「td」,「th」
width=n	セルの横幅を 300px、または 50%で指定。HTML5 では廃止予定。	「table」,「td」,「th」
nowrap	セル内データが自動改行されないようにします。HTML5 では廃止予定です。	「td」,「th」
char=char	位置揃えする文字を指定。HTML5 では廃止予定	「tr」,「td」,「th」,「tbody」,「thead」,「tfoot」
charoff=n	char 属性で指定した文字を、セルの左端からどのくらいの位置に表示するかのオフセットを指定。HTML5 では廃止予定。	「tr」,「td」,「th」,「tbody」,「thead」,「tfoot」
【セル連結関連属性】	意味	使用可能タグ
colspan=n	セルを n個、横方向に連結	「td」,「th」
rowspan=n	セルを n個、縦方向に連結	「td」,「th」
【その他】	意味	使用可能タグ
cols=n	列数を指定。この属性を指定により、テーブル表示速度が若干速くなるケースもある。	「table」
datapagesize=size	データバインド機能を用いる際の、レコード数を指定。	「table」
datasrc=datasrc	データバインド機能を用いる際の、データソースの ID を指定。	「table」
summary=summary	音声読み上げブラウザなどのために、この表の目的や構成の説明を記述。HTML5 では廃止予定。	「table」
abbr=abbr	主に「th」タグで使用。セルの内容の省略情報を記述。音声ブラウザがセルの概略を読み上げるのに役立つ。HTML5 では廃止予定	「td」,「th」
axis=axis	多次元配列データのための軸情報などを記述。HTML5 では廃止予定	「td」,「th」
headers=headers	このセルに対応する見出しセルのリストを、id 属性で指定	「td」,「th」
scope=scope	見出しセルに対して指定。row はその見出しが列方向に対する見出しであること、col はその見出しが行方向に対する見出しであることを示します。HTML5 では廃止予定	「td」,「th」

Back