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

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>

テーブルタグ使用例(表示)

表示例
th_1 th_2 th_3
td_1_1 td_1_2 td_1_3
td_2_1 td_2_2 td_2_3
td_3
td_4_1 td_4_2 td_4_3
td_5_2 td_5_3
わくわくBank.
フリーランスのエンジニアとして活動してます。ここでは、ソフトウェア開発で必要とされる技術、用語、概念を整理しています。