HTML5でテーブル

HTMLHTML5

HTML5でテーブル

 状態:不明  閲覧数:3,784  投稿日: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ファイル自身になる



週間人気ページランキング / 4-30 → 5-6
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 8
2 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 6
3 ChromeブックマークURL重複検出が出来ない / 仕様変更に伴いURL重複登録できなくなった | Chromeブックマーク(ブラウザ) 5
4 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 4
4 16進数カラーコード / 2進数 4
5 画像ライセンスは大きく3種類に分かれる。「All rights reserved」+「クリエイティブ・コモンズ・ライセンス」+「その他」 | 画像著作権(画像) 3
5 鉄道会社毎のカラーコード | カラーコード(色) 3
5 「Google Chrome」ブックマークをフォルダー単位で、「ドメイン毎」「追加日昇降順」に並べ替える拡張機能「Sortmark」 | Chrome 拡張機能 3
5 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 | 画像 3
6 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 2
6 「Bootstrapデザイン」✕「円グラフ」解析 | 2系(Bootstrap) 2
6 RGBの種類 / ビットカラー | RGB(色) 2
6 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 2
7 CSS Flexible Box Layout Module Level 1 | Flexible Box Layout Module(CSS) 1
7 直前の要素、直後の要素 | CSS 1
7 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 1
7 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 1
7 JavaScript in Bootstrap | 2系(Bootstrap) 1
7 「東京都」のカラーコード取得は難しい | カラーコード(色) 1
7 HSL → RGB 計算方式の違い | 色変換(色) 1
2025/5/7 1:01 更新