HTMLで表を作る thとtdとtr

  • 2021年10月21日
  • 2021年11月15日
  • HTML/CSS
  • 2view

表の基本形

表(テーブル)を表示するにはtable要素を使います。表の中のセル(1マス)を表すには、th要素またはtd要素を使います。th要素は表の見出し入るセルを、td要素はデータが入るセルを意味します。tr要素は横1列分を意味します。

コード table.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset=utf-8>
</head>

<body>
  <table border="1">
  <tr>
      <th>順位</th><th>品種</th><th>特徴</th>
   </tr>
   <tr>
      <td>1</td><td>スコティッシュフォールド</td><td>耳と丸い姿</td>
   </tr>
   <tr>
     <td>2</td> <td>アメリカンショートヘア</td><td>人懐っこい</td>
   </tr>
   <tr>
      <td>3</td> <td>マンチカン</td><td>短い足</td>
   </tr>
   <tr>
      <td colspan="3">
          アニコム会社 猫の人気ランキング
      </td> 
   </tr>
</table>
</body>

表示結果

順位品種特徴
1スコティッシュフォールド耳と丸い姿
2 アメリカンショートヘア人懐っこい
3 マンチカン短い足
アニコム会社 猫の人気ランキング

colspan属性を指定すると、セルが横方向に結合されます。colspan属性の値には、結合したいセルの個数を指定します。

<thead> <tbody> <tfoot>の各タグでtr要素を囲むと、囲った範囲が縦にグループ化され、それぞれ表のヘッダー、本体、フッター部分を意味します。
また、captionは表のタイトルを意味し、開始タグ<table>の直後に配置します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset=utf-8>
<html lang="ja">
</head>

<body>
  <table border="1">
  <caption>猫の人気ベスト3</caption>
<thead>
  <tr>
      <th>順位</th><th>品種</th><th>特徴</th>
   </tr>
</thead>
<body>
   <tr>
      <td>1</td><td>スコティッシュフォールド</td><td>耳と丸い姿</td>
   </tr>
   <tr>
     <td>2</td> <td>アメリカンショートヘア</td><td>人懐っこい</td>
   </tr>
   <tr>
      <td>3</td> <td>マンチカン</td><td>短い足</td>
   </tr>
</tbody>
<tfoot>
   <tr>
      <td colspan="3">
          アニコム会社 猫の人気ランキング
      </td> 
   </tr>
</tfoot>
</table>
</body>
  
猫の人気ベスト3
順位品種特徴
1スコティッシュフォールド耳と丸い姿
2 アメリカンショートヘア人懐っこい
3 マンチカン短い足
アニコム会社 猫の人気ランキング
最新情報をチェックしよう!

HTML/CSSの最新記事8件

>プログラミング 独学

プログラミング 独学

本当にプログラミングを学びたい人のためになるブログにしたいと思っていますので、些細なことでも気が付いたのであればご報告いただけると幸いです。

CTR IMG