表を作るための「table要素」、「tr要素」、「th要素」、「td要素」

数字のデータや用語などをまとめるときに、表を使って説明することがあります。HTMLでは、「table要素」を使ってマークアップしていきます。また、CSSが普及する前までは、table要素を使ってWebページのレイアウトが行われていました。

これは、table要素の本来の目的では無いですが、tableレイアウトとして主流だった時代があります。現在だと、div要素を使ってグループ化するレイアウトが主流ですから、table要素をレイアウトには使用しない方が良いでしょう。

ここでは、表を作るためのtable要素について解説します。

 

table要素の仕組みについて

tableを記述するときには、それ単体で使うことはありません。内部に、「tr要素」(行)、「th要素」(列の見出し)、「td要素」(列)などが入ります。まず、<table>~</table>という大きな箱があって、その中に<tr>~</tr>や<td>~</td>などの行や列を入れていくという形です。

<table border=”1″>
<tr>
<th>会社概要</th>
<td>サバサバ株式会社</td>
</tr>
<tr>
<th>所在地</th>
<td>東京都港区芝公園</td>
</tr>
<tr>
<th>代表者</th>
<td>山田太郎</td>
</tr>
</table>

tableタグでマークアップすると、以下のような表示となります。

table

th要素(列の見出し)でマークアップされた箇所は、デフォルトだと太字で表示されます。枠線や余白の広さなどは、CSSで指定するのが一般的です。

そして、行や列を結合したい場合には、th要素やtd要素に「colspan属性」や「rowspan属性」を追加します。「colspan属性」は水平方向の行を結合し、「rowspan属性」は垂直方向の列を結合するときに使用します。それぞれの値に、結合させたい数を入力すれば、その分だけ結合されます。

<table border=”1″>
<tr>
<th colspan=”2″>会社概要</th>
</tr>
<tr>
<td colspan=”2″>サバサバ株式会社</td>
</tr>
<tr>
<th rowspan=”2″>代表者</th>
<td>山田太郎</td>
</tr>
<tr>
<td>山田花子</td>
</tr>
</table>

行や列を結合させると、ソースが複雑になりますから注意しましょう。

ketugou

 

table要素に付加情報を加える

表を作成したら、そのタイトルや説明文を付けることができます。表の目的や構造を示したいときには、「summary属性」を追加しましょう。<table summary=”会社概要”>などとすれば、どういった目的の表なのかを示すことが出来ます。ただし、ブラウザには表示されず、コンピュータに伝えたい場合に使用するものです。

目に見える形で表の説明文を入れたいなら、「caption要素」を使用しましょう。<caption>表のタイトル</caption>とすることで、表にタイトルや説明文を追加できます。これらは必須ではありませんから、状況に合わせて追加してください。

 

以上、table要素について解説をしました。情報をキレイにまとめるために、table要素は利用価値が高いです。ですから、上手く使いこなせるようにしましょう。

サブコンテンツ

このページの先頭へ