tableタグ

Tag:

テーブルタグを利用した表組みデザインの使用例を紹介します。
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

スポンサーリンク