HTML5でテーブル

HTMLHTML5

HTML5でテーブル

 状態:不明  閲覧数:3,840  投稿日: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-4 → 7-10
順位 ページタイトル抜粋 アクセス数
1 鉄道会社毎のカラーコード | カラーコード(色) 12
2 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 10
3 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 9
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 8
4 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 8
4 RGBの種類 / ビットカラー | RGB(色) 8
4 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 8
5 RGB ⇔ Lab | 色変換(色) 6
6 空間的 / 可逆な JPEG ファイルの読み込みは実行されません | Photoshop CS3(Photoshop) 5
7 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 4
7 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 4
7 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 4
8 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 3
8 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 3
8 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 | 画像 3
8 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 3
8 16進数カラーコード / 2進数 3
8 「Google Chrome」ブックマークをフォルダー単位で、「ドメイン毎」「追加日昇降順」に並べ替える拡張機能「Sortmark」 | Chrome 拡張機能 3
8 効果を打ち消すスタイルシート | CSS 3
8 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 3
2025/7/11 1:01 更新