HTMLの表の基本形
表(テーブル)を表示するにはtable要素を使います。表の中のセル(1マス)を表すには、th要素またはtd要素を使います。th要素は表の見出し入るセルを、td要素はデータが入るセルを意味します。tr要素は横１列分を意味します。
コード 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>
| 順位 | 品種 | 特徴 |
|---|---|---|
| 1 | スコティッシュフォールド | 耳と丸い姿 |
| 2 | アメリカンショートヘア | 人懐っこい |
| 3 | マンチカン | 短い足 |
| アニコム会社 猫の人気ランキング | ||
