テーブルタグ~HTML~

テーブルタグ

①　tableタグ
１つのテーブル全体をまとめるタグ

②trタグ
table rowの略です。テーブルの横の列を作ります。

③thタグ
見出しタグセルを作るタグを作るタグです。

④tdタグ
通常セルを作るタグです。

コード

index.html

<table>
    <caption>登場人物</caption>
    <tr>
      <th class="col-1">&nbsp;</th>
      <th class="col-2">年齢</th>
      <th class="col-3">性別</th>
      <th class="col-4">性格</th>
    </tr>
    <tr>
      <th>太郎</th>
      <td>22</td>
      <td>男</td>
      <td>優しい</td>
    </tr>
    <tr>
      <th>花子</th>
      <td>18</td>
      <td>女</td>
      <td>お人好し</td>
    </tr>
    <tr>
      <th>一郎</th>
      <td>24</td>
      <td>男</td>
      <td>ロールキャベツ系男子</td>
    </tr>
  </table>

①:nbsp
セルが空の場合に入れます。

trタグが横列になります。trタグに挟まれる形で、太郎君、22,男、優しいが１行になります。

HTMLでの実装は以上になりますが、このままでは表のようにボーダーが無いのでCSSで整えていきます。

CSS

style.css

 table,th,td {
   border: 3px solid gray;
   border-spacing: 0;
   border-collapse: collapse;
   margin: auto;
 }

 .col-1,.col-2,.col-3 {
   width: 20%;
 }

 th{
   background-color: pink;
 }

デフォルトでは、ボーダーがつかないためcssで指定します。

①border-spacingでは、ボーダー同士の隙間をなくします。
②border-collapaseでは、ボーダー同士を重ねます。

③セル同士の幅設定
それぞれのthタグに幅を設定することでより見やすくなります。

完成