HTML手打ち、tableタグで表作成

こんばんは！IT業界で働くアライグマです！

HTMLで表を作成するには、<table>タグを使用します。表はデータを整理し、見やすくするために非常に便利な要素です。この記事では、HTMLを手打ちして<table>タグを使った表を作成する方法を詳しく解説します。

tableタグの基本構造

HTMLの<table>タグは、以下のような基本構造を持っています。

<table>
    <tr>
        <th>見出し1</th>
        <th>見出し2</th>
        <th>見出し3</th>
    </tr>
    <tr>
        <td>データ1</td>
        <td>データ2</td>
        <td>データ3</td>
    </tr>
</table>
  • <table>：表全体を囲むタグ
  • <tr>：行（row）を定義するタグ
  • <th>：表の見出し（header）を定義するタグ（太字かつ中央寄せになる）
  • <td>：表のセル（data）を定義するタグ

このように、HTMLの<table>タグはシンプルな構造で表を作成できます。

表のデザインを整える方法

HTMLの<table>タグだけでは、デフォルトのスタイルが適用されているため、見た目があまり良くありません。そこで、CSSを使用してデザインを整えます。

枠線を追加する

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
    }
</style>

このCSSを適用すると、表に枠線が追加され、見やすくなります。

  • border-collapse: collapse; → 枠線が二重にならないようにする
  • border: 1px solid black; → 表のセルに黒い枠線を付ける
  • padding: 8px; → セル内に余白を追加して読みやすくする
  • text-align: left; → テキストを左揃えにする
  • background-color: #f2f2f2; → ヘッダー部分の背景色を薄いグレーにする

このようにCSSを適用することで、見やすく整理された表を作成できます。

列を結合する（colspanの使い方）

表のレイアウトを調整する際に、列（カラム）を結合したい場合があります。そのときに使うのがcolspan属性です。

<table>
    <tr>
        <th colspan="2">結合されたセル</th>
        <th>通常のセル</th>
    </tr>
    <tr>
        <td>データ1</td>
        <td>データ2</td>
        <td>データ3</td>
    </tr>
</table>
  • colspan="2" → 2つの列を結合する

これを利用すると、タイトル付きの表を作るときなどに便利です。

行を結合する（rowspanの使い方）

行（row）を結合する場合は、rowspan属性を使います。

<table>
    <tr>
        <th rowspan="2">行結合</th>
        <td>データ1</td>
    </tr>
    <tr>
        <td>データ2</td>
    </tr>
</table>
  • rowspan="2" → 2つの行を結合する

これを使うことで、表の構成をより柔軟にカスタマイズできます。

幅や高さを調整する

表の幅や高さを調整したい場合は、CSSのwidthやheightを指定します。

<style>
    table {
        width: 80%;
        height: 200px;
    }
</style>
  • width: 80%; → 表の幅をページの80%に設定
  • height: 200px; → 表の高さを200ピクセルに設定

このように、表のサイズを調整することで、ページ全体のレイアウトを整えることができます。

まとめ

HTMLの<table>タグを手打ちして表を作成する方法を解説しました。

  • 基本的な構造として<table>、<tr>、<th>、<td>を理解する
  • CSSを活用して表のデザインを整える
  • colspanやrowspanを活用してセルの結合を行う
  • 幅や高さの調整でレイアウトを調整する

表はデータを整理するのに役立ち、適切にスタイルを適用することで見やすさも向上します。HTMLを手打ちで書くことで、タグの役割や仕組みを深く理解できるので、ぜひ実践してみてください。

HTML手打ちCSS,デザイン