HTMLのテーブルを使いメニュー表などを作成し見やすくする

2018 8/15

2018.08.15

HTMLにはテーブルというものがあります。

テーブルを使うとメニュー表などの表で作成するものが簡単に綺麗に整理して表示することが出来ます。

これを使うことにより、サイトが見やすくなりSEOや成約で有利になります。

テーブルとは

テーブルとは、上の画像のような表形式で表示する方法を言います。

縦方向の青の部分を、列もしくはcolumn(カラム)と言います。

横方向の赤の部分を、行またはrow(ロー)と言います。ローはレコードとも言ったりします。

そして1つ1つの四角く区切られた部分をセルと言います。

テーブルを作成するHTMLの書き方(基礎)

<table>
  <tr>
    <th>名前</th>
    <th>値段</th>
    <th>色</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>150円</td>
    <td>赤</td>
  </tr>
  <tr>
    <td>みかん</td>
    <td>100円</td>
    <td>オレンジ</td>
  </tr>
  <tr>
    <td>バナナ</td>
    <td>120円</td>
    <td>黄色</td>
  </tr>
</table>

テーブルはこのように書きます。

タグの解説は次に説明します。

テーブルに使うタグの解説

tableタグ

表を定義するためのタグです。

このタグの中で1つの表が完結します。

trタグ

表の行がどこまでかを定義するためのタグです。

tableタグの次に書き、行の数だけ定義します。

tdタグ

表のセルを定義するタグです。

trタグの中に書き、セルの数だけ定義します。

thタグ

thタグは、tdタグと同じように使いますが、ヘッダーにのみ使います。

これを使うことでヘッダーかどうかを判別することができます。

テーブルにCSSをあてる

HTMLだけでは線も色も初期状態のままです。

これに装飾することでもっと少し見やすくなります。

table {
  border-collapse: collapse;
  width: 100%;
}

table,
td,
th {
  border: 1px solid #AAAAAA;
  font-size: 16px;
}
td,
th {
  padding: 10px;
}
th {
  background-color: rgba(0,0,0,0.1);
}

表の線を描く

table,
td,
th {
  border: 1px solid #AAAAAA;
  font-size: 16px;
}

まずは表のように見せるために縦横の線を足します。

このとき、td と th だけでなく table にも線をつけていますが、無くても表のような線はできます。

でも table も含めて線の設定をするほうが便利な場面が多いのでおすすめします。

tr には線は不要です。

border プロパティはテーブルやブロック要素に線を引くためのプロパティです。

値の 1px solid #AAAAAA は、solid は実線のことで、#AAAAAA は薄いグレーの色を表します。

つまり、1pxの太さの実線で色はグレーってことになります。

この順番はバラバラでも自動的に読み取ってくれます。

[btn class=”simple”]表を追加したサンプル画面はこちら[/btn]

線の隙間を埋める

table {
  border-collapse: collapse;
  width: 100%;
}

border-collapse はテーブル内の線の隙間を空けるかどうかの設定が出来るプロパティです。

初期状態では値に separate が設定されており、これは隙間を空けて表示する値になります。

これを collapse にすると隙間がなくなります。

ちなみに初期状態では下の画像のようになります。

[btn class=”simple”]表を追加したサンプル画面はこちら[/btn]

ヘッダーカラムに色をつける

th {
  background-color: rgba(0,0,0,0.1);
}

ヘッダーカラムの背景の色を変えたほうが見やすいので変えてみました。

ただ、せっかくなので rgba を使った色の指定の仕方を紹介します。

rgba は、RGBAカラーモデルというもので色を指定します。

rgba() の () 内は , で4つの値を指定できます。

最初の3つは0-255までの数値を指定し色を確定し、最後の数値は0～1を小数で指定することで色の透過を指定できます。

色を透過させて背景を見えるようにしたい場合にこの方法を使います。（今回は特に使う必要はありませんでした）

ちなみに#FFFFFF などの色の指定の仕方も、16進数で2桁ずつにわけると 16×16=256 となりますので基本は同じです。

[btn class=”simple”]表を追加したサンプル画面はこちら[/btn]

テーブルの結合

<table>
  <tr>
    <th>名前</th>
    <th>値段</th>
    <th>色</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>150円</td>
    <td>赤</td>
  </tr>
  <tr>
    <td>みかん</td>
    <td>100円</td>
    <td>オレンジ</td>
  </tr>
  <tr>
    <td>バナナ</td>
    <td>120円</td>
    <td rowspan="2">黄色</td>
  </tr>
  <tr>
    <td>レモン</td>
    <td>80円</td>
  </tr>
</table>

セルを結合するのはHTMLだけで出来ます。

上のHTMLを表示すると下の画像のようになります。