tableダグ/表(テーブル)の挿入

<table>タグは表を示します。

説明

 <table>タグの中に以下を記述する事で表を形成します。

<caption>タグ
 表の題
<tr>タグ
 表の行
<th>タグ
 表のヘッダ
<td>タグ
 表のデータ

 それぞれのタグは表の中で以下のように表示されます。

表中の各タグの表示例

 上記の表は以下のように<table>タグで全体を囲い、<tr>タグの中に複数の<th>タグや<td>タグを記述する事で1行の中に複数のヘッダやデータを表示します。太字で示した範囲が1行になります。

 再度<tr>タグを使うと2行目が作成されます。

<table>
<caption>【お奨めキャンプ商品】</caption>
<tr>
<th>製品</th>
<th>A社製</th>
<th>B社製</th>
<th>C社製</th>
</tr>
<tr>
<td>テント</td>
<td>Aテント</td>
<td>Bテント</td>
<td>Cテント</td>
</tr>
<tr>
<td>ランタン</td>
<td>Aランタン</td>
<td>Bランタン</td>
<td>Cランタン</td>
</tr>
</table>

 但し、デフォルトでは罫線も付かずに表示されてしまいます。オプションやCSS等を活用する事で分かり易い表にする事も出来ます。

構文

 <table>タグはHTMLボディー内に記述します。構文は以下の通りです。

<table border="外側の枠の太さ" cellpadding="内側の余白" cellspacing="セルとセルの間隔" width="表の幅">
caption、tr、th、td等を記述
</table>

 それぞれのオプションの意味は以下の通りです。

【tableタグのオプションの意味】
オプション 指定方法 説明
border 数字(ピクセル) 表の外側の枠の太さを指定します。
cellpadding 数字(ピクセル) セルの内側の余白を示します。
cellspacing 数字(ピクセル) セルとセルの間の間隔を指定します。セル間は2重線で区切られ、この値が大きい程間隔が広くなります。0を指定すると線は1つになります。
width 数字(ピクセル)、又は数字% 表の幅を指定します。%で記述すると表示出来る幅に対する割合になり、100%指定では幅一杯に取ります。

利用例

 オプションを指定せずに使った時の例は以下の通りです。

<table>
<caption>【表の題です】</caption>
<tr>
<th>thはヘッダを示し、センタリングされます。</th>
<td>tdはデータを示し、センタリングされません。</td>
</tr>
<tr>
<th>trを追加すると行を追加出来ます。</th>
<td>3列等複数列も可能です。</td>
</tr>
</table>

 上記を表示すると以下になりますが、罫線が表示されず、表には見えません。

【表の題です】
thはヘッダを示し、センタリングされます。 tdはデータを示し、センタリングされません。
trを追加すると行を追加出来ます。 3列等複数列も可能です。

罫線の表示方法

 オプションを使った場合の利用例は以下の通りです。

<table border="5" cellpadding="10" cellspacing="5" width="95%">
<caption>【表の題です】</caption>
<tr>
<th>thはヘッダを示し、センタリングされます。</th>
<td>tdはデータを示し、センタリングされません。</td>
</tr>
<tr>
<th>trを追加すると行を追加出来ます。</th>
<td>3列等複数列も可能です。</td>
</tr>
</table>

 上記ではborderを5、cellpaddingを10、cellspacingを5、widthを95%に指定しており、枠が5px、内側の余白を10px、セルの間隔を5px、横幅を取れる幅の95%に指定しています。上記を表示すると以下になります。

【表の題です】
thはヘッダを示し、センタリングされます。 tdはデータを示し、センタリングされません。
trを追加すると行を追加出来ます。 3列等複数列も可能です。

ディスプレイ

 <table>タグで囲むとブロックボックスを示すため、タグの開始時と終了時に改行されます。

関連ページ

・ホームページ作成「表の挿入

 単純な表の挿入方法から罫線や幅の指定、セルの結合、CSSも活用したセンタリング方法、色の変更方法、表毎にスタイルを変える方法等を説明しています。

検索付「HTMLタグ早見表」に戻る

スマホ向け「HTMLタグ一覧」に戻る

  • このエントリーをはてなブックマークに追加