tableタグとは?|HTMLで表(テーブル)を作成しよう

tableタグとは?|HTMLで表(テーブル)を作成しよう
博士
リンゴくん、今回から複数に分けてHTMLの表の作成方法を解説していくぞい。
リンゴ
表を使えば、調べたデータなどをきれいに整理して表示できるから、すごく便利ですよね。
よろしくお願いします!
博士
よし!
では、今回はHTMLの表の基礎、<table>タグについて解説するぞ。
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<table>タグとは

 

<table>

対応ブラウザ Internet Explorer / Firefox / Google Chrome / Safari / Opera
分類 フロー・コンテンツ / パルパブル・コンテンツ
利用場所 フロー・コンテンツが期待される場所
内容 次の順番で各要素を入れる
①caption要素を1個(任意)
②colgroup要素を0個以上
③thead要素を1個(任意)
④tfoot要素を1個(任意)
⑤tbody要素を1個以上、またはtr要素を1個以上
⑥tfoot要素を1個(任意)(ただし、tfoot要素はtable要素内で1つのみ)


 
 
<table>タグは、表(テーブル)を作成する際に使用します。
基本的な表は、<table>タグ、<tr>タグ、<td>タグを使って作成します。

<table>~</table>の中に、<tr>~</tr>で表の横行を定義して、さらにその中に<th>~</th>や<td>~</td>でセルを定義します。
 
 

博士
表には行(横行)とカラム(縦列)が指定できるが、空の行やカラムは指定できないんじゃ。
 
 
また、表はレイアウト目的で使用してはいけません。
表をレイアウトに利用すると、ユーザー環境によっては情報の出力のされ方がでたらめになってしまう可能性があります。
そのため、コンテンツのレイアウトが目的の場合にはCSSを使うようにしましょう。
 
 

使用例

 
 

表示例

名前 担当
ジョン ボーカル・ギター
ポール ボーカル・ベース
ジョージ ギター
リンゴ ドラム
 
 

border属性

border属性を指定すると、その表がレイアウト目的ではないということを示すことができます。
値には「1」または空文字を指定します。(これ以外の値は指定できません)
 
 

使用例

 
 

スポンサーリンク

まとめ

<table>タグは、その範囲が表であることを表すときに使用します。
 
 

博士
次回は、<tr>タグについて解説するぞ。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








tableタグとは?|HTMLで表(テーブル)を作成しよう