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

1. HTMLのtableタグとは？

1. HTMLのtableタグとは？

tableタグは、ウェブページで表を作るための基本的なHTMLタグです。商品リストや成績表、スケジュール表など、複数のデータを行と列で整理したいときに使います。tableタグの中に、trタグで行を作り、その中にthタグやtdタグで列を作ります。

2. trタグの役割

2. trタグの役割

trタグは「table row」の略で、表の一行を作るためのタグです。trタグの中に、thやtdタグを並べて列を作ります。行を増やしたいときは、trタグを増やせばよいだけなので、とてもシンプルです。

<table border="1">
    <tr>
        <td>データ1</td>
        <td>データ2</td>
    </tr>
    <tr>
        <td>データ3</td>
        <td>データ4</td>
    </tr>
</table>

3. thタグの意味と使い方

3. thタグの意味と使い方

thタグは「table header」の略で、表の見出しを表すタグです。太字で中央寄せされることが多く、列の意味を示す重要な部分です。データを整理するために、まずthタグで見出しを作ると分かりやすくなります。

<table border="1">
    <tr>
        <th>名前</th>
        <th>年齢</th>
        <th>職業</th>
    </tr>
    <tr>
        <td>山田太郎</td>
        <td>30</td>
        <td>エンジニア</td>
    </tr>
</table>

4. tdタグの意味と使い方

4. tdタグの意味と使い方

tdタグは「table data」の略で、表の中のデータを入れるためのタグです。thタグの見出しに対応する形で、具体的な情報をtdタグに入れます。tdタグを使うことで、表の中に数字や文字、リンクなどを自由に入れることができます。

<table border="1">
    <tr>
        <th>商品</th>
        <th>価格</th>
    </tr>
    <tr>
        <td>りんご</td>
        <td>100円</td>
    </tr>
    <tr>
        <td>バナナ</td>
        <td>80円</td>
    </tr>
</table>

5. 表に枠線をつける方法

5. 表に枠線をつける方法

HTMLでは、tableタグにborder属性を付けることで、簡単に表に枠線を付けることができます。border="1"のように数字を指定すると、ピクセル数で枠線の太さを決められます。

<table border="2">
    <tr>
        <th>都道府県</th>
        <th>人口</th>
    </tr>
    <tr>
        <td>大阪府</td>
        <td>880万人</td>
    </tr>
    <tr>
        <td>東京都</td>
        <td>1400万人</td>
    </tr>
</table>

6. 複数行・複数列のデータを表現する

6. 複数行・複数列のデータを表現する

表は行と列を自由に増やせるので、複雑なデータも整理できます。trタグを追加して行を増やし、tdタグを追加して列を増やすだけです。必要に応じてthタグも複数行で使えます。

<table border="1">
    <tr>
        <th>日付</th>
        <th>天気</th>
        <th>気温</th>
    </tr>
    <tr>
        <td>3/4</td>
        <td>晴れ</td>
        <td>15℃</td>
    </tr>
    <tr>
        <td>3/5</td>
        <td>雨</td>
        <td>10℃</td>
    </tr>
</table>

7. 表にスタイルを追加して見やすくする

7. 表にスタイルを追加して見やすくする

Bootstrapのクラスを使うと、簡単に表の見た目を整えられます。例えば、class="table table-bordered"をつけると枠線付きの表になりますし、class="table table-striped"で行ごとに色を変えることもできます。見やすい表はユーザー体験を向上させ、SEO的にも良い影響があります。

<table class="table table-striped table-bordered">
    <tr>
        <th>名前</th>
        <th>得点</th>
    </tr>
    <tr>
        <td>佐藤</td>
        <td>90</td>
    </tr>
    <tr>
        <td>鈴木</td>
        <td>85</td>
    </tr>
</table>

8. まとめに向けての確認ポイント

8. まとめに向けての確認ポイント

HTMLのtableタグは、trで行を作り、thで列の見出しを、tdでデータを入れる基本構造が理解できれば、どんな表も作れるようになります。枠線やBootstrapのスタイルを組み合わせることで、見やすくて整理された表を作成できるので、ウェブページの情報整理に役立ちます。

まとめ

まとめ

今回はHTMLのtableタグについて、基本構造から応用まで詳しく解説しました。tableタグはウェブページで表を作るための基本要素であり、データを整理して表示する際に欠かせません。tableタグの中にtrタグで行を作り、その行の中にthタグやtdタグを配置することで、列ごとに見出しやデータを整理できます。特に、trタグは行を定義し、thタグは列の見出し、tdタグは実際のデータを表す役割があり、これらを組み合わせることで任意の表を作成可能です。

また、表に枠線を付けるborder属性や、複数行・複数列を表現する方法、そしてBootstrapを活用したスタイル付けについても解説しました。class="table table-striped table-bordered"のように設定すると、行ごとのストライプ表示や枠線を簡単に追加でき、ユーザーにとって見やすく整った表を作れます。こうした視覚的な工夫は、ウェブサイトのユーザー体験を向上させるだけでなく、情報が整理されていることを検索エンジンにも示すため、SEOの観点でも有益です。

さらに、表は単にデータを並べるだけでなく、日付や商品リスト、成績表、スケジュール表など、多様な情報を整理して提示する場面で活用できます。複雑なデータでも、trタグやtdタグを追加することで柔軟に対応可能です。thタグを複数行にわたって使うことで、見出しを分かりやすく整理することもできます。これにより、情報の把握が容易になり、ユーザーの利便性が向上します。

表を作る際は、まず何を表示したいのか、どのように整理するのが最適かを考えることが大切です。見出しをしっかり定義しておくと、表全体の意味が伝わりやすくなります。また、BootstrapやCSSを使って見た目を整えることで、情報の優先度や区切りが視覚的に明確になり、ページ全体のデザイン性も向上します。さらに、表の整然とした構造は、スクリーンリーダーなどの支援技術でも読みやすくなるため、アクセシビリティの向上にもつながります。

下記は、基本的なtableタグの構造をまとめたサンプルです。行と列を正しく理解し、Bootstrapでスタイルを付けると、見やすく整理された表を作成できます。

 <table class="table table-striped table-bordered"> <tr> <th>日付</th> <th>天気</th> <th>気温</th> </tr> <tr> <td>3/4</td> <td>晴れ</td> <td>15℃</td> </tr> <tr> <td>3/5</td> <td>雨</td> <td>10℃</td> </tr> </table>