HTML5でテーブル

HTMLHTML5

HTML5でテーブル

 状態:不明  閲覧数:2,950  投稿日: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は内容を持たないただの領域。これが列として並んだ複数のセルと重なっているだけ


HTML5でページ内リンクが効かなかったら

HTML5では、action属性を省略すると、送信先はそのHTMLファイル自身になる



週間人気ページランキング / 7-26 → 8-1
順位 ページタイトル抜粋 アクセス数
1 画面キャプチャ | Chrome 拡張機能(ブラウザ) 51
2 RGB ⇔ Lab | 色変換(色) 46
3 血の色 / #b30000 / #360800 / #ff0000 | 色 31
4 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 25
5 RGBの種類 / ビットカラー | RGB(色) 24
6 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 23
7 「属性」「プロパティ」「アトリビュート」の違い | CSS 21
8 Design 0 20
9 「bgcolor」「background-color」「background」の違い | CSS 15
10 コズミックブルーが何色か分からない | 色 12
10 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 12
11 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 11
11 HSLとHSVの違い | 色変換(色) 11
12 ページ内リンクの位置を微調整するためには、Negative margin を使用する | CSS 10
13 キャラクター無料着せ替えジェネレーター Rinmaru Games / オンラインサービス | イラスト素材(デザイン) 9
13 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 9
13 アドベンチャーゲーム系の素材をどうやって用意するの? | イラスト素材(デザイン) 9
13 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 9
13 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 9
14 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 8
2021/8/2 1:01 更新