HTML5でテーブル
状態:不明
閲覧数:4,260
投稿日:2012-01-05
更新日:2012-01-07
HTML5環境でのテーブル組成について調べた際のメモ
昔からよく分からなかったテーブル。
ホームページビルダーから始めたためか知らないが、
何か適当に作っても表示されてたので、これまであまり気にしたことはなかった。
が、今日、動的にテーブル組成する際、
動的なので、
後で、作り直すの面倒だと思い、
意を決して調べてみた。
参考にしたのは、ここ。
▽<table>－HTML5タグリファレンス
＞■HTML4.01からHTML5へのバージョンアップによる変更点
＞table要素には、HTML4.01ではborder属性・cellpadding属性・cellspacing属性・frame属性・rules属性・width属性が用意されていました。 HTML5ではこれらの属性は廃止され、summary属性のみが残されています
▽Webの道草 HTML5
愛すべき「cellpadding属性・cellspacing属性」どころか、「border属性」まで廃止されているのには、驚いた。え？ width属性も廃止なの？
どうやって、幅調整すんの？
とか思ったよ。
あー、でも、多分、ここで言ってるのは、<table>タグについてだから、<td>タグとかには、普通にwidth指定してもよいと思われ。
で、
<caption>とか、<colgroup>とか、見慣れないのが出てきたのね、
って思ったら、
<colgroup>とかって、IE4時代からあったのね。
全然知らなかったオレって一体…。
後、せっかくなので、これまでほとんど(というか一度も)使ってことのない、<tfoot>とか使ってみたよ。
頭を整理する意味で、ベース形を書き出してみたら、
すんなりうまくいったよ。
<table>
<caption>人気ページランキング</caption>
<thead>
<tr>
<th>順位</th>
<th>ページタイトル抜粋</th>
<th>アクセス数</th>
</tr>
</thead>
<tbody>
<tr>
<td>samerank($data[$i][hits])</td>
<td>"[url=.$data[$i][resource].]".$data[$i][title]."[/url]"</td>
<td>$data[$i][hits]</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>date("Y/n/j G:i 更新")</td>
<td></td>
</tr>
</tfoot>
</table>
<colgroup>については、これから、レイアウト微調整する段階で試してみるかもしれない。
1/7
デザイン調整した際、<colgroup>について調べたのでメモ。
<pre class="code"><code>
<table>
<caption>人気ページランキング</caption>
<colgroup class="rank" span="1"></colgroup>
<colgroup class="title" span="1"></colgroup>
<colgroup class="access" span="1"></colgroup>
<thead>
<tr>
<th class="rank">順位</th>
<th class="title">ページタイトル抜粋</th>
<th class="access">アクセス数</th>
</tr>
</thead>
<tbody>
<tr>
<td class="rank">samerank($data[$i][hits])</td>
<td class="title">[url=.$data[$i][resource].]".$data[$i][title]."[/url]</td>
<td class="access">$data[$i][hits]</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>date("Y/n/j G:i 更新")</td>
<td></td>
</tr>
</tfoot>
</table>
</code></pre>
colgroup要素のspan属性には、特別な意味があるみたい
▽HTMLタグ/テーブルタグ/列をグループ化する - TAG index Webサイト
＞グループ化する列数は、colgroup要素のspan属性で指定するか、colgroup要素の中にcol要素を配置して指定
▽CSS - colgroup要素に有効なプロパティ | Try | d-spica
＞colgroupにtext-alignは効かない
＞th，tdはcolgroupの子孫要素ではない
＞th，tdはcolgroupの子孫要素ではないので，colgroupに指定したtext-align，font-weight，colorなどの値はth，tdに継承されないはず。
＞colgroupは内容を持たないただの領域。これが列として並んだ複数のセルと重なっているだけ
昔からよく分からなかったテーブル。
ホームページビルダーから始めたためか知らないが、
何か適当に作っても表示されてたので、これまであまり気にしたことはなかった。
が、今日、動的にテーブル組成する際、
動的なので、
後で、作り直すの面倒だと思い、
意を決して調べてみた。
参考にしたのは、ここ。
▽<table>－HTML5タグリファレンス
＞■HTML4.01からHTML5へのバージョンアップによる変更点
＞table要素には、HTML4.01ではborder属性・cellpadding属性・cellspacing属性・frame属性・rules属性・width属性が用意されていました。 HTML5ではこれらの属性は廃止され、summary属性のみが残されています
▽Webの道草 HTML5
愛すべき「cellpadding属性・cellspacing属性」どころか、「border属性」まで廃止されているのには、驚いた。え？ width属性も廃止なの？
どうやって、幅調整すんの？
とか思ったよ。
あー、でも、多分、ここで言ってるのは、<table>タグについてだから、<td>タグとかには、普通にwidth指定してもよいと思われ。
で、
<caption>とか、<colgroup>とか、見慣れないのが出てきたのね、
って思ったら、
<colgroup>とかって、IE4時代からあったのね。
全然知らなかったオレって一体…。
後、せっかくなので、これまでほとんど(というか一度も)使ってことのない、<tfoot>とか使ってみたよ。
頭を整理する意味で、ベース形を書き出してみたら、
すんなりうまくいったよ。
<table>
<caption>人気ページランキング</caption>
<thead>
<tr>
<th>順位</th>
<th>ページタイトル抜粋</th>
<th>アクセス数</th>
</tr>
</thead>
<tbody>
<tr>
<td>samerank($data[$i][hits])</td>
<td>"[url=.$data[$i][resource].]".$data[$i][title]."[/url]"</td>
<td>$data[$i][hits]</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>date("Y/n/j G:i 更新")</td>
<td></td>
</tr>
</tfoot>
</table>
<colgroup>については、これから、レイアウト微調整する段階で試してみるかもしれない。
1/7
デザイン調整した際、<colgroup>について調べたのでメモ。
<pre class="code"><code>
<table>
<caption>人気ページランキング</caption>
<colgroup class="rank" span="1"></colgroup>
<colgroup class="title" span="1"></colgroup>
<colgroup class="access" span="1"></colgroup>
<thead>
<tr>
<th class="rank">順位</th>
<th class="title">ページタイトル抜粋</th>
<th class="access">アクセス数</th>
</tr>
</thead>
<tbody>
<tr>
<td class="rank">samerank($data[$i][hits])</td>
<td class="title">[url=.$data[$i][resource].]".$data[$i][title]."[/url]</td>
<td class="access">$data[$i][hits]</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>date("Y/n/j G:i 更新")</td>
<td></td>
</tr>
</tfoot>
</table>
</code></pre>
colgroup要素のspan属性には、特別な意味があるみたい
▽HTMLタグ/テーブルタグ/列をグループ化する - TAG index Webサイト
＞グループ化する列数は、colgroup要素のspan属性で指定するか、colgroup要素の中にcol要素を配置して指定
▽CSS - colgroup要素に有効なプロパティ | Try | d-spica
＞colgroupにtext-alignは効かない
＞th，tdはcolgroupの子孫要素ではない
＞th，tdはcolgroupの子孫要素ではないので，colgroupに指定したtext-align，font-weight，colorなどの値はth，tdに継承されないはず。
＞colgroupは内容を持たないただの領域。これが列として並んだ複数のセルと重なっているだけ