【HTML,CSS】table属性でセルの結合をする方法

WEBサイトへExcelのような表を掲載する際に、複雑な表になった場合でもセルの結合のような複雑な調整が可能です。

列の結合

最初の<tr>内の<th>へcolspanを追加するだけで列のセル結合が可能です。

<table>
   <tr>
      <th colspan="3">1列目の見出しセル</th>
   </tr>
   <tr>
      <td>セル</td>
      <td>セル</td>
      <td>セル</td>
   </tr>
  <tr>
      <td>セル</td>
      <td>セル</td>
      <td>セル</td>
   </tr>
</table>

▼以下のように出力されます。

1列目の見出しセル
セル セル セル

行の結合

行のセル結合は同様の方法でrowspan属性を利用し、結合することができます。

関連記事

最新記事NEW

CONTACTCONTACT CONTACTCONTACT

お問い合わせ

ご意見やお仕事のご依頼などは以下よりご連絡ください。

情報入力

内容確認

完了

    お名前必須

    フリガナ必須

    メールアドレス必須

    お問い合わせ内容