HTMLで作る表の作り方！<table>タグの使い方

投稿画面がグーテンベルグになり、WordPressで表の作成も簡単になりました。しかし、それだけでは思い通りの表にはできません。CSSで表のデザインを整えたい場合だってあるでしょう。

ということで今回は、<table>タグを使った表の作り方の基本をまとめてみたいと思います。

<table>タグ、<tr>タグ、<th>タグ、<td>タグの基本

とりあえず以下に３×３の表を作ってみました。

HTML

<table>
    <tr>
      <th>見出し１</th><th>見出し2</th><th>見出し3</th>
    </tr>
    <tr>
      <td>セル1</td><td>セル2</td><td>セル3</td>
    </tr>
    <tr>
      <td>セル4</td><td>セル5</td><td>セル6</td>
    </tr>
</table>

それぞれのタグの説明

セルを横に結合するcolspan属性の使い方

上で作った表のセル1とセル2を結合してみましょう。

HTML

<table>
    <tr>
      <th>見出し１</th><th>見出し2</th><th>見出し3</th>
    </tr>
    <tr>
      <td colspan="2">セル1セル2</td><td>セル3</td>
    </tr>
    <tr>
      <td>セル4</td><td>セル5</td><td>セル6</td>
    </tr>
</table>

上記のようにcolspan属性の使い方は、横に結合したいセルの中の一番左のセルの<td>タグに付加させて使います。=" "の中の数字は、結合させるセルの数です。そしてセルの数が減る数分、囲っていた<td>タグを減らします。

セルを縦に結合するrowspan属性の使い方

次はセルを縦に結合させてみましょう。

HTML

<table>
    <tr>
      <th>見出し１</th><th>見出し2</th><th>見出し3</th>
    </tr>
    <tr>
      <td rowspan="2">セル1セル4</td><td>セル2</td><td>セル3</td>
    </tr>
    <tr>
     <td>セル5</td><td>セル6</td>
    </tr>
</table>

上記のように横に結合したいセルの一番上のセルの<td>タグに付加させて使います。=" "の中の数字は、結合させるセルの数です。そしてセルの数が減る分、次の行の<td>タグも減らす必要があります。

例えばセル2とセル5を結合したいのであれば、消すのは<td>セル5</td>タグです。

最後に

票の作り方の基本は、これぐらい知っておけば十分でしょう。しかもグーテンベルグであれば、これぐらいの表は何の知識もなくてもできます。ただ、セルの結合はHTMLの知識がなければできません。

自由にカスタマイズするためには、CSSの知識も必要になります。が、とりあえずはHTMLの基本を身につけましょう。