※thead要素、tbody要素、tfoot要素の部分を追記、修正しました。（2014年8月10日）
そういえば、2007年ごろまでは、トライデントコンピュータ専門学校でもテーブルレイアウトでWebデザインを教えていましたが、最近はCSSレイアウトになり表制作以外ではtable要素も使う機会がなくなりました。
いまでは表制作は、もっぱらCMS備え付けのビジュアルエディタやオーサリングツールを使ってしまって、逆に苦手意識すらあります。さらにHTML5では廃止される予定の属性もあるということで、サクッと調べてみました。
ちなみに今日は台風11号が来ています。
W3Cの仕様書には、
table要素はテーブル形式で、複数の寸法を持つデータを表す。
テーブルは、行、列、およびその子孫によって与えられるセルを持つ。
行と列はグリッドを形成する。テーブルのセルは完全に重複することなく、グリッドをカバーしなければならない。
The table element takes part in the table model. Tables have rows, columns, and cells given by their descendants. The rows and columns form a grid; a table's cells must completely cover that grid without overlap.
と書いてあります。セルの集合体ということでしょうか。
早速、マークアップしていきましょう。
table要素の中に、テーブルの見出しとなる行を表す部分にtheadを入れます。さらにthead要素の中には行を表すためtr要素（Table Row）を入れ、その中にth要素（table herder cell）でヘッダー・セル（※は表の中でデータセルの見出しとなるセル）を入れます。
thead要素の次にテーブルのデータを表す部分にtbody要素を入れます。tbodyの中では、行にtr要素（Table Row）さらにその中のデータ・セルにtd要素（Table Data）を入れます。tr要素をtable要素の直下に入れることはHTML5ではいけないとされていますが、tr要素を直下にいれたとしてもtbody要素があるものとしてDOMが構成されます。また、表計算の合計などを入れたりする場合など、tfoot要素を追加することもできます。
tbody要素、thead要素、tfoot要素ともに必須ではありません。ただし気をつけるのは、tbody要素は、table要素の子要素として複数配置することができますが、thead要素とtfoot要素はそれぞれ１つだけ配置することしかできません。
さらに、HTML5では、tbody要素とtfoot要素の配置位置はどちらでも良いことになっています。 つまりtfoot要素をtbody要素の前に配置しても、ブラウザ上ではフッタ部分はテーブルの最後に表示されます。
table要素の中にcaption要素を入れ、そこにテーブルのタイトルや説明をいれることもできます。では、8/8現在のプロ野球セリーグの順位を入れてみましょう。
8/8現在のプロ野球セリーグ順位| 順位 | チーム名 |
|---|
| 1位 | 巨人 |
| 2位 | 阪神 |
| 3位 | 広島 |
| 4位 | 中日 |
| 5位 | ＤｅＮＡ |
| 6位 | ヤクルト |
わかやすく図で説明するとこんな感じです。
また、テーブルの構造や意味を説明するために、summary属性がいままで使われてきたのですが、HTML5からは、廃止されました。その他廃止された（もしくは廃止予定）の属性は以下の通りです。
summaryの
代替案も複数ありますが、p要素もしくはcaption要素にclass属性でsummaryを設定する方法のようです。
| table | align bgcolor border cellpadding cellspacing frame rules width |
| tbody | align char charoff valign |
| tfoot | align char charoff valign |
| td | axis abbr scope align bgcolor border cellpadding cellspacing char charoff height nowrap valign width |
| th | axis abbr align bgcolor border cellpadding cellspacing char charoff height nowrap valign width |
| thead | align char charoff valign |
| tr | align bgcolor border cellpadding cellspacing char charoff valign |
つぎに複雑な表を作成するため縦をつなげる場合は、行「row」を複数利用するということでrowspan属性に数値を入れます。横をつなげる場合は、複数の列「col」を利用するということでcolspan属性で数値を入れます。
8/8現在のプロ野球セリーグ順位| リーグ | 順位 | チーム名（colspanに2） |
|---|
| セリーグ（rowspanに6） | 1位 | 巨人 | 95試合 |
| 2位 | 阪神 | 98試合 |
| 3位 | 広島 | 97試合 |
| 4位 | 中日 | 100試合 |
| 5位 | ＤｅＮＡ | 93試合 |
| 6位 | ヤクルト | 97試合 |
さらに、テーブル内の1つ以上の列をグループにすることができるcolgroup要素ついて。colgroup要素の中にはcol要素のみ入れることが可能で、span属性でも指定することができます。CSSで設定すると
colgroup[span="1"]{
border-left: 3px solid red; //span="1"の列の左に赤い線をいれる
}
col.team{
background-color: #ccccff; // class="team"の列の背景色を#ccccff;
}
col.gamelength{
background-color: #ffcccc; // class="team"の列の背景色を#ffcccc
}8/8現在のプロ野球セリーグ順位| リーグ | 順位 | チーム名 |
|---|
| セリーグ | 1位 | 巨人 | 95試合 |
| 2位 | 阪神 | 98試合 |
| 3位 | 広島 | 97試合 |
| 4位 | 中日 | 100試合 |
| 5位 | ＤｅＮＡ | 93試合 |
| 6位 | ヤクルト | 97試合 |
のようになります。
また、table要素の
デフォルトCSSの設定（http://www.w3.org/TR/html-markup/table.html）は、
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}のため、borderで線を設定すると各セルの間にスペースができてしまいます。reset.cssやnormalize.cssで、
table{
border-collapse: collapse;
border-spacing:0;
}のように上書きして使用します。
ということで、table要素についてサクッと調べてみました。tableをレスポンシブ対応させるなんて記事（
レスポンシブウェブデザイン案件でtableの見た目を大きく変える｜clear sky source）もありますので、まだまだ奥は深そうです。
今日は「
名古屋マークアップ勉強会 8/9」に参加してブログを書いていました。他の参加者の方も自分たちでテーマを決めて作業をされていて、最後に成果を発表して意見交換ができて、とても勉強になりました。次回は9月の半ばに開催されるそうなので「ここのマークアップはどう書くのだろう？CSS3のアニメーションってどう？」なんて思っている人は参加してみるといいと思います。
では、台風11号はも迫ってきましたので、皆さんお気をつけください。
