【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属性を利用し、結合することができます。

最新記事
  • カテゴリー
  • 月別
  • Twitter

    関連記事

    最新記事NEW

    CONTACTCONTACT CONTACTCONTACT

    お問い合わせ

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

    情報入力

    内容確認

    完了

      お名前必須

      フリガナ必須

      メールアドレス必須

      お問い合わせ内容