【HTML&CSS】table要素を使った表(テーブル)の作り方【初心者向け】

HTML/CSS

こんにちは。Webデザイナーのけんです。

HTMLのtable要素について、初心者の方にもわかりやすく解説していきます。

HTMLのtable要素とは?

table(テーブル)とは表のことで、その名の通り「表」を作るためのHTML要素です。

たとえば、価格表だったり、時刻表、会社概要とかですね。

いわゆる表だけでなく、お問い合わせフォームをテーブルでレイアウトしたりなど、さまざまな用途に使われています。

使いこなせるようになれば、できることが広がると思います。

tableの基本を知ろう

まずは、ざっくりtableの基本構造をつかんでみましょう。

tableの基本構造

table要素では、table、tr、th、tdなど主に4つの要素を使って作成します。

上のイラスト画像を見ながらイメージしてください。tableという全体要素の中にtrが入り、そのtrの中にthやtdが入ります。

いろいろなタグが出てきてややこしいですが、一度覚えてしまえばかんたんです。

tableで使うタグの意味

table
tableを作成する要素。
tr
table rowの略で、表の行(横の列)のこと。thやtdは必ずこのtrでかこいます。
th
table headerの略で、表の中の見出しを表します。会社概要でたとえるなら「会社名」とか「住所」とかですね。デフォルトで太字で表示されます。
td
table dataの略で、表の中のデータのこと。シンプルに表の中に記載する情報全てを指すと考えましょう。

tableの基本的な書き方

tableの基本を理解したところで、tableをHTMLコードとして書いてみましょう。

①table要素の中にtrを書く

まずは、tableタグを書き、必要な行の分だけtr要素を入れます。

行は横の列のこと。列(縦の列)と混同しないようにしましょう。

<table>
    <tr></tr>
    <tr></tr>
    <tr></tr>
</table>

tableタグの中にtrが3つありますね。このtableの場合、3行あるということになります。

②trの中にth、tdを入れ、テキストを記入

trの中に、必要な列の分だけ、th、もしくはtdを入れます。

列は縦の列のこと。

<table>
    <tr>
        <th>会社名</th>
        <td>株式会社○○</td>
    </tr>
    <tr>
        <th>住所</th>
        <td>東京都杉並区○○</td>
    </tr>
    <tr>
        <th>営業時間</th>
        <td>9:00~18:00</td>
    </tr>
</table>

それぞれtrタグの中には、th、tdが2つずつ入っていますね。つまりこの表は2列あります。

2列×3行の会社概要テーブルができました。

※わかりやすいように、CSSによってスタイル調整しています。tableの飾り付けや調整は後の章で解説します。

tableの書き方 応用編

見出し(th)を使わずにtdのみで作成

tableは、thを使わずにtdだけで作成してもOKです。

thはデフォルトで太字で表示されるなど、見出しとしての役割を最初から持っていますが、SEOとかには特に関係ないので使わなくても大丈夫です。

表によって使い分けてもいいでしょう。

<table>
    <tr>
        <td>会社名</td>
        <td>株式会社○○</td>
    </tr>
    <tr>
        <td>住所</td>
        <td>東京都杉並区○○</td>
    </tr>
    <tr>
        <td>営業時間</td>
        <td>9:00~18:00</td>
    </tr>
</table>

太字じゃないということ以外、特に見た目は変わりません。

一番上の行に見出し(th)を並べる

一番上の行に見出しを並べる場合は、最初のtrの中を全てthにしましょう。

<table>
    <tr>
        <th>アウター</th>
        <th>トップス</th>
        <th>ボトムス</th>
    </tr>
    <tr>
        <td>レザージャケット</td>
        <td>Tシャツ</td>
        <td>デニム</td>
    </tr>
    <tr>
        <td>ダウンジャケット</td>
        <td>ポロシャツ</td>
        <td>スラックス</td>
    </tr>
</table>

縦で整理されているテーブルになります。

tableを表っぽくデザインしよう

CSSでデザイン調整しなければ、前章でのコードを記述してブラウザに反映させても、ただ文字が横並びになるだけです。

CSSでスタイル調整されていないtable

これではとても表には見えないので、CSSでスタイル指定して、表っぽいデザインにしてみましょう。

以下はシンプルなデザインテンプレートです。コピペでご自由にどうぞ。

<table class="table-demo">
    <tr>
        <th>会社名</th>
        <td>株式会社○○</td>
    </tr>
    <tr>
        <th>住所</th>
        <td>東京都杉並区○○</td>
    </tr>
    <tr>
        <th>営業時間</th>
        <td>9:00~18:00</td>
    </tr>
</table>
.table-demo {
    border: 1px solid #ddd;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 2em;
}

.table-demo th,
.table-demo td {
    padding: 10px;
    border: 1px solid #ddd;
}

.table-demo th {
    background-color: #f5f5f5;
}

@media screen and (min-width: 600px) {
    .table-demo th {
        width: 20%;
    }

    .table-demo td {
        width: 80%;
    }
}

コピペしたら、ブラウザで確認してみましょう。

PC表示

バッチリ表として表示されましたね。

スマホ表示

スマホ表示でも、2列程度なら見栄えに問題ありません。3列になってくるとかなり見づらくなってくるので、1列表示にするなどレスポンシブデザインを考えた方がいいでしょう。

※上手くデザインが反映されない場合は、元々適用されているスタイルが優先されていると思います。デベロッパーツールで確認してみてください。

まとめ

  • タグは主にtable、tr、th、tdを使う
  • 行は横の列のこと
  • 列は縦の列のこと
  • thは使わなくてもOK
  • 行と列はいくつ増やしてもOK(増えすぎると見づらくなるので注意)

以上、table要素の基本的な使い方でした。

情報をきれいにまとめられるので、HTML/CSS初心者の方にとってはかなり使えるものかと思います。

ただ、あまりにテーブルが長すぎたり、複雑になってくるとかなり見づらくなります。

シンプルなテーブル作成は、自分1人でも心がけるべきですが、複数の人がコードを見る場合は特に意識した方がいいですね。