HTMLテーブル
HTMLテーブルを使用すると、Web開発者はデータを行と列に配置できます。
例
|
会社 |
連絡先 |
国 |
|---|---|---|
| アルフレッド・フッターキステ | マリア・アンダース | ドイツ |
| モンテスマ ショッピング センター | フランシスコ・チャン | メキシコ |
| エルンスト・ヘンデル | ローランド・メンデル | オーストリア |
| アイランドトレーディング | ヘレン・ベネット | イギリス |
| ラフィング・バッカス・ワインセラーズ | ヨシ・タンナムリ | カナダ |
| マガッツィーニ・アリメンタリ・リウニティ | ジョバンニ・ロヴェッリ | イタリア |
HTMLテーブルを定義する
HTMLのテーブルは、行と列内のテーブルセルで構成されます。
例
シンプルなHTMLテーブル。
<table>
<tr>
<th>会社</th>
<th>お問合せ先</th>
<th>国</th>
</tr>
<tr>
<td>アルフレッド・フッターキステ</td>
<td>マリア・アンダース</td>
<td>ドイツ</td>
</tr>
<tr>
<td>セントロ コマーシャル モクテスマ</td>
<td>フランシスコ・チャン</td>
<td>メキシコ</td>
</tr>
</table>
表のセル
各テーブルセルは、<td>そして</td>タグで作られます。
tdテーブルデータを表します。<td>と</td>の中の全てが表のセルの内容です。
注：表のセルには、テキスト、画像、リスト、リンク、その他の表など、あらゆる種類のHTML要素を含めることができます。
表の行
テーブルの各行は<tr>で始まり、</tr>タグで終わります。
trテーブル行を表します。例
<table>
<tr>
<td>メール</td>
<td>トバイアス</td>
<td>ライナス</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
テーブルには好きなだけ行を含めることができます。セルの数が各行で同じであることを確認してください。
注：行に含まれるセルが他の行よりも少ない場合や多い場合があります。これについては、後の章で説明します。
テーブルヘッダー
セルをテーブルヘッダーセルにしたい場合があります。そのような場合は、<td>タグの代わりに<th>タグを使用します。
thテーブルヘッダーの略です。例
最初の行をテーブルヘッダーセルにします。
<table>
<tr>
<th>人物１</th>
<th>人物２</th>
<th>人物３</th>
</tr>
<tr>
<td>メール</td>
<td>トバイアス</td>
<td>ライナス</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
デフォルトでは、<th>要素は太字で中央揃えですが、CSSで変更できます。
HTMLテーブルタグ
| タグ | 説明 |
|---|---|
| <table> | テーブルを定義します |
| <th> | テーブルのヘッダー セルを定義します |
| <tr> | テーブルの行を定義します |
| <td> | テーブル内のセルを定義します |
| <caption> | 表のキャプションを定義します |
| <colgroup> | 書式設定のためにテーブル内の1つ以上の列のグループを指定します |
| <col> | <colgroup> 要素内の各列の列プロパティを指定します |
| <thead> | テーブル内のヘッダー コンテンツをグループ化します |
| <tbody> | 本文のコンテンツをテーブルにグループ化します |
| <tfoot> | テーブル内のフッターコンテンツをグループ化します |
利用可能なすべてのHTMLタグの完全なリストについては、HTMLタグリファレンスを参照してください。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。