SoyaBlog

これを見れば解決しそうや

HOME>HTML>表を作成するtableタグについて解説
ブログ投稿日時:
ブログ更新日時:
表を作成するtableタグについて解説

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

  1. tableタグとは
  2. trタグとは
  3. thタグとは
  4. tdタグとは
  5. 4つのタグを使って表を作成しよう
  6. 今回のまとめ
1.

tableタグとは

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

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

2.

trタグとは

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

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

3.

thタグとは

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

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

4.

tdタグとは

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

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

5.

4つのタグを使って表を作成しよう

それでは、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;
  }
}
HTMLの表示
タイトル01タイトル02タイトル03
データ01データ03データ03
データ04データ05データ06

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

表に線を引くときは

tableタグに border-collapse: collapse;

thタグとtdタグに border

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

6.

今回のまとめ

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

表を作成するのが tableタグ

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

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

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

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

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