表

Revised: 4th/June/2002; Since: 29th/May/2002

前節の箇条書のほかに、表のための要素タイプも用意されています。まとまりのある内容を、コンパクトに表現できる優れた要素であり、これを表現する要素タイプは table 要素です。本節では表を記述します。

サンプルの準備

本節でも、前節で編集した index.html を引き続いて使います。用意ができていない方は、ソースをテキストエディタに貼り付けて、ファイル名を index.html にして保存してください。文字コードが選べる場合は、シフトＪＩＳ (Shift_JIS) を選んでください。

次のように表示されれば成功です：

図：index.html の表示例

サンプル

index.html をテキストエディタで開きましょう。

dl 要素の説明の項の次に、次のソースを挿入します。

<h3>table 要素</h3>

<p>英米の文書では、文字列のインデントをそろえて、碁盤目状に並べたものを
テーブルと呼びます。テキストでテーブルを実現するための tab キーが、現在
のＰＣ用キーボードでも残っています。 HTML でテーブルを実現する要素が
table 要素です。</p>

<table summary="第一列目は要素名。第二列目は説明。" border="1">
<caption>table 要素の構成要素</caption>
<tr>
    <th>table</th>    <td>ブロックレベル要素。テーブル全体</td>
</tr>
<tr>
    <th>caption</th>  <td>table 要素の子要素。テーブルの題</td>
</tr>
<tr>
    <th>tr</th>       <td>table 要素の子要素。テーブルの行</td>
</tr>
<tr>
    <th>th</th>       <td>tr 要素の子要素。行の見出しセル</td>
</tr>
<tr>
    <th>td</th>       <td>tr 要素の子要素。行のデータ・セル</td>
</tr>
</table>

記述できたら、「上書き保存」してください。

index.html をブラウザで開いて確認しましょう。

次のように表示されれば成功です：

図：index.html の表示例

table 要素

table 要素は複雑です。ここでは上記サンプルで使った範囲に絞って紹介します。これだけでも十分事足りるはずです。

最も簡単なテーブル

テーブルは行と列で把握します。横書きに行 (row) があり、セルで区切られています。行は tr 要素で表し、データセルは td で表します。

ソース

表示例

<table>
<tr>
    <td>(0, 0)</td>  <td>(0, 1)</td>  <td>(0, 2)</td>
</tr>
<tr>
    <td>(1, 0)</td>  <td>(1, 1)</td>  <td>(1, 2)</td>
</tr>
<tr>
    <td>(2, 0)</td>  <td>(2, 1)</td>  <td>(2, 2)</td>
</tr>
</table>

(0, 0)	(0, 1)	(0, 2)
(1, 0)	(1, 1)	(1, 2)
(2, 0)	(2, 1)	(2, 2)
(2, 0)	(2, 1)	(2, 2)

セルの見出し

セルにはデータが入りますが、その見出しを th 要素で特別に扱うことが出来ます。td 要素と th 要素の内容は任意のものが記述できます。箇条書き、段落、表、画像、何でもＯ．Ｋ．です。

ソース

表示例

<table>
<tr>
    <th>(0, 0)</th>  <td>(0, 1)</td>  <td>(0, 2)</td>
</tr>
<tr>
    <th>(1, 0)</th>  <td>(1, 1)</td>  <td>(1, 2)</td>
</tr>
<tr>
    <th>(2, 0)</th>  <td>(2, 1)</td>  <td>(2, 2)</td>
</tr>
</table>

(0, 0)	(0, 1)	(0, 2)
(1, 0)	(1, 1)	(1, 2)
(2, 0)	(2, 1)	(2, 2)

ボーダーの表示

デフォルトでは、表やセルの罫線はなしです。表示するときは、ＣＳＳを使うと良いのですが、 HTML でも table 要素の border 属性で指定できます。

ソース

表示例

<table border="1">
<tr>
    <th>(0, 0)</th>  <td>(0, 1)</td>  <td>(0, 2)</td>
</tr>
<tr>
    <th>(1, 0)</th>  <td>(1, 1)</td>  <td>(1, 2)</td>
</tr>
<tr>
    <th>(2, 0)</th>  <td>(2, 1)</td>  <td>(2, 2)</td>
</tr>
</table>

(0, 0)	(0, 1)	(0, 2)
(1, 0)	(1, 1)	(1, 2)
(2, 0)	(2, 1)	(2, 2)

border 属性の属性値はボーダーの太さをあらわします。次は、 border="5" の例です。

ソース

表示例

<table border="5">
<tr>
    <th>(0, 0)</th>  <td>(0, 1)</td>  <td>(0, 2)</td>
</tr>
<tr>
    <th>(1, 0)</th>  <td>(1, 1)</td>  <td>(1, 2)</td>
</tr>
<tr>
    <th>(2, 0)</th>  <td>(2, 1)</td>  <td>(2, 2)</td>
</tr>
</table>

(0, 0)	(0, 1)	(0, 2)
(1, 0)	(1, 1)	(1, 2)
(2, 0)	(2, 1)	(2, 2)

キャプション

表題を指定するには caption 要素を使います。caption 要素にはテキストレベルのものしか記述できません。

ソース

表示例

<table border="1">
<caption>簡単な表</caption>
<tr>
    <th>(0, 0)</th>  <td>(0, 1)</td>  <td>(0, 2)</td>
</tr>
<tr>
    <th>(1, 0)</th>  <td>(1, 1)</td>  <td>(1, 2)</td>
</tr>
<tr>
    <th>(2, 0)</th>  <td>(2, 1)</td>  <td>(2, 2)</td>
</tr>
</table>

簡単な表
(0, 0)	(0, 1)	(0, 2)
(1, 0)	(1, 1)	(1, 2)
(2, 0)	(2, 1)	(2, 2)

多段組

HTML による多段組

table 要素を使えば、ブラウザ画面を多段に組み版することができます。但し、望ましい使い方ではありません。

<table border="1">
<tr>
<td>
	<h1>Servlet 入門</h1>
	<h2>サーブレットとは何か</h2>
	<p>サーブレットとは、Web サーバ上で稼動する小さな Java プロ
	グラムです。サーブレットをインストールするサーバのことをアプ
	リケーション・サーバと呼び、多くの場合は HTTP サーバとマシン
	を分けて、バックエンドとして構成します。規模が小さければ、一
	つのマシン上でアプリケーションサーバが HTTP サーバの働きも兼
	ねます。</p>
	<h2>Apache Tomcat</h2>
	<p>HTTP サーバでは Apache という製品が有名です。 Apache
	Software Foundation という組織がオープン・ソースで開発して
	います。この組織が開発しているアプリケーション・サーバが
	Tomcat であり、Apache Tomcat と呼ばれます。 HTTP サーバの
	バックエンドとしても、HTTP サーバとしても使えます。</p>
	<p>Windows 版も公開されています。ここでは、ウェブ上からダ
	ウンロードして、実験のためにスタンドアローンで起動してみま
	す。</p>
</td>
<td>
	<p>【目次】</p>
	<ol>
		<li>Java 入門</li>
		<li>開発ツールの導入と構成</li>
		<li>JDBC 入門</li>
		<li>MySQL の導入と構成</li>
		<li>Servlet 入門</li>
		<li>Tomcat の導入と構成</li>
		<li>JSP 入門</li>
		<li>Java Beans 入門</li>
		<li>資料</li>
	</ol>
</td>
</tr>
</table>

上記サンプルを、適当な HTML ファイルの body 要素内に貼り付け／保存してください。

次のように表示されれば成功です：

図：table.html の表示例

ここでは、表であることを目で見て分かるように、 border="1" を指定しましたが、実際は指定しないで結構です。改行位置、セルの大きさなど、細かい見栄えはあとで CSS で調整します。

ブラウザは、 table の上の行の左のセルから順番に、右から左、下から下と読み込んで解釈していきます。そのため、表組み機能を持たないテキストブラウザや音声ブラウザでは、左上端のセルが最初に出力され、それに続いて右のセルが表示されます。続いて、その右にセルがあればそれが表示され、次の行があればまた左端から順番に横方向に出力されていきます。

CSS による多段組

上に挙げたような、シンプルなテーブルによるレイアウトは許容範囲ですが、テーブルがネスとするような、複雑な場合は許容できません。テーブルは表を表現する要素タイプであって、レイアウトするためのものではないからです。シンプルな場合は、セルの順番のシリアライズが容易ですが、複雑な入れ子状になると、どのセルを先に読むべきか決定できなくなります。見栄え上は常識的に判断できても、音声読み上げ式のブラウザなどでは、深刻な問題を引き起こします。

CSS を使って、多段組の表示を無理なく実現できます。

構造化を意識した HTML

CSS は基本的に、HTML 文書の要素をノードとする木構造に対して、レンダリング特性を明示する仕組みです。CSS も HTML と同様に単なるテキストで、正しく書かれた HTML 文書であれば、適切にレンダリング方法を指定できます。

ここでは、HTML 文書のブロックレベル要素を、div 要素を使って意味的に区分してみましょう。具体的には、本文である要素の集合を div class="main"、メニューの要素の集合を div class="menu" とします。

<div class="main">
	<h1>Servlet 入門</h1>
	<h2>サーブレットとは何か</h2>
	<p>サーブレットとは、Web サーバ上で稼動する小さな Java プロ
	グラムです。サーブレットをインストールするサーバのことをアプ
	リケーション・サーバと呼び、多くの場合は HTTP サーバとマシン
	を分けて、バックエンドとして構成します。規模が小さければ、一
	つのマシン上でアプリケーションサーバが HTTP サーバの働きも兼
	ねます。</p>
	<h2>Apache Tomcat</h2>
	<p>HTTP サーバでは Apache という製品が有名です。 Apache
	Software Foundation という組織がオープン・ソースで開発して
	います。この組織が開発しているアプリケーション・サーバが
	Tomcat であり、Apache Tomcat と呼ばれます。 HTTP サーバの
	バックエンドとしても、HTTP サーバとしても使えます。</p>
	<p>Windows 版も公開されています。ここでは、ウェブ上からダ
	ウンロードして、実験のためにスタンドアローンで起動してみま
	す。</p>
</div>
<div class="menu">
	<h1>目次</h1>
	<ol>
		<li>Java 入門</li>
		<li>開発ツールの導入と構成</li>
		<li>JDBC 入門</li>
		<li>MySQL の導入と構成</li>
		<li>Servlet 入門</li>
		<li>Tomcat の導入と構成</li>
		<li>JSP 入門</li>
		<li>Java Beans 入門</li>
		<li>資料</li>
	</ol>
</div>

div 要素は、ブロックレベルの要素をグループ化するためのものなので、それ自身では意味を持ちません。グループ化した意味を、class 属性の値で明示します。

図：table2.html の表示例

'`position`' による多段組

CSS で、要素の位置を絶対値で指定できます。ここでは、head 要素の子要素に style 要素を追加して、その内容に次のように記述してみます。

div.main { position: absolute;
	left: auto; top: auto; right: auto; bottom: auto;
	width: 400px }
div.menu { margin-left: 430px }

div class="main" は、幅 400px で固定され、div class="menu" は、左からの余白を　430px とって表示されます。div class="menu" を右に 430px ずらして、その間に div class="main" を挿入した格好です。

図：table3.html の表示例

上手くそろわない場合は、ブラウザのデフォルト値が邪魔をしている可能性があります。全て要素に対してマージンとパッディングを 0 に指定してみたください。div だけでなく、その最初の子要素の指定が影響している可能性もあるので、全ての要素に対して指定するのがお勧めです。

* { margin: 0; padding: 0 }

ボーダーの有無が位置決めに影響を及ぼすこともあるので、ボーダーを指定するのも有効です。

* { border: 1px solid  transparent }

図：table31.html の表示例

デフォルトでとられていたマージンとパッディングが 0 になるので、各要素間の余白が非常に詰まったものになります。個別の要素に対して適切な余白／詰め物を指定する必要があります。一般的な文書中で使用される要素タイプの個数は案外少ないので、思ったよりも楽な作業になるでしょう。W3C が公開しているデフォルトの CSS が参考になります。

'`float`' による多段組

div を浮動化することによっても実現できます。

次のようにすると、div class="main" は左に浮動化され、右側に後続の div class="menu" が回り込みます。

div.main { float: left }

div class="main" の高さが終了すると、回り込んでいた内容が、div class="main" の下に回りこんで新しく行を続けることになります。

div class="main" の高さが終わっても、右側に回りこんだ要素を、下側に回りこませたくない場合（右側に回りこんだ要素の左端をそろえたい場合）は、右側に回りこむ要素も左に浮動化します。

また、先の position="basorute" による例と同様の表示方法を実現するために、div class="main" の幅を 400px に指定することにし、div class="menu" の左側の余白に 30px とります。

div.main, div.menu { float: left }
div.main { width: 400px }
div.menu { margin-left: 30px }

図：table4.html の表示例

CSS を使えば、 HTML ではできない、豊富な表現方法を明示的に指定できます。詳細は、CSS 入門を参照してください。

表

サンプルの準備

サンプル

table 要素

最も簡単なテーブル

セルの見出し

ボーダーの表示

キャプション

多段組

HTML による多段組

CSS による多段組

構造化を意識した HTML

'position' による多段組

'float' による多段組

'`position`' による多段組

'`float`' による多段組