Tables

HTML

表を作成する

基本的なテーブル

シンプルな表の作成

基本のテーブル構造

<!-- シンプルなテーブル -->
<table>
    <tr>
        <th>名前</th>
        <th>年齢</th>
        <th>職業</th>
    </tr>
    <tr>
        <td>田中太郎</td>
        <td>25</td>
        <td>エンジニア</td>
    </tr>
    <tr>
        <td>佐藤花子</td>
        <td>30</td>
        <td>デザイナー</td>
    </tr>
    <tr>
        <td>鈴木一郎</td>
        <td>28</td>
        <td>マーケター</td>
    </tr>
</table>

ヘッダー、ボディ、フッター

<table>
    <thead>
        <tr>
            <th>商品名</th>
            <th>数量</th>
            <th>単価</th>
            <th>小計</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>ノートPC</td>
            <td>2</td>
            <td>¥100,000</td>
            <td>¥200,000</td>
        </tr>
        <tr>
            <td>マウス</td>
            <td>5</td>
            <td>¥2,000</td>
            <td>¥10,000</td>
        </tr>
        <tr>
            <td>キーボード</td>
            <td>3</td>
            <td>¥5,000</td>
            <td>¥15,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">合計</td>
            <td><strong>¥225,000</strong></td>
        </tr>
    </tfoot>
</table>

テーブルのスタイリング

見やすい表のデザイン

スタイル付きテーブル

<table class="data-table">
    <thead>
        <tr>
            <th>ID</th>
            <th>ユーザー名</th>
            <th>メール</th>
            <th>ステータス</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td>
            <td>田中太郎</td>
            <td>tanaka@example.com</td>
            <td><span class="status active">アクティブ</span></td>
        </tr>
        <tr>
            <td>002</td>
            <td>佐藤花子</td>
            <td>sato@example.com</td>
            <td><span class="status inactive">非アクティブ</span></td>
        </tr>
        <tr>
            <td>003</td>
            <td>鈴木一郎</td>
            <td>suzuki@example.com</td>
            <td><span class="status active">アクティブ</span></td>
        </tr>
    </tbody>
</table>

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.data-table th,
.data-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

.data-table thead {
    background: #f5f5f5;
}

.data-table th {
    font-weight: 600;
    color: #333;
}

.data-table tbody tr:hover {
    background: #f9f9f9;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.status {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
}

.status.active {
    background: #d4edda;
    color: #155724;
}

.status.inactive {
    background: #f8d7da;
    color: #721c24;
}

ストライプテーブル

<table class="striped-table">
    <thead>
        <tr>
            <th>日付</th>
            <th>カテゴリ</th>
            <th>説明</th>
            <th>金額</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2025-01-01</td>
            <td>食費</td>
            <td>昼食</td>
            <td>¥1,200</td>
        </tr>
        <tr>
            <td>2025-01-02</td>
            <td>交通費</td>
            <td>電車</td>
            <td>¥500</td>
        </tr>
        <tr>
            <td>2025-01-03</td>
            <td>娯楽</td>
            <td>映画</td>
            <td>¥1,800</td>
        </tr>
        <tr>
            <td>2025-01-04</td>
            <td>食費</td>
            <td>夕食</td>
            <td>¥2,500</td>
        </tr>
    </tbody>
</table>

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

.striped-table th,
.striped-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border: 1px solid #ddd;
}

.striped-table thead {
    background: #0066cc;
    color: white;
}

.striped-table tbody tr:nth-child(even) {
    background: #f2f2f2;
}

.striped-table tbody tr:nth-child(odd) {
    background: white;
}

.striped-table tbody tr:hover {
    background: #e6f2ff;
}

高度なテーブル

セルの結合とグループ化

セルの結合

<!-- 列の結合（colspan） -->
<table border="1">
    <tr>
        <th colspan="3">Q1 売上報告</th>
    </tr>
    <tr>
        <th>1月</th>
        <th>2月</th>
        <th>3月</th>
    </tr>
    <tr>
        <td>¥1,000,000</td>
        <td>¥1,200,000</td>
        <td>¥1,500,000</td>
    </tr>
</table>

<!-- 行の結合（rowspan） -->
<table border="1">
    <tr>
        <th rowspan="2">カテゴリ</th>
        <th colspan="2">2025年</th>
    </tr>
    <tr>
        <th>Q1</th>
        <th>Q2</th>
    </tr>
    <tr>
        <td>売上</td>
        <td>¥5,000,000</td>
        <td>¥6,000,000</td>
    </tr>
    <tr>
        <td>利益</td>
        <td>¥1,000,000</td>
        <td>¥1,500,000</td>
    </tr>
</table>

<!-- 複雑な結合 -->
<table border="1">
    <tr>
        <th rowspan="2">製品</th>
        <th colspan="2">販売数</th>
        <th rowspan="2">合計</th>
    </tr>
    <tr>
        <th>店舗A</th>
        <th>店舗B</th>
    </tr>
    <tr>
        <td>製品X</td>
        <td>100</td>
        <td>150</td>
        <td>250</td>
    </tr>
    <tr>
        <td>製品Y</td>
        <td>80</td>
        <td>120</td>
        <td>200</td>
    </tr>
</table>

列グループ

<table>
    <colgroup>
        <col style="background-color: #f0f0f0;">
        <col span="2" style="background-color: #e0f0ff;">
        <col style="background-color: #ffe0e0;">
    </colgroup>
    <thead>
        <tr>
            <th>名前</th>
            <th>国語</th>
            <th>数学</th>
            <th>合計</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>田中</td>
            <td>85</td>
            <td>90</td>
            <td>175</td>
        </tr>
        <tr>
            <td>佐藤</td>
            <td>78</td>
            <td>88</td>
            <td>166</td>
        </tr>
        <tr>
            <td>鈴木</td>
            <td>92</td>
            <td>85</td>
            <td>177</td>
        </tr>
    </tbody>
</table>

レスポンシブテーブル

モバイル対応の表

スクロール可能なテーブル

<div class="table-wrapper">
    <table class="responsive-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>名前</th>
                <th>メール</th>
                <th>電話</th>
                <th>住所</th>
                <th>登録日</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>001</td>
                <td>田中太郎</td>
                <td>tanaka@example.com</td>
                <td>090-1234-5678</td>
                <td>東京都渋谷区</td>
                <td>2025-01-01</td>
            </tr>
            <tr>
                <td>002</td>
                <td>佐藤花子</td>
                <td>sato@example.com</td>
                <td>080-2345-6789</td>
                <td>大阪府大阪市</td>
                <td>2025-01-02</td>
            </tr>
        </tbody>
    </table>
</div>

.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.responsive-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
}

.responsive-table th,
.responsive-table td {
    padding: 0.75rem;
    text-align: left;
    border: 1px solid #ddd;
    white-space: nowrap;
}

.responsive-table thead {
    background: #333;
    color: white;
}

@media (max-width: 768px) {
    .table-wrapper {
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    
    .responsive-table {
        font-size: 0.875rem;
    }
    
    .responsive-table th,
    .responsive-table td {
        padding: 0.5rem;
    }
}

カード型レイアウト（モバイル）

<table class="card-table">
    <thead>
        <tr>
            <th>製品</th>
            <th>価格</th>
            <th>在庫</th>
            <th>ステータス</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="製品">ノートPC</td>
            <td data-label="価格">¥100,000</td>
            <td data-label="在庫">5</td>
            <td data-label="ステータス">在庫あり</td>
        </tr>
        <tr>
            <td data-label="製品">マウス</td>
            <td data-label="価格">¥2,000</td>
            <td data-label="在庫">20</td>
            <td data-label="ステータス">在庫あり</td>
        </tr>
    </tbody>
</table>

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

.card-table th,
.card-table td {
    padding: 0.75rem;
    text-align: left;
    border: 1px solid #ddd;
}

.card-table thead {
    background: #0066cc;
    color: white;
}

@media (max-width: 600px) {
    .card-table thead {
        display: none;
    }
    
    .card-table tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
    }
    
    .card-table td {
        display: flex;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        border: none;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .card-table td:last-child {
        border-bottom: none;
    }
    
    .card-table td::before {
        content: attr(data-label);
        font-weight: bold;
        margin-right: 1rem;
    }
}

セマンティック