MENU
技能検定AI対策

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

Webサイト制作 ホームページ中級講座
目次

Table要素を使って表組み作成

ホームページ内で表組みを作成する際は、HTMLの<table>要素を使用します。かつては「テーブルレイアウト」と呼ばれる手法でWebページ全体のレイアウトに使用されていましたが、現在では表組み（データ表）の作成以外には使われません。
また、レスポンシブ対応が必要な現代のWebデザインでは、スマートフォンなど小さな画面での閲覧時に列数の多い表が見づらくなる問題があります。そのため、列の数を適切に減らす工夫も重要です。

表組み作成のHTMLコード例

以下は、5行4列の表を作成する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>
</body>
</html>

出来上がったHTMLファイルをプレビューすると下記のように線の入っていない状態がデフォルトです。

CSSを使った表のスタイリング

表の線や余白を整えるために、CSSでスタイルを設定します。この例では、HTMLファイル内の<style>タグを使用して内部スタイルシートを記述していますが、外部スタイルシートを利用しても問題ありません。

<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>

border-collapse: collapse;

border-collapse: collapse;は、テーブルのセル間の線を重ねて、隙間が生じないようにします。これを指定しない場合、セル間に余白が表示されてしまいます。このプロパティを設定すると、以下のようにセル間の境界線が1本に見えるようになります

列の多い表組をスマホ対応させる方法

列の多い表組は、スマートフォンや小さな画面ではすべての内容を表示しきれず、デザインが崩れることがあります。そのために、CSSで「横スクロール」を設定します。

HTMLコード例

以下は列の多い表を想定したHTMLコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>スマホ対応の表組</title>
    <style>
        /* CSSコードは後述 */
    </style>
</head>
<body>
    <h1>列の多い表組を横スクロールで対応</h1>
    <div class="table-container">
        <table>
            <tr>
                <th>項目A</th>
                <th>項目B</th>
                <th>項目C</th>
                <th>項目D</th>
                <th>項目E</th>
                <th>項目F</th>
                <th>項目G</th>
            </tr>
            <tr>
                <td>データ1</td>
                <td>データ2</td>
                <td>データ3</td>
                <td>データ4</td>
                <td>データ5</td>
                <td>データ6</td>
                <td>データ7</td>
            </tr>
            <tr>
                <td>データ8</td>
                <td>データ9</td>
                <td>データ10</td>
                <td>データ11</td>
                <td>データ12</td>
                <td>データ13</td>
                <td>データ14</td>
            </tr>
        </table>
    </div>
</body>
</html>

/* テーブル全体をスクロール可能にする */
.table-container {
    overflow-x: auto; /* 横スクロールを許可 */
    margin: 1em 0; /* テーブル周囲に余白を設定 */
    border: 1px solid #ccc; /* コンテナに枠線を追加 */
    padding: 0.5em; /* スクロール時の見た目を整える */
}

/* テーブルのデザイン */
table {
    border-collapse: collapse; /* セルの余白を消す */
    width: 100%; /* テーブルを親要素内で収める */
    min-width: 800px; /* 横スクロール対応のため最低幅を設定 */
}

/* セルのスタイル */
th, td {
    border: 1px solid #ddd; /* セルの枠線 */
    padding: 8px; /* セル内の余白 */
    text-align: left; /* テキストを左揃え */
}

/* ヘッダーのスタイル */
th {
    background-color: #f4f4f4; /* ヘッダーの背景色 */
    font-weight: bold; /* ヘッダーを強調 */
}
  1. overflow-x: auto;
    • このプロパティを<div>要素に設定すると、テーブルがコンテナの幅を超えた場合に横スクロールが表示されます。
    • ユーザーがスクロールして表全体を確認できるようになります。
  2. min-width
    • テーブル全体に最小幅（min-width: 800pxなど）を設定することで、列が圧縮されすぎて内容が見づらくなるのを防ぎます。
  3. border-collapse: collapse;
    • テーブルのセル間に余白が生じないように設定します。
  4. スマートフォン対応
    • meta name="viewport"を設定することで、デバイスに応じて画面が自動的に調整されるようになります。
  5. 余白と枠線
    • marginやborderを使って、テーブルの周りに余白と視覚的な枠線を追加しています。
Webサイト制作 ホームページ中級講座
CSS CSS3 HTML HTML5 Table youtube コード模写 テーブル 動画 模写コーディング

この記事が気に入ったら
フォローしてね！

Follow Me
  • URLをコピーしました！
目次