テーブルを学ぶ

表を作る

HTMLでは、「表」のことを「テーブル」といいます。テーブルを作成するには、<table>タグを使用します。テーブルの行の定義は、<tr>で記述しさらに一行の間に含まれる「列」を<td>または<th>で定義します。

上記の図を見てください。なんだか「マンション」あるいは「ビル」のようです。2階建の建物にそれぞれ、3つの世帯が暮らしていると仮説して見てください。同じ階にある3世帯をそれそれ<td>で定義し、各々を「セル」といいます。セルの中には、テキストや画像などを入れることができます。

初期設定では、テーブルにボーダー(ライン線)が出ないので、一時的にボーダーを出しておきましょう。(スタイルシートが組み込まれている場合は、CSSでスタイリングします。)

0.1 練習問題(表を作ろう)

<th>は、太字でセルの中央に配置される特徴があります。

<table border="1">
<tr><th>男子</th><th>女子</th></tr>
<tr><td>20名</td><td>18名</td></tr>
</table>

0.2 練習問題 (会社概要)

コーポレートサイト(企業サイト)の「会社概要」の多くは、テーブルを使用されています。練習してみましょう。

きみの興味ある会社概要を検索してみよう。コピーペーストのショートカットは、もう慣れたかな？

見出しに関連するセル

見出しセルには、scope属性があります。見出しに関連するセルを指定することができます。

列と行

「列と行」の違いを覚えておきましょう。scope属性は、その見出しに関連するセルが同じ行にあるか列にあるかを指定します。見た目は変わりませんが、テーブルセル全体の関連性を説明するタグになります。

<!--見出しthと同じ列にあるセルが関連している--->
<table border="1">
<tr><th scope="col">会員プラン</th><th scope="col">料金</th><th scope="col">利用時間</th></tr>
<tr><td>個人</td><td>5,000円</td><td>14時まで</td></tr>
<tr><td>法人</td><td>10,000円</td><td>21時まで</td></tr>
</table>
<!--見出しthと同じ行にあるセルが関連している--->
<table border="1">
<tr><th scope="row">会員プラン</th><td><個人</td><td>法人</td></tr>
<tr><th scope="row">料金</th><td>5,000円</td><td>10,000円</td></tr>
</table>

0.3 練習問題 (属性を記述する)

同じ記述が連続して登場するコードは、素早くコピーペーストを施しスピードアップを目指しましょう。

セルを結合する

テーブルセルは、隣り合わせにある2つのセルを縦にも横にも結合することができます。

rowspan属性とcolspan属性について

テーブルタグは、少しややこしいかもしれません。結合のコツは、まず結合する前のテーブルを完成させ目視確認してから、結合し不要なセルを消していく方がいいでしょう。

0.4 練習問題 (セルの結合)

スポーツジムの初期費用と月会費が、同じ金額(1,000円)になりました。年会費は、3,000円です。

<table border="1">
<tr><th scope="row">初期費用</th><td rowspan="2">1,000円</td></tr>
<tr><th scope="row">月会費</th></tr>
<tr><th scope="row">年会費</th><td>3,000円</td></tr>
</table>

まとめ

テーブルは、コンテンツを横へ配置することができるので、レイアウトの幅が広がりますね。セルの中には、ほとんどのタグを入れることができるので、画像やリストを入れて完成させてみましょう。

05. 練習問題 (ニコニコ遊園地)

幼児と小学生が300円です。結合してみましょう。(注)画像は、imagesフォルダーへ入れセルの中に表示させるようにします。

スタイルシートの設定

border-collapse

スタイルシートを使うと、テーブルのボーダーを指定することができます。隣接するセルのボーダーを、間を空けずに重ねて表示することで、1本線になります。テーブルのボーダーは、collapse指定にしているところが多く、スタイルシートで、設定しておきましょう。

table{border-collapse:collapse;}