表を作成するtableタグについて解説

tableタグは表を作成するときに使用するタグです。

また、tableタグと合わせてtrタグ、thタグ、tdタグを使って作成するので、そのタグも合わせて確認していきましょう。

trタグは表の行部分(横方向)を指定するときに使用するタグです。

ちなみに「tr」は「table row」の略です。「table row」は日本語で「テーブルの行」という意味になります。

thタグは表のセルに見出しやタイトルを指定するときに使用するタグです。

ちなみに「th」は「table header」の略です。「table header」は日本語で「テーブルの見出し」という意味になります。

tdタグは表のセルにデータを指定するときに使用するタグです。

ちなみに「td」は「table data」の略です。「table data」は日本語で「テーブルのデータ」という意味になります。

それでは、tableタグ、trタグ、thタグ、tdタグを使って表を作成してみましょう。

下記のHTMLとCSSのコードを書いてみて表示を確認してみましょう。

<table>
  <tr>
    <th>タイトル01</th>
    <th>タイトル02</th>
    <th>タイトル03</th>
  </tr>
  <tr>
    <td>データ01</td>
    <td>データ03</td>
    <td>データ03</td>
  </tr>
  <tr>
    <td>データ04</td>
    <td>データ05</td>
    <td>データ06</td>
  </tr>
</table>

table {
  border-collapse: collapse;
}

th,
td {
  font-size: 16px;
  border: 1px solid #000;
  padding: 12px 16px;
}

上記のように tableタグ、trタグ、thタグ、tdタグを使用すると表が作成できました。

表に線を引くときは

tableタグに border-collapse: collapse;

thタグとtdタグに border

を指定すると表に線を引くことができます。

表を作成するときは tableタグ、trタグ、thタグ、tdタグを使って作成します。

表を作成するのが tableタグ

表の行部分(横方向)を指定するのが trタグ

表のセルに見出しやタイトルを指定するのが thタグ

表のセルにデータを指定するのが tdタグ です。

各タグを使い分けながら表を作成していきましょう。

最後までお読みいただきありがとうございます。