7
6

More than 3 years have passed since last update.

tableタグについて

Posted at

tableタグとは?

 HTMLでテーブル(表)を作成するために使用するタグ。実際にテーブルを作成する際は、以下のtableの子要素やブロック要素を併用して作成する。

tableの子要素 説明
thead テーブルの行(水平方向)をグループ化するタグ。このタグに囲まれた内容は表のヘッダ部分としてグループ化される。
tbody テーブルの行(水平方向)をグループ化するタグ。このタグに囲まれた内容は表のボディ部分としてグループ化される。
tfoot テーブルの行(水平方向)をグループ化するタグ。このタグに囲まれた内容は表のフッタ部分としてグループ化される。
ブロック要素 説明
tr テーブルの行部分(横方向)を指定するタグ。( table record )
th テーブルの見出しやタイトルとなるセルを指定するタグ。( table theme )
td テーブルのセル内容を作成を指定するタグ。( table date )

記述例

<table class="teble">
  <thead>
    <tr>
      <th class="header1">見出し1</th>
      <th class="header2">見出し2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>フッタ1</td>
      <td>フッタ2</td>
    </tr>
  </tfoot>
</table>

 以下のようになる。

見出し1 見出し2
内容1 内容2
フッタ2 フッタ1
7
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
6