【HTML】表について

記事概要

表の基本について、整理する

記載方法

使用するタグ

表は<table> <tr>などのタグを使用して作成する

作成イメージ

通常のケース(枠線なし)

<table>
  <tr>
    <th>区分</th>
    <th>通常料金</th>
    <th>割引料金</th>
  </tr>
  <tr>
    <td>大人</td>
    <td>2,000円</td>
    <td>1,700円</td>
  </tr>
  <tr>
    <td>学生</td>
    <td>1,500円</td>
    <td>1,300円</td>
  </tr>
  <tr>
    <td>小学生</td>
    <td>1,500円</td>
    <td>1,200円</td>
  </tr>
  <tr>
    <td>幼児</td>
    <td>1,000円</td>
    <td>1,000円</td>
  </tr>
</table>

通常のケース(枠線あり)

<!-- border="1"を追加することで、表に枠線を追加できる -->
<table border="1">
  <tr>
    <th>区分</th>
    <th>通常料金</th>
    <th>割引料金</th>
  </tr>
  <tr>
    <td>大人</td>
    <td>2,000円</td>
    <td>1,700円</td>
  </tr>
  <tr>
    <td>学生</td>
    <td>1,500円</td>
    <td>1,300円</td>
  </tr>
  <tr>
    <td>小学生</td>
    <td>1,500円</td>
    <td>1,200円</td>
  </tr>
  <tr>
    <td>幼児</td>
    <td>1,000円</td>
    <td>1,000円</td>
  </tr>
</table>

列を結合するケース

<table border="1">
  <tr>
    <th>区分</th>
    <th>通常料金</th>
    <th>割引料金</th>
  </tr>
  <tr>
    <td>大人</td>
    <td>2,000円</td>
    <td>1,700円</td>
  </tr>
  <tr>
    <td>学生</td>
    <td>1,500円</td>
    <td>1,300円</td>
  </tr>
  <tr>
    <td>小学生</td>
    <td>1,500円</td>
    <td>1,200円</td>
  </tr>
  <tr>
    <td>幼児</td>
    <!-- colspan="2"とすることで、2列を結合できる -->
    <td colspan="2">1,000円</td>
  </tr>
</table>

行を結合するケース

<table border="1">
  <tr>
    <th>区分</th>
    <th>通常料金</th>
    <th>割引料金</th>
  </tr>
  <tr>
    <td>大人</td>
    <td>2,000円</td>
    <td>1,700円</td>
  </tr>
  <tr>
    <td>学生</td>
    <!-- rowspan="2"とすることで、2行を結合できる -->
    <td rowspan="2">1,500円</td>
    <td>1,300円</td>
  </tr>
  <tr>
    <td>小学生</td>
    <td>1,200円</td>
  </tr>
  <tr>
    <td>幼児</td>
    <td>1,000円</td>
    <td>1,000円</td>
  </tr>
</table>