tableとは

tableの使用例［HTMLソースコード］

<table>
<caption>ホームページ作成サービス</caption>
<thead>
 <tr>
  <th>サービス</th>
  <th>内容</th>
  <th>価格</th>
 </tr>
</thead>
<tbody>
 <tr>
  <td>ホームページ作成</td>
  <td>ホームページの設計から作成まで全て</td>
  <td>○○円～</td>
 </tr>
 <tr>
  <td>コンテンツ作成</td>
  <td>画像の加工からコンテンツの作成まで</td>
  <td>○○円～</td>
 </tr>
 <tr>
  <td>SEO対策</td>
  <td>キーワードの選定からホームページの構造設計まで</td>
  <td>○○円～</td>
 </tr>
</tbody>
</table>

tableの使用方法解説

　「table要素」は、表組みを表す基本要素です。表組みとは、「縦」「横」「格子状」に並べられたセルの集合体で表す表要素です。
「table要素」は、「thead」「ｔｒ」「td」「caption」など、複数の要素の構成によって表組みを実現します。

　「table要素」は、「thead」「tr」「td」「caption」など、複数の要素の構成によって表組みを実現します。その表組みのはじまりと終わりを表すのが｢table要素」です。

｢table要素」の最小構成

　「table」には、「thead」や｢tbody」など、必ずしも使わなくてもいい要素があります。これらの要素を削ぎ落とし、必要最低限の要素で表組みを作った場合、次のようなマークアップになります。

HTMLソースコード

<table>
 <tr>
  <td>ホームページ作成会社</td>
 </tr>
</table>

　ただし、これでは表の意味がありません。表を組むからには、やはり、その表でなんらかの意味を表現したいはずです。
　その表の意味を考えれば、おのずと、ほかの要素、たとえば｢thead要素」や｢colgroup要素」などでのマークアップが理解できるでしょう。
　「thead要素」や｢colgroup要素」などは、HTMLのセマンティクスを推進させる要素でもありますが、同時に、CSSによる装飾を手助けしてくれる要素でもあります。
　各「td要素」に対して、ひとつひとつ、「id属性」や｢class属性」を与えて表示色を変更するのはとても大変な作業ですが、「thead要素」や｢colgroup要素」を正しく利用することで、一括しての行表示、または列表示を揃えることもできるのです。

「tableレイアウト」と「Excelレイアウト」のよくない関係

　1990年代後半、「table要素」をレイアウトのための要素として使うという、ある種の発明がありました。それまで、「table要素」は表組みを表わすための要素として機能していましたが、その表組み機能を逆手にとって、自由に段組みする要素として活用されはじめたのです。
　そのうち、HTMLの本質を理解しないままWebを制作することになった方の中には、「table要素」をレイアウトのための要素であると勘違いしてしまう場合もあったようです。そして、一時期、「table要素」がWeb中に氾濫しました。
　しかし、このような利用はHTMLの意味として誤った使い方であり、検索エンジン側が正しい情報を読み取ることができなかったり、読み上げブラウザなどで、正しい順番で読み上げることができないなどの支障が生じます。

　これによく似た状況として、「表計算ソフトをレイアウトに利用する」というものがあります。
　もともと、「Microsoft Excellなどの表計算ソフトは、純粋に表計算を行なうためのものでした。しかし、リッチテキスト機能や図形描画、画像配置機能などが充実し、簡易的なワープロ、あるいはレイアウトソフトとして活用してしまう利用者が現れました。
　一個人が、表計算ソフトであることを理解した上でレイアウトにも利用すること、それ自体はたいした問題ではないかもしれませんが、この影響のもとに教育をうけた者は、Excelはレイアウトソフトであると勘違いするような状況も見受けられました。
　表計算ソフト上で図形や画像を配置しただけのため、アプリケーションのバージョンが変わったり、互換ソフトで読み込むと、大きくレイアウトが崩れてしまいます。

　その場限りの一時的なブラウザレンダリング（または印刷）を狙ってのデザインは、長続きしません。いずれ、そのファイルは使いものにならなくなるでしょう。本質を理解し、要素を正しく利用することこそ、設計者たるデザイナーの役目です。