【HTML】WEBデザイン初心者必見！TABLEの全てをマスターしよう

5月 6, 2022 5月 26, 2022

こた

こんにちは！WEBデザイナーのこたです。

WEBデザインを勉強中のあなたに伝えたいことがあります。

「TABLE」はちゃんと覚えておくと楽になる！です。

これはWEBデザインを6年やってきましたが、どの案件でもTABLEを使いました。

なぜなら、表を使って表現することがユーザーにとって一番見やすく、分かりやすいからです。

おそらくこの先もTABLEタグはなくならないですし、必須だと思います。

WEBデザイン初心者の方にはぜひTABLEをすぐに使えるように覚えておいてほしく、今回この記事を書きました。

では、さっそく参りましょう！

テーブルタグの基礎

テーブルのHTMLマークアップには決まったパターンがあります。なので、そのパターンを覚えてしまえば、どんなテーブルも簡単につくることができます。

<table>
<tr>
<th>見出しセル</th>
<td>テキストセル</td>
</tr>
</table>

全体を<table>タグで囲みます。さらに、テーブル行を<tr>で囲み、その中に必要な数だけテーブルセル<td>を挿入します。

テーブルに「見出しセル」を作りたい時は<td>タグの代わりに、<th>タグを使用します。

テーブルに使用するCSS

テーブルはCSSを適用しないと枠線などのデザインが適用されません。

せめて枠線くらいは欲しいですよね。

なので、テーブルを使用するときにほぼほぼ使用するのが「border」プロパティです。

ここで使用する「border」プロパティは2つあります。

要素のボックスにボーダーを引く

border: 1px(太さ)  1px(形状) #333(色);

枠線を引くプロパティは「border」になります。太さ、形状、色を設定することで、要素のボックスにボーダーによる枠線を引くことができます。

セルとセルの間の枠線を1本にする

border-collpase: collapse;

「border-collpase」プロパティはセルとセルの間の枠線を1本にするか、それともセルごとにボーダーラインを引くかを決めることができます。

ほとんどの場合は枠線を１本にするので「collapse」を覚えておくといいでしょう！

1本の場合

border-collpase: collapse;

セルごとにボーダーラインを引く場合

border-collpase: separate;

セルを横方向に結合したい場合

ターブルタグではテーブルの最初にタイトルとして結合したい場面が多くあります。

そこで必要なのは「colspan」属性を<th> タグに入れることです。

「colspan」属性の値には、結合するセルの数を指定します。

注意点としては、結合した際は、その分セルを減らさないとセルの数が合わなくなるので、気をつけましょう。

<table>
<tr>
<th colspan="2">見出しセル</th>
<th>見出しセル</th>
</tr>
<tr>
<td>テキストセル</td>
<td>テキストセル</td>
<td>テキストセル</td>
</tr>
</table>

セルを縦方向に結合したい場合

<td>タグ、または<th>タグに「rowspan」属性を追加すると、セルを縦方向に結合することができます。

<table>
 <tr> 
<th colspan="2">見出しセル</th> 
<th>見出しセル</th> 
</tr> 
<tr> 
<th rowspan="6">見出しセル</th> 
<td>テキストセル</td> 
<td>テキストセル</td> 
</tr> 
<tr> 
<th rowspan="2">見出しセル</th> 
<td>テキストセル</td> 
<td>テキストセル</td> 
</tr> 
</table>

テーブル行をヘッダー、ボディ、フッターに分ける場合

テーブルのヘッダー行を<thead>

ボディ行を<tbody>

フッター行を<tfoot>

ヘッダー行やフッター行にだけ背景色をつけたり、ボディ行だけ枠線を変えたりしたいときに、これらのタグを使用していると簡単になります。

<table>
<thead>
<tr>
<th colspan="2">見出しセル</th> 
<th>見出しセル</th> 
</tr> 
</thead>
<tbody>
<tr> 
<td>テキストセル</td> 
<td>テキストセル</td> 
<td>テキストセル</td> 
</tr> 
</tbody>
<tfoot>
<tr> 
<td>テキストセル</td> 
<td>テキストセル</td> 
<td>テキストセル</td> 
</tr>
</tfoot>
</table>

thead tr{
background:#333;
color:#fff;
}

テーブルにキャプションをつける

<caption>タグはテーブルのキャプションをつけるときに使用します。

<table>タグの開始すぐに書きましょう。

キャプションとは、主に図版や写真について説明のために付け加えられた文字情報のことです。

<table>
<caption>キャプションのテキスト</caption> 
<thead> 
<tr> 
<th colspan="2">見出しセル</th>
<th>見出しセル</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>テキストセル</td> 
<td>テキストセル</td> 
<td>テキストセル</td> 
</tr> 
</tbody> 
<tfoot> 
<tr> 
<td>テキストセル</td> 
<td>テキストセル</td> 
<td>テキストセル</td> 
</tr> 
</tfoot> 
</table>