tableタグで表組みデザインを作成

2022/11/16

tableタグを利用した表組みデザインの使用例を紹介します。2次元で表現できる情報はテーブルとしてデータをまとめることで理解しやすくなります。

テーブルタグ使用例(ソース)

<table class="table-style">
  <caption>表示例</caption>
  <thead>
    <tr>
      <th width="20%">th_1</th>
      <th width="20%">th_2</th>
      <th width="60%">th_3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>td_1_1</td>
      <td>td_1_2</td>
      <td>td_1_3</td>
    </tr>
    <tr>
      <td>td_2_1</td>
      <td>td_2_2</td>
      <td>td_2_3</td>
    </tr>
    <tr>
      <td colspan="3">td_3</td>
    </tr>
    <tr>
      <td rowspan="2">td_4_1</td>
      <td>td_4_2</td>
      <td>td_4_3</td>
    </tr>
    <tr>
      <td>td_5_2</td>
      <td>td_5_3</td>
    </tr>
  </tbody>
</table>