PageTAKA's blog

写真、PC、ネット、岡山の話題をお届けします

原発ゼロをめざす岡山アクション○毎週金曜日お昼12:15から中国電力岡山支社周辺(岡山市北区内山下1-11-1)○連絡先:岡山県労会議内の実行委員会、086-221-0133

HTML5:レイアウトにtableタグを使わない方向

4日から小学校区連合町内会のWEB担当になりました。これまでさまざまな方々が積み上げてこられたHTMLファイルを見ています。

古典的な課題ともいえる「レイアウトにテーブルタグを使わない」という方向性で努力しているんですが、現実という吹雪に身が縮こまっている爺です。

<table>
    <tr><td>あいうえお </td><td>かきくけこ</td>
    <tr><td>あいうえお</td><td><br>
    <tr><td>あいうえお</td><td><br>
    <tr><td>あいうえお</td><td></td>
</table>

上のテーブルタグは、実際のHTMLから資料部分を「あいうえお」「かきくけこ」になおし、タグ属性を省略したうえで、一部を抽出しました。

素のタグが読める方が見ると、これが不完全な用法というのがお分かりかと思います。
閉じタグ2種類

</tr> </td>

が何か所かで使われてないのです。代わりに「改行タグ」

<br>

が挿入されているように見えます。
「省略可能なので、そうしている」と見ることもできます。「改行タグ」がセル内文書の改行に使われている場合もあり、一義的使用ではないためテキスト・エディタによる「検索」「置換」機能を使う際に制約を受けるんですよ…(´;ω;`)ウッ…。

標準的な書き方だと正規表現をつかった書き直しがしやすいのだが…

現在、サイト全体を調整中で、旧来のHTMLタグの使い方を可能な限りシンプルにしようと書き直し検討中です。
ファイルの数はサイト内で10000を超えます。これらの構成を読み解き、不要ファイルなどを整理しつつ、シンプルにする作業は、かなり難航しそうです。
まったく齟齬なく「完成」するとも思えませんが、先輩諸兄の努力の結果をより世間に届きやすいようにしようかと…。
HTML4レベルでOKだから、「標準的」タグ使いをしたファイルであれば、書き直しもある程度見通しが良いのですが、このページのはじめに紹介したような書き方だと、かなり面倒であります…。

正規表現」を久方ぶりにある程度「本気」で使っております。HTMLソースを見ると、その作者の力量とか品性とかが見えてくるような気がするのは考えすぎでしょうか。

FTPによるUP失敗の残骸がサイトの第一階層に一定量あったりすると、少しチカラが萎えたりする爺でありました…。

HTML5の世界ではテーブルタグをレイアウトに使わないことが推奨されている

爺、15年くらい前までレイアウトにtableタグをしっかり使ってました。スタイルシートCSS)がまだ十分でなく、使いにくかったということもありました。
tableタグを使うとレイアウトには便利なんですけど、やたらと冗長なHTMLができあがり、資料部分(表示テキストなど)より、タグ部分が多い(表示時には見えないが)ということになりがちです。
tableタグを多用したHTMLファイルはその性質上、低速なネットの時代には表示が遅くなる、という問題に直面してもいました。tableタグ読み込みが終わるまで表示されない、ということらしいです。
スマホの時代になって通信量が通信料に直結しだすと「装飾」「レイアウト」はよりシンプルにしようという流れが強いようにも思います。
CSSで解決できるものはそのようにしようということにもなります。

table tr td などのタグはレイアウトに使わない…。