プログラミング研究所

今回は、ホームページ作成で使用するHTMLタグで表を作成する方法について説明します。

表を作成するHTMLタグは、上手に使いこなすことができれば見栄えがよくなるので、今日のようにスタイルシートが浸透する前までは、ホームページ全体の体裁を整えるタグとしても使用されていました。

表を作成するHTMLタグとは言っても、表のラインを消してしまえば、表だとはわかりませんからね。

今ではページ全体の体裁を整えることはなくなりましたが、Perl/CGIなどでの情報入力フォームを整えるのにラインなしの表を使ったりする場合はあります。

1. 表作成の基本
2. 表の枠線
3. 表のセルとセルの間隔
4. 表のセルの内側の余白
5. 表の説明タグ
6. 表の大きさ
7. 外枠の指定
8. 内枠の指定タグ
9. セル内の表示位置指定
10. セルの大きさ指定
11. セルの結合
12. セル内で改行させない
13. セルの見出し

表作成の基本

HTMLで表を作成するには、tableタグ、trタグ、tdタグを使用します。

表の表示方法を細かく指定する場合は、もっとたくさんのHTMLタグを使用しますが、まずは、表を作成する上での基本的なHTMLタグは、上記三種類のタグです。

それでは、横二列で縦二行の表を作成するには以下のように書きます。

<table>
<tr>
<td>表の左上</td>
<td>表の右上</td>
</tr>
<tr>
<td>表の左下</td>
<td>表の右下</td>
</tr>
</table>

tableタグ「<table>」「</table>」は、表全体を指定するHTMLタグです。

trタグ「<tr>」「</tr>」は、行を指定するHTMLタグです。

tableタグに囲まれた部分で使用します。

tdタグ「<td>」「</td>」は、セルを指定するHTMLタグです。

trタグに囲まれた部分で使用します。

セルとは、表を作り上げている一つ一つの要素のことです。

trタグを増やせば表の行数が増えます（結果として、表が縦に長くなる）。

tdタグを増やせば列の長さが増えます（結果として、表が横に長くなる）。

このあたりが表作成の１つのポイントですので、覚えておくとよいですよ。

例えば、縦二行で横三列の表を作成する場合は、以下のように書きます。

<table>
<tr>
<td>表の左上</td>
<td>表の上中央</td>
<td>表の右上</td>
</tr>
<tr>
<td>表の左下</td>
<td>表の下中央</td>
<td>表の右下</td>
</tr>
</table>

以上のHTMLタグを組み合わせれば、基本的な表ができます。

表の枠線

borderタグを使用すれば、表の枠線の太さを指定することができます。

もちろん、表の線を消すこともできます。

<table border="5">
<tr>
<td>表の左上</td>
<td>表の右上</td>
</tr>
<tr>
<td>表の左下</td>
<td>表の右下</td>
</tr>
</table>

「border="0"」とすれば、表の枠線を消すことができます。

<戻る>

表のセルとセルの間隔

cellspacingタグを使用すると、セルとセルの間隔をピクセル数で指定することができます。

セルの間隔を調節することで、表内の枠線を太く見せたり、細く見せたりすることができます。

<table border="5" cellspacing="5">
<tr>
<td>表の左上</td>
<td>表の右上</td>
</tr>
<tr>
<td>表の左下</td>
<td>表の右下</td>
</tr>
</table>

表内の枠線を表示させるには、borderタグを使って、線の太さを指定しておく必要があります。

<戻る>

表のセルの内側の余白

cellpaddingタグを使用すると、セル内のパディング（内側の余白）を指定することができます。

<table border="5" cellspacing="5" cellpadding="5">
<tr>
<td>表の左上</td>
<td>表の右上</td>
</tr>
<tr>
<td>表の左下</td>
<td>表の右下</td>
</tr>
</table>

パッと見た感じはわかりにくいですが、デザインにこだわる人は、いろいろといじってみてくださいね。

<戻る>

表の説明タグ

summaryタグを追加すると、主に視覚障害者が使用しているウェブブラウザ（音声ブラウザ等）に対して、その表の簡単な説明（構造や概要）を伝えることができます。

音声ブラウザは、ウェブサイト上の文字情報を、音声に変換し出力しているので、複雑な表など視覚的には一目でわかるようなものでも、音声だけではその表の構造がわからず、結果として作者が意図する情報が伝わらない場合があります。

そんな場合には、表の構造や概要などを、summaryタグを使用して説明します。

<table summary="ここに説明">
<tr>
<td>表の左上</td>
<td>表の右上</td>
</tr>
<tr>
<td>表の左下</td>
<td>表の右下</td>
</tr>
</table>

この表説明のタグを使っているウェブサイトは、なかなか見ないですね。

私も使ってないです（笑）。

表の大きさ

widthタグを使用すると、表の大きさ（横幅）を指定することができます。

<table width="300">
<tr>
<td>表の左上</td>
<td>表の右上</td>
</tr>
<tr>
<td>表の左下</td>
<td>表の右下</td>
</tr>
</table>

widthタグが横幅を指定するのに対し、heightタグを使用すると、高さを指定することができますが…。

heightタグ（表の高さ）は、HTML4.01の仕様にはありません。

おそらく正式には認められていないんでしょうね～。

サイズの指定がない場合は、表の内容により自動的に調整されます。

<戻る>

外枠の指定

frameタグを使用すると、外枠の表示スタイルを指定することができます。

表示スタイルにもいろいろなパターンがあります。

void … 全ての外枠を表示しない。

lhs … 左の外枠のみ表示。

rhs … 右の外枠のみ表示。

vsides … 左右の外枠のみ表示。

above … 上の外枠のみ表示。

below … 下の外枠のみ表示。

hsides … 上下の外枠のみ表示。

box … 全ての外枠を表示。

border … 全ての外枠を表示。

void（全ての外枠を表示しない）を指定して表を作成した場合は以下のようになります。

<table border="5" frame="void">
<tr>
<td>表の左上</td>
<td>表の右上</td>
</tr>
<tr>
<td>表の左下</td>
<td>表の右下</td>
</tr>
</table>

このあたりは、ほとんど使うことはないので、なんとなく覚えておくぐらいでもよいですね。

<戻る>

内枠の指定タグ

rulesタグを使用すると、内枠の表示スタイルを指定することができます。

表示スタイルにもいろいろなパターンがあります。

none … 全ての内枠を表示しない。

rows … 内枠の横線のみ表示。

cols … 内枠の縦線のみ表示。

groups … グループの境界線のみ表示。

all … 全ての内枠を表示。

none（全ての内枠を表示しない）を指定して表を作成した場合は以下のようになります。

<table border="5" rules="none">
<tr>
<td>表の左上</td>
<td>表の右上</td>
</tr>
<tr>
<td>表の左下</td>
<td>表の右下</td>
</tr>
</table>

このあたりも、なかなか使用する機会自体がない部分ですね。

でも、こんなのがあったぐらいは、覚えておくとよいですね。

<戻る>

セル内の表示位置指定

trタグやtdタグに、alignタグや、valignタグを指定すると、セル内の文字の位置を指定できます。

alignタグは横方向、valignタグは縦方向の指定を行います。

それぞれのタグで、設定方法が異なりますので、一つ一つ説明していきます。

まずは、alignタグについて説明します。

left … 左に表示

center … 中央に表示

right … 右に表示

続いて、valignタグについて説明します。

top … 上部に表示

middle … 中央に表示

bottom … 下部に表示

後述しますが、thタグにもこの指定が行えます。

tdタグ（thタグ）ではセル単位、trタグでは行単位の指定になります。

trタグで指定を行うと、「<tr>」から「</tr>」で囲まれているtdタグを同じ設定で統一することができます。

まずは、tdタグ内のテキストを、中央表示させる設定で表を作成するには以下のように書きます。

<table>
<tr>
<td align="center" valign="middle">左上のセル</td>
<td align="center" valign="middle">右上のセル</td>
</tr>
<tr>
<td align="center" valign="middle">左下のセル</td>
<td align="center" valign="middle">右下のセル</td>
</tr>
</table>

上記の表でもよいのですが、表のセルをすべて同じ設定で表示させたい場合は、trタグ内で指定した方が見た目がスッキリします。

逆に言えば、セル内のテキスト表示位置を細かく指定したい場合は、tdタグ内で指定すればよいということになります。

同じ表ですが、今度は、trタグ内で指定した場合も書いておきます。

<table>
<tr align="center" valign="middle">
<td>左上のセル</td>
<td>右上のセル</td>
</tr>
<tr align="center" valign="middle">
<td>左下のセル</td>
<td>右下のセル</td>
</tr>
</table>

こっちの方がすっきりしますね。

セルの大きさ指定

tdタグに、widthタグや、heightタグを指定すると、セルのサイズを指定することができます。

widthタグは、横のサイズをピクセル数かパーセントで指定します。

heightタグは、縦のサイズをピクセル数かパーセントで指定します。

例えば、横幅150ピクセルで、高さ100ピクセルの大きさで、セルの大きさを指定する場合は以下のように記述します。

<table>
<tr>
<td width="150" height="100">左上のセル</td>
<td width="150" height="100">右上のセル</td>
</tr>
<tr>
<td width="150" height="100">左下のセル</td>
<td width="150" height="100">右下のセル</td>
</tr>
</table>

サイズの指定がない場合は、セルの内に表示させるテキストによって、自動的に調整されます。

後述しますが、thタグにもこの指定が行えます。

この属性は、HTML4.01では非推奨とされています。

<戻る>

セルの結合

tdタグに、colspanタグや、rowspanタグを設定すると、セルを結合することができます。

colspanタグは、横方向で結合するセルの数を指定します。

rowspanタグは、縦方向で結合するセルの数を指定します。

例えば、colspanタグで、横方向の結合を指定する場合は、以下のように書きます。

<table>
<tr>
<td colspan="2">横二つのセルを結合</td>
</tr>
<tr>
<td>左下のセル</td>
<td>右下のセル</td>
</tr>
</table>

次に、rowspanタグで、縦方向の結合を指定する場合は、以下のように書きます。

<table>
<tr>
<td rowspan="2">縦二つのセルを結合</td>
<td>右上のセル</td>
</tr>
<tr>
<td>右下のセル</td>
</tr>
</table>

後述しますが、thタグにもこの指定が行えます。

<戻る>

セル内で改行させない

tdタグに、nowrapタグを指定すると、セル内の自動改行を禁止することができます。

例えば、以下のように記述します。

<table>
<tr>
<td nowrap>左上のセル</td>
<td nowrap>右上のセル</td>
</tr>
<tr>
<td nowrap>左下のセル</td>
<td nowrap>右下のセル</td>
</tr>
</table>

しかし、nowrapタグを指定している場合でも、改行タグである「<br>」を使用した場合は、改行されてしまいます。

さらに、この属性は、HTML4.01では非推奨とされています。

後述しますが、thタグにもこの指定が行えます。

<戻る>

セルの見出し

tdタグの代わりに、thタグを使用すると、見出しのセルを作成することができます。

thタグに囲まれた文字は太字になり、セルの中央に表示されます。

細かい設定方法は、前述したtdタグを参照してください。

<戻る>