HTMLのtableタグの使い方を完全ガイド！初心者でもわかる表組みデータの基本

3. captionタグで表にタイトルをつける

3. captionタグで表にタイトルをつける

captionタグを使うと、表全体にタイトルをつけることができます。表の内容を説明したり、アクセシビリティを高める役割もあります。

<table border="1">
    <caption>学生の情報一覧</caption>
    <tr>
        <th>名前</th>
        <th>科目</th>
    </tr>
    <tr>
        <td>太郎</td>
        <td>数学</td>
    </tr>
    <tr>
        <td>花子</td>
        <td>英語</td>
    </tr>
</table>

captionは表の最初に書く必要があります。タイトルがあると表の内容が一目でわかり、SEO対策としても役立ちます。

4. colspanとrowspanでセルを結合する

4. colspanとrowspanでセルを結合する

colspan属性は横方向のセルを結合、rowspan属性は縦方向のセルを結合するために使います。これを使うと、複雑な表でも整理して見せることができます。

<table border="1">
    <tr>
        <th>曜日</th>
        <th colspan="2">時間割</th>
    </tr>
    <tr>
        <td>月曜日</td>
        <td>数学</td>
        <td>英語</td>
    </tr>
    <tr>
        <td rowspan="2">火曜日</td>
        <td>理科</td>
        <td>音楽</td>
    </tr>
    <tr>
        <td>体育</td>
        <td>美術</td>
    </tr>
</table>

colspanとrowspanを組み合わせると、表のレイアウトを自由に調整できます。初めての方はまず小さい表で練習してみると理解しやすいです。

5. thead, tbody, tfootで表を整理する

5. thead, tbody, tfootで表を整理する

大きな表では、thead（ヘッダー部分）、tbody（データ部分）、tfoot（フッター部分）を使うと、HTML構造が整理され、CSSやJavaScriptで操作しやすくなります。

<table border="1">
    <thead>
        <tr>
            <th>商品名</th>
            <th>価格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>ノートパソコン</td>
            <td>120000円</td>
        </tr>
        <tr>
            <td>マウス</td>
            <td>1500円</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>合計</td>
            <td>121500円</td>
        </tr>
    </tfoot>
</table>

thead, tbody, tfootを使うことで、アクセシビリティも向上し、スクリーンリーダーでも内容が理解しやすくなります。

6. 表にスタイルをつける

6. 表にスタイルをつける

tableタグにはCSSやBootstrapのクラスを使ってデザインを整えることができます。例えば、枠線や背景色、文字の配置などを簡単に変更できます。

<table class="table table-bordered table-striped">
    <thead class="table-dark">
        <tr>
            <th>名前</th>
            <th>メール</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>太郎</td>
            <td>taro@example.com</td>
        </tr>
        <tr>
            <td>花子</td>
            <td>hanako@example.com</td>
        </tr>
    </tbody>
</table>

Bootstrapを使うと、少ないコードで見栄えのよい表を作れます。table-borderedで枠線、table-stripedで行の交互背景色を簡単に追加できます。

7. まとめのポイント

7. まとめのポイント

HTMLのtableタグを使うと、データを表として整理して表示できます。基本的な構造は、table > tr > th/td です。captionで表にタイトルをつけたり、colspanやrowspanでセルを結合したり、thead/tbody/tfootで表を整理することもできます。また、CSSやBootstrapを活用することで、デザインも簡単に調整可能です。

初心者の方はまず小さい表から練習し、少しずつ行数や列数を増やして、colspanやrowspanを使った表作りに挑戦してみましょう。表は商品リストやスケジュール、成績表など様々な用途で使える非常に便利なHTML要素です。

まとめ

まとめ

本記事では、HTMLのtableタグの基本から応用までを初心者向けに詳しく解説しました。tableタグはウェブページ上で情報を整理して見せるための重要なHTML要素であり、商品リストやスケジュール表、成績表など様々な場面で活用できます。tableタグの中では、<tr>で行を作り、<th>で見出しセル、<td>でデータセルを作成します。captionタグを使えば表にタイトルを付けられ、アクセスビリティや理解しやすさを向上させることができます。

また、colspanやrowspanを利用することでセルを結合し、複雑な表でも整理されたレイアウトを実現できます。さらに、thead、tbody、tfootを用いることで、表の構造を明確にし、CSSやJavaScriptでの操作も容易になります。これにより、スクリーンリーダーなどの支援技術にも対応したアクセシブルな表を作ることができます。

デザイン面では、CSSやBootstrapのクラスを使うことで、枠線、背景色、文字の配置などを簡単に調整できます。たとえば、table-borderedやtable-stripedを組み合わせると、視覚的に見やすく、美しい表を少ないコードで作成可能です。初めは小さな表から練習し、少しずつ行や列を増やしながら、セル結合やスタイル付けに挑戦することが理解を深めるコツです。

総合すると、HTML tableタグを理解して活用することで、情報を整理して見せる力が大幅に向上し、ウェブページ全体の利便性と見やすさを高めることができます。特に、見やすく整理された表はユーザーにとっても理解しやすく、SEOの観点からも適切な構造化データとして検索エンジンに評価されやすくなります。

具体的な表作成の例を振り返ると、次のようなコードになります。

 <table class="table table-bordered table-striped"> <caption>サンプル商品リスト</caption> <thead class="table-dark"> <tr> <th>商品名</th> <th>価格</th> <th>在庫</th> </tr> </thead> <tbody> <tr> <td>ノートパソコン</td> <td>120000円</td> <td>在庫あり</td> </tr> <tr> <td>マウス</td> <td>1500円</td> <td>在庫あり</td> </tr> </tbody> <tfoot> <tr> <td>合計</td> <td>121500円</td> <td>-</td> </tr> </tfoot> </table>