【HTML】table 表を作成からレイアウトの変更を解説

シュウ

公開日: 2020.02.06 / 更新日: 2026.10.21
今回はtableタグについて勉強しましょう！

HTMLで表を作りたい方
tableタグの基本構造を理解し、表を作成できるようになりたい方です。
表のデザインをCSSで整えたい方
幅、枠線、背景色、文字色、余白などを自分でカスタマイズしたい方です。
セルの結合を知りたい方
rowspan属性・colspan属性を使って、複雑な表を作りたい方です。

[記事の内容]

tableタグの使い方

HTMLで表を作成するときは、table、tr、th、tdの4つのタグを組み合わせます。
まずは、以下のような「名前」と「年齢」の表を作成してみましょう。

実際にコードに表すと以下のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>【HTML】tableタグを簡単に作成する方法</title>
</head>
<body>
    <table>
        <tr>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr>
            <td>鈴木</td>
            <td>20歳</td>
        </tr>
        <tr>
            <td>佐藤</td>
            <td>24歳</td>
        </tr>
        <tr>
            <td>田中</td>
            <td>26歳</td>
        </tr>
    </table>
</body>
</html>

tableタグの説明

●①table: 表全体を囲むタグです。

●②tr: 「Table Row（行）」の略で、表の1行分を囲むタグです。

●③th: 「Table Header（見出し）」の略で、表の見出しセルに使用します。初期状態では太字・中央寄せで表示されます。

●④td: 「Table Data（データ）」の略で、表のデータセルに使用します。

ただし、このままでは最初の画像とイメージが大きく異なります。ここからCSSを使って、イメージに近づけていきます。

表の幅のサイズを指定する

今回はブラウザサイズを640pxとして進めていきます。
幅の指定方法には、HTMLで指定する方法とCSSで指定する方法の2種類があります。

幅のサイズをHTMLで指定する方法

HTMLのwidth属性でも幅は指定できますが、おすすめしません。
理由：スマートフォンで見た際に、画面からはみ出る可能性があります。

<table width="540" border="1">
</table>

上記はあくまで例です。幅や線の指定は、必ずCSSで行いましょう。

幅のサイズをCSSで指定する方法

幅（width）は、必ずCSSで設定しましょう。まずは540pxで固定する書き方です。

table {
    width: 540px;
    margin: 0 auto;
}

●①width: 540px;: 表の幅を540pxに固定します。

●②margin: 0 auto;: 左右の余白を自動にすることで、tableを中央に配置します。

次に、100%で指定する書き方です。

table {
    width: 100%;
}

●①width: 100%;: 親要素の幅いっぱいに表が広がります。今回のブラウザサイズ（640px）では、表の幅も640pxになります。

今回は540pxの指定を使用して次に進めます。ただし、レスポンシブ対応にする場合は、必ず100%で指定しましょう。

tableタグの枠線を指定する

上記の画像は、HTMLにborder="1"を指定した状態です。
HTMLに直接指定すると、後から変更する際に手間がかかります。線（border）の設定は、すべてCSSで行いましょう。

枠線の太さを指定する方法

table {
    width: 540px;
    margin: 0 auto;
}

table th,
table td {
    border: 3px solid #000000;
}

●①table th, table td: 見出しセルとデータセルの両方に、まとめてスタイルを指定します。

●②border: 3px solid #000000;: 線の太さ（3px）、線の種類（solid：実線）、線の色（黒）を一括で指定します。

tableタグにborder属性は指定せず、CSSのthとtdに指定しましょう。

枠線の色を指定する方法

table {
    width: 540px;
    margin: 0 auto;
}

table th,
table td {
    border: 3px solid #c00c00;
}

●①border: 3px solid #c00c00;: 線の色のカラーコードを変更することで、枠線の色を変えられます。

枠線の隙間を無くす方法

table {
    width: 540px;
    margin: 0 auto;
    border-collapse: collapse;
}

table th,
table td {
    border: 1px solid #000000;
}

●①border-collapse: collapse;: 隣り合うセルの枠線を重ねて表示し、二重線を一重線にします。collapseは「重ね合わせる」という意味です。

少しずつ表らしくなってきました。次は色の指定を行っていきます。

行や列の背景色・文字色を変更する

背景色を変更する方法

表全体の背景色を変更する場合は、tableに指定します。

table {
    width: 540px;
    margin: 0 auto;
    border-collapse: collapse;
    background-color: #cf563a;
}

table th,
table td {
    border: 1px solid #000000;
}

●①background-color: #cf563a;: tableに指定すると、thとtdを含む表全体の背景色が変わります。

見出しとデータで色を分けたい場合は、thとtdにそれぞれ指定します。

table {
    width: 540px;
    margin: 0 auto;
    border-collapse: collapse;
}

table th,
table td {
    border: 1px solid #000000;
}

table th {
    background-color: #cf563a;
}

table td {
    background-color: #6fb067;
}

●①table th: 見出しセルの背景色を#cf563aに指定します。

●②table td: データセルの背景色を#6fb067に指定します。

クラス名を付けて特定のセルの背景色を変更する方法

特定の列だけ色を変えたい場合は、対象のセルにクラス名を付けます。今回は年齢の列にbg_color01というクラス名を付けています。

table {
    width: 540px;
    margin: 0 auto;
    border-collapse: collapse;
}

table th,
table td {
    border: 1px solid #000000;
}

table th {
    background-color: #cf563a;
}

table td {
    background-color: #6fb067;
}

table td.bg_color01 {
    background-color: #38a2c6;
}

●①td.bg_color01: tdタグのうち、bg_color01クラスを持つセルだけに適用されます。

●②background-color: #38a2c6;: 該当セルの背景色を青系に変更します。

文字の色を変更する方法

表全体の文字色を変更する場合は、tableにcolorを指定します。

table {
    width: 540px;
    margin: 0 auto;
    border-collapse: collapse;
    color: #ffffff;
}

table th,
table td {
    border: 1px solid #000000;
}

table th {
    background-color: #cf563a;
}

table td {
    background-color: #6fb067;
}

●①color: #ffffff;: tableに指定すると、表内すべての文字が白色になります。

見出しとデータで文字色を分けたい場合は、thとtdに個別に指定します。

table {
    width: 540px;
    margin: 0 auto;
    border-collapse: collapse;
}

table th,
table td {
    border: 1px solid #000000;
}

table th {
    background-color: #cf563a;
    color: #ffffff;
}

table td {
    background-color: #6fb067;
    color: #fff200;
}

●①table th: 見出しセルの文字色を白（#ffffff）に指定します。

●②table td: データセルの文字色を黄色（#fff200）に指定します。

クラス名を付けて特定のセルの文字色を変更する方法

今回は年齢の列にfont_color01というクラス名を付けています。

table {
    width: 540px;
    margin: 0 auto;
    border-collapse: collapse;
}

table th,
table td {
    border: 1px solid #000000;
}

table th {
    background-color: #cf563a;
    color: #ffffff;
}

table td {
    background-color: #6fb067;
    color: #fff200;
}

table td.font_color01 {
    color: #3a3706;
}

●①td.font_color01: font_color01クラスを持つtdだけに適用されます。

●②color: #3a3706;: 該当セルの文字色を暗い色に変更します。

文字の配置を指定する

文字を中央寄せにする方法

table {
    width: 540px;
    margin: 0 auto;
    border-collapse: collapse;
    color: #ffffff;
    text-align: center;
}

table th,
table td {
    border: 1px solid #000000;
}

table th {
    background-color: #cf563a;
}

table td {
    background-color: #6fb067;
}

●①text-align: center;: tableに指定すると、表内すべての文字が中央寄せになります。

文字を左右に配置する方法

table {
    width: 540px;
    margin: 0 auto;
    border-collapse: collapse;
    color: #ffffff;
}

table th,
table td {
    border: 1px solid #000000;
}

table th {
    background-color: #cf563a;
    text-align: left;
}

table td {
    background-color: #6fb067;
    text-align: right;
}

●①table th: 見出しセルにtext-align: left;を指定し、文字を左寄せにします。

●②table td: データセルにtext-align: right;を指定し、文字を右寄せにします。

表の余白を変更する

th・tdに同じ余白を指定する方法

table {
    width: 540px;
    margin: 0 auto;
    border-collapse: collapse;
    color: #ffffff;
    text-align: center;
}

table th,
table td {
    border: 1px solid #000000;
    padding: 10px;
}

table th {
    background-color: #cf563a;
}

table td {
    background-color: #6fb067;
}

●①padding: 10px;: thとtdの内側に、上下左右10pxの余白を設定します。

th・tdに別々の余白を指定する方法

table {
    width: 540px;
    margin: 0 auto;
    border-collapse: collapse;
    color: #ffffff;
    text-align: center;
}

table th,
table td {
    border: 1px solid #000000;
}

table th {
    background-color: #cf563a;
    padding: 10px;
}

table td {
    background-color: #6fb067;
    padding: 5px 10px;
}

●①table th: 見出しセルにpadding: 10px;を指定し、上下左右に10pxの余白を設定します。

●②table td: データセルにpadding: 5px 10px;を指定し、上下に5px、左右に10pxの余白を設定します。

このように、thとtdで個別に余白を設定することもできます。これで最初のデザインと同じ表になりました。次は少し難しいセルの結合について解説します。

セルを結合する指定

セルを縦方向に結合するrowspan属性

<table>
    <tr>
        <th>名前</th>
        <th>年齢</th>
    </tr>
    <tr>
        <td>鈴木</td>
        <td rowspan="2">①20歳 ①と②を結合しています。</td>
    </tr>
    <tr>
        <td>佐藤</td>
        <!--<td>②</td>-->
    </tr>
    <tr>
        <td>田中</td>
        <td>26歳</td>
    </tr>
</table>

●①rowspan=”2″: rowspan属性は、セルを縦方向に結合する際に使用します。数字は結合するセルの数です。

●②結合されるセルを削除: 結合されて不要になったtd（②）は削除します。ここでは分かりやすいようにコメントアウトしています。

セルが縦につながりました。このとき、CSSの指定を変える必要はありません。

セルを横方向に結合するcolspan属性

<table>
    <tr>
        <th>名前</th>
        <th>年齢</th>
    </tr>
    <tr>
        <td>鈴木</td>
        <td>20歳</td>
    </tr>
    <tr>
        <td>佐藤</td>
        <td>24歳</td>
    </tr>
    <tr>
        <td colspan="2">①田中は欠席です ①と②を結合しています。</td>
        <!--<td>②</td>-->
    </tr>
</table>

●①colspan=”2″: colspan属性は、セルを横方向に結合する際に使用します。数字は結合するセルの数です。

●②結合されるセルを削除: 結合されて不要になったtd（②）は削除します。

セルが横につながりました。このときも、CSSの指定を変える必要はありません。

【HTML table】複雑な表(テーブル)をコピペで簡単に作る方法

今回は、【Table Tag Generator】についてのご説明です。HTMLの表を簡単に作成についてご説明しております。複雑な表の結合も文字の入力も簡単に出来ます。最後にHTMLコードが反映させるのでコピペで簡単作成。

まとめ

今回は、HTMLのtableタグを使った表の作成方法から、CSSによるレイアウトの変更までを解説しました。
table・tr・th・tdで表の構造を作成し、幅・枠線・色・文字揃え・余白をCSSで整えることで、見やすい表に仕上げられます。
また、rowspanやcolspanを使えば、セルを結合した表も作成できます。
今後は、tableタグのレスポンシブ対応やジェネレーターについても記事にしていきます。最後まで読んでいただきありがとうございました。ぜひ一度、表の作成からレイアウトの変更までお試しください。

POINT