【HTML】表を使おう！

前回はリストを使ったので、今回は表を使ってみましょう。
こちらも情報が整理されて見やすくなりますよー。これは2021年3月までの国民の祝日一覧です。

国民の祝日	日付
元日	1月1日(金)
成人の日	1月11日(月)
建国記念の日	2月11日(木)
天皇誕生日	2月23日(火)
春分の日	3月20日(土)

令和になったので、天皇誕生日が2月になったんですよねー。
私は、まだまだ令和に馴染めていない気がします。

...私ごとでした。そんな話は置いておいて、今回は表を作ってみましょう！
リストの要領と同じ感じです。

表の基本

表はTABLEタグの中に、TRタグで行を生成します。
さらにそのTRタグの中に、THやTDタグによって要素1つ1つ(セル)を生成する感じになります。
リストと比べると、さらに囲む内容が1つ増えたって感じですね。

ごちゃごちゃ言ってもわかりにくいので、サンプルを見てみましょう。

HTML

<table>
  <tr>
    <th style="width: 20em;">国民の祝日</th><th style="width: 20em;">日付</th>
  </tr>
  <tr>
    <td>元日</td><td>1月1日(金)</td>
  </tr>
</table>

Result

国民の祝日	日付
元日	1月1日(金)

冒頭で示した表よりもシンプルにしてみました。中身を見てみましょう。
まずはTABLEタグで囲まれているのがわかると思います。
次にTRタグで1行1行囲まれているのがわかるでしょうか？

TRタグの中身を見てみましょう。
THタグで囲まれている行とTDタグで囲まれている行があります。
どちらも1つ1つ要素を表しているのですが、以下のように役割が少し違います。

THタグ・・・表の「見出し」を表します
TDタグ・・・表の「要素」を表します

このようになっているので、見出しの行のTRタグの中はTHタグを、
見出し以外の要素の行には、TRタグの中はTDタグが原則って感じですかね。
途中の行にTHタグの構成を入れても問題はないと思いますが、型破りであまり良くないかもですね。

ちなみにTHタグのstyle属性は、列の長さを指定しています。
「width: 20em;」は20文字入る程度の幅にしてねって感じです。

要素(セル)を結合する

セルを結合してみましょう。この表を参考に説明します。

国民の祝日	日付
成人の日	1月11日(月)
ここを潰して上と結合したい！！	1月第2月曜日

列(上下)の結合を行うにはTH・TDタグに対して「rowspan」属性を利用します。
「rowspan」を指定したTH・TDタグの下に対して結合していきます。

HTML

<td rowspan="2">成人の日</td>

このように書くと、「成人の日」のセルの1つ下と結合します。
「rowspan」属性には、自分も含めていくつのセルと結合するかを指定 する感じになります。
ダブルクオーテーション(")を忘れずに！

HTML

<table>
  <tr>
    <th style="width: 20em;">国民の祝日</th><th style="width: 20em;">日付</th>
  </tr>
  <tr>
    <td rowspan="2">成人の日</td><td>1月11日(月)</td>
  </tr>
  <tr>
    <td>1月第2月曜日</td>
  </tr>
</table>

Result

国民の祝日	日付
成人の日	1月11日(月)
成人の日	1月第2月曜日

うまくいきましたね！ここで注目するのは、結合されたセルです。
「成人の日」の下のTRタグにはTDタグによる要素が1つしかありません。

よくある間違い(？)

結合によって不要になったTH・TDタグは削除する必要があります。

私も結合時に忘れがちになるので、TH・TDタグは削除しておきましょう。

行で結合したい場合は「colspan」を利用 します。
使い方は同じです。

HTML

<table>
    <tr>
        <th style="width: 20em;">国民の祝日</th><th style="width: 20em;">日付</th>
    </tr>
    <tr>
        <td style="text-align: center;" colspan="2">6月には祝日がない！なんでや！</td>
    </tr>
</table>

Result

国民の祝日	日付
6月には祝日がない！なんでや！

Excelから変換する

いままでやってきてわかると思いますが、非常に面倒ですｗ
Excelで作った表をHTMLに自動変換してくれるサイトがあるそうです。こちらもどうぞー
時間がなくて、私はまだ触れていませんが非常に便利そうです！

ExcelからHTMLテーブルタグ変換 (外部サイト)

ちょっとおしゃれな(？)表に

CSSを利用すると、冒頭のような行の背景色をたがい違いにした表にすることも簡単にできます。
とりあえずコードを貼っときますね。CSSとHTML両方です。

CSS

.sample-table{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 1em 0;
}
.sample-table tr th{
  padding: 5px;
  color: #fff;
  background-color: #888;
  border-width: 2px;
  border-color: #fff;
}
.sample-table tr td{
  padding: 3px 10px;
  border-width: 2px;
  border-color: #fff;
  text-align: center;
}
.sample-table tr:nth-child(2n+1){
  background-color: #f6f6f6
}
.sample-table tr:nth-child(2n){
  background-color: #e6e6e6
}

HTML

<table class="sample-table">
    <tr>
<th style="width: 20em;">国民の祝日</th><th style="width: 20em;">日付</th>
    </tr><tr>
<td>元日</td><td>1月1日(金)</td>
    </tr><tr>
<td>成人の日</td><td>1月11日(月)</td>
    </tr>
</table>