ホームページ中級講座 Table要素を使って表組作成

2022年8月1日2022年12月12日

URLをコピーしました！

ホームページ内で表組みを作成する場合はtable要素を使います。

ひと昔前までは、テーブルレイアウトというのを使ってレイアウトを作成している時代がありましたが、今のTable要素は、完全に表としての利用以外に使うことはありません。またレスポンシブウェブサイトの際にスマートフォンで閲覧するホームページでは、列数の多い表組の表示に困る場合もあるので、列の数は少なく考えることも多々あります。

テーブル要素の動画

まずは動画で、Table要素を使ったHTMLのマークアップを行なっています。CSSでデザインも整えていますので動画で流れを確認して模写コーディングの練習を行いましょう。

表組み作成のHTMLのコード模写

tableフォルダを作成して、index.htmlファイルを作成しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Table</title>
</head>
<body>
   <h1>Table 5行で4列の表</h1>
   
    <table>
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
        </tr>
        <tr>
            <td>10</td>
            <td>20</td>
            <td>30</td>
            <td>40</td>
        </tr>
        <tr>
            <td>50</td>
            <td>60</td>
            <td>70</td>
            <td>80</td>
        </tr>
        <tr>
            <td>90</td>
            <td>100</td>
            <td>110</td>
            <td>120</td>
        </tr>
        <tr>
            <td>130</td>
            <td>140</td>
            <td>150</td>
            <td>160</td>
        </tr>
        <tr>
            <td>170</td>
            <td>180</td>
            <td>190</td>
            <td>200</td>
        </tr>
    </table>

HTMLファイルをプレビューで確認

HTMLファイル内に下記のスタイルシートを追加

今回は、外部スタイルシートを使わず、HTML内にCSSを書いています。

<head>
    <meta charset="UTF-8">
    <title>Table</title>
    <style>
        table {
            border: 2px solid #000;
            width: 400px;
            border-collapse: collapse;
        }
        th,
        td {
            border: 1px solid #000;
            padding: 5px;
        }
        td {
            text-align: right;
        }
    </style>
</head>

table 要素にborder-collapse: collapse;

table要素に欠かせないのは、「border-collapse: collapse;」です。このプロパティの指定がないと、各セルとセルの間の余白があいてしまいます。margin:0 を入れても余白は消えません。border-collapse: collapse;は線と線を重ねるという意味合いがありますので、table要素に指定を入れて、余白があかないように設定します。