HTML5でテーブル

HTMLHTML5

HTML5でテーブル

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



週間人気ページランキング / 3-22 → 3-28
順位 ページタイトル抜粋 アクセス数
1 Design 0 42
2 LOCK: File currently in use. / マニフェストを読み込めませんでした 10
3 「line-height」効果を打ち消すスタイルシートは、「line-height:normal; 7
4 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 6
4 16進数カラーコード / 2進数 6
4 navタグで定義している部分だけCSSが効かない【html5】 | HTML5(HTML) 6
5 HLS / HSL 4
5 HTML5でiframeスクロールバーを表示しない方法が不明 | HTML5(HTML) 4
6 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 2
6 画像大きさ | 他サイト調査(HTML) 2
6 テーブル枠線がどうしても消えない時は「border-collapse: collapse;」 | Backgrounds and Borders Module(CSS) 2
6 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 2
7 Google Chrome を閉じた際にバックグラウンド アプリの処理を続行する / ハードウェア アクセラレーションが使用可能な場合は使用する 1
7 Chromeで名前を付けて保存する際、ファイルを一つにする方法 1
7 ログイン 1
7 「font-size」効果を打ち消すスタイルシートは、「font-size:100%;」? 1
7 イラスト素材 | デザイン 1
7 RGB → 色相H … 最小値基準 × 図形 の考え方 | 色変換(色) 1
7 36ビットカラー 1
7 RGBの種類 / ビットカラー | RGB(色) 1
2024/3/29 1:01 更新