<IT情報・ホームページ編> IT情報TOPヘ

html5時代の表の作成法

(2018年4月23日 改定)

 従来からtableの利用目的は2つありました。1つはページのレイアウトを tableでする「tableレイアウト」目的です。ところで、このtableレイアウトはhtml5から、明示的に使用不可となりました。従って、このページでは tableレイアウトについては触れません。
 もう一つは統計表など一般的な「表そのもの」です。ここではこの「表そのもの」の作り方について述べることにします。ところで、html5からtableに使える属性は基本的にはなくなり、素人の我々にとって表作成の手順は大幅な修正を余儀なくされました。tableの外枠やセル枠の装飾、あるいは表やセルの寸法などは全てCSSを使ってしなさいということです。
 このページでは html4.01とhtml5 に共通の表作成の基本的な手法を述べ、次に html5 時代の表作成の考え方を述べることにします。


<従来の一般的な表の作り方>
 初心者の表作成は一般には、ホームページビルダー(以降HPBと略します)の「ページ編集」タブでします。マウスでセル枠を横や縦ににドラッグすれば、「width=”xxx”」や「height=”xxx”」と値を自動的に決めてくれます・・・。
 ただ、HPBでの作表で大切なコツは、作表中に「マウスに触らない」ことです。マウスでセル枠をドラッグすると、widthとheightの値が勝手に入力されてしまいます。多くのセルに値が入ると作表が難しくなる上に、削除するのも面倒です。

 実際の表作成は、まず表全体の幅を最初に決めて、次にセルの幅をその内容量に応じて指定していきます。 セルの高さ(height)は内容の高さに応じて自然に決まることを経験的に知っていますから、一般には指定しません。表全体の高さはセルの高さの合計で決まりますから、この値も指定しません。
 高さ指定に比べて幅指定(width)、特にセル幅の指定は難しいことが多々あります。表のセル幅はその列の最も横幅の大きい内容のセルで決まります。上段でセル幅を指定しても、下段のセルの内容が大きいときはこの上段の指定幅にならず、列幅の指定がややこしくなることがあります。

 そこでセル幅の指定は表全体を眺めて、その列の最も横幅の大きい内容に合わせて幅指定をします。かつ、最上段の行のセルのみに幅指定をして、幅指定のセルの数を少なくするようにも工夫します。
 また、表全体の幅とセル幅の合計値の関係は、正確には『表全体の幅=セル幅の合計値+枠線幅とセル間スペースの合計値』になるはずですが、細かい計算はしないで、ほぼ『表全体の幅=セル幅の合計値』として作られた表も多くみられます。

<widthの自動算出>
 私は新しい表を作るとき、一般にセルの高さ(height)は指定しません。高さは内容の高さに応じて自然に決まることを経験的に知っていたからです。ただ、最近までセルの幅(width)は、ほとんどのセルで指定してきました。セル幅は指定しなければ表にならないと思っていたからです。
 こんなとき、セル幅の指定に関して面白い情報を入手しました。表を作る際に、セル幅の指定は必ずしも要しないという事実です。例えば、tableの全体幅を指定した上でセル幅を指定せずに、画像を横に並べるだけで、画像がtable幅全体に均一な空間を隔てて自動的に並ぶ現象です。下図はその1例で、表の全体幅に画像が均等に按分されています。もちろん、画像幅がまちまちでもセル幅の指定は不要です。
 
 また、下図は文字列を含む表の例で、セル幅は指定していませんが、セル幅はその最大内容を基準にしてきれいに按分されています。
 

<セル幅を自動按分するtable-layoutプロパティ>
 セル幅の指定をしないとき、このこのようにセル幅を自動的に按分する振る舞いは、「table-layout」というCSSプロパティがしています。このプロパティの存在を、多分多くの人は知らないのではないでしょうか。
 それには少し訳があります。ここで、セル幅をほどよく自動按分する table-layoutプロパティについて少し説明します。このプロパティは、次の2つの値のいずれかを取ります。いずれの場合もセルの高さは自動的に算出されます。
auto(初期値):(ブラウザはtable全体を読み込んだ後に表示を開始する)
 その際、セルの内容量に応じてセル幅を自動的に割り当てる。必要なセル幅は指定可。
fixed:(ブラウザは最初の一行目を読み込んだ時点で表示を開始する)
 その際、幅指定のないセル幅は残りの幅を均等に割り当てる。必要なセル幅は指定可。
 table-layoutプロパティは元々回線速度が遅い時代に、上図の( )内に記すように、テーブルの表示速度を速くする目的で作られたプロパティです。今となっては時代遅れの規定ですが、その付録みたいなセル幅の表示方法の規定が今役立っています。
 この 「table-layout の初期値はauto」です。従って、CSSに「table-layout: auto;」の指定をしなくても、この機能は html 全体に反映される仕組みになっています。ということで、多くの人はこのプロパティの存在に、気がついていないと思います。ただ、この事実を表作成に利用しない手はありません。今後の表の作成を極めて容易にするはずです。
 ただ、意識して「table-layout: fixed;」を指定したい場合もあります。それは列幅を指定したセル以外のセルに、残りの幅を均等に割り当てたいときです。 

<widthとheightを指定しない表の作り方>
 新しい表を作るときは、tableには常に「table-layout: auto;」が働いていることを意識しておきます。この事実を意識することで、表作成がきわめて容易になり、一般にセル幅がきれいに按分された表ができ上がります。
 セルに納めるデータ幅が前々項の表のように短かい場合の作表は、まず表幅を指定し、セル幅は指定せずに作業を進めます。空セルの幅は等分されており、そこにデータ(文字列や画像など)入れていきます。
 この結果、次のような法則で表が作られます。その上で、特定のセルは意図的に幅を指定してもOKです。ただ、セル幅を指定する場合でも、指定は原則として最上段の行だけにします。
・セルに文字列や画像を入れると、セル幅はそのデータ量により自動的に按分されます。
・2行以上にわたる表では、セル幅はその列の最も内容の大きいセルにより決まります。
・2行2列以上の表では、最大幅の内容があるセル幅の行で自動的に按分されます。

 改行がなく何行にも亘る長い文章があるセルを含む表を作る場合もよくあります。こんなときもセル幅の指定は最上段の行だけにして、次のように指定します
・まず、表幅を先に指定します。ただし単位はpx」とします。
・改行のない長い文章を含むセルに幅指定をします。ただし単位は%」とします。
・それ以外のセルはすべて幅指定をしません。
 上記のセル幅を規定する単位ですが、他のブラウザ Internet Explorer・Chrome・Firefox・Safari では、「px」でも「%」でも表を正常に表示します。Microsoft Edgeだけが、単位に「px」を指定すると表が崩れてしまいます。Microsoft Edgeは「table-layout: auto;」で、値「auto」の単位が「px」に対応できていないようです。

<W3Cのtable関連の規定の経緯>
 さて、ここでW3Cのhtmlに関する歴史を簡単にたどってみます。html4.01(1999.12.24勧告)の規定の主要テーマは、文書構造と見栄えの分離(Separate structure and presentation)でした。特に視覚系の見栄えをよくする要素や属性は「非推奨」(deprecated)となり、これらはスタイルシート(CSS)を使用することを推奨しました。
 W3Cは2002年に3列CSSレイアウトの手法を例示して、tableレイアウトは使用しないことを推奨しました。これを受けて実際のホームページは、2007年頃を境にしてプロが作るもののほとんどはCSSレイアウトになってしまいました。
 さらに、最近勧告された html5(2014.10.28勧告)で特記すべきことは、tableレイアウトの不使用(Tables should not be used as layout aids.)を明記し、かつ多くのタグが「廃止」(obsolete)され、一方で実用的な新しいタグ(素人には少し難しい?)が増えました。

<html5のtableの規定>
 html4.01で非推奨であったタグと属性を含めて、多くの人が今までよく使ってきた width・height・align・valign・padding・cellspacing などの属性は、html5からはすべて廃止になり使えません。
 新しいhtml5辞典には、これら廃止された属性の記載もなくなりました。ただし、ブラウザとしては、古いhtml規定によるページでも表示は続きます。
(注)非推奨(deprecated)と廃止(obsolete)
 html4.01の時代からtable関連で、非推奨(deprecated)のタグや属性は沢山ありました。html5からは廃止(obsolete)という強い表現で、さらに殆どのタグや属性を使用禁止にしました。
 ただ、HPBは最新版でも「HTMLソース」タブに、この廃止タグや属性を吐き出し続けています。HPBは便利なツールですが、このような事実も考えて使う必要があります。
 このhtml5のtableで使用できる属性はborderのみとなり、しかもborder="1"(border="" も同じ意)の指定しかできません。ここで、DOCTYPE宣言を<!DOCTYPE html>(html5の宣言)として、<table border="1"> で表を作ってみます。この指定では下図のように、外枠とセル枠の線幅が1pxで、セル間隔が2pxの表になります。このセル間隔2pxはデフォルト値です。
  
 さて、border="1" の規格ができた由来を少し調べてみました。そこで判ったことは、旧式のグラフィカルなブラウザの中にはCSSに対応していないものもあり、border属性がないと<table>だけではtableの枠線が表示されないことが理由のようです。
 ただ、一般の人が見るブラウザは、IE・Firefox・Chromeなどの標準ブラウザです。従って、私どもの作る一般のホームページでtableを使うときは、枠線やセル間隔などのデザインのすべてでCSSを使いなさいということのようです。

<html5での表の作成例>
 DOCTYPE宣言を<!DOCTYPE html>として、枠線の修飾にCSSを使った簡単な表をいくつか作ってみました。参考にしてください。
・<table border="1">は、IE11では下記の <table class="space2"> と同じ結果になります。
 ただし、IEを除くブラウザでは外枠線が灰色になります。
・border-colorの初期値(省略可)は、文字色に同じになります。
 下記の例では、「border: 1px solid;」は「border: 1px solid #660000;」と同じです。
・border-collapseの値は collapseとseparateのいずれかで、初期値はseparateで省略可です。
 「border-collapse: collapse;」は 細い1本の枠線になります。
 「border-spacing: 0;」とは全く異なる表示になりますから注意してください。
  


ページ
トップ