0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

table系タグは2種類にグループ分けすると覚えやすい

Last updated at Posted at 2020-03-23

table系タグは2種類にグループ分けすると覚えやすい

(1)エリア系タグ...表自体のエリアごとの意味を表す

  • <table>...「このエリアは表」
  • <thead>...「このエリアは表の見出し」
  • <tfoot>...「このエリアは表のフッター」
  • <tbody>...「このエリアは表のメイン」
  • <tr>...「ここからここまでが1行」(<th><td>を囲います)

(2)コンテンツ系タグ...表の中身を表す

  • <th>...「これが見出しの文字」
  • <td>...「これが見出し以外(データ等)の文字」
example
<table> <!-- 開始:表エリア -->
 <thead> <!-- 開始:見出しエリア -->

   <tr> 
     <th>見出しA</th> <!-- コンテンツ系タグ:見出し -->
     <th>見出しB</th>
   </tr>

 </thead> <!-- 終了:見出しエリア -->
 <tbody> <!-- 開始:メインエリア -->

   <tr>
     <td>AA</td> <!-- コンテンツ系タグ:見出し以外(データ等) -->
     <td>BB</td>
   </tr>
   <tr> <!-- 開始:1行 -->
     <td>AAA</td>
     <td>BBB</td>
   </tr> <!-- 終了:1行 -->
   <tr>
     <td>AaAa</td>
     <td>BbBb</td>
   </tr>

 </tbody> <!-- 終了:メインエリア -->
</table> <!-- 終了:表エリア -->

この記事を作った経緯:

テーブルを作るとき、よく基本構造やそれぞれのタグの意味を忘れてしまうので自分なりの覚え方を考えました。その備忘録がこの記事です。

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?