HTMLとCSSで作るウェブサイト作成入門

ブロックレベル要素(4)表を作る<table>タグ

●表の基本

 HTMLで表を描くときに使うのが<table>タグです。基本的な構造は、<table>〜</table>で表全体を指定し、その中に<tr>〜</tr>で表の行(段)を設定し、その各行(段)に<td>〜</td>でセルを配置します。1行目(最上段)は、その列の項目名であることがありますが、そのような場合は、通常行(段)の<td>〜</td>の代わりに、<th>〜</th>を使うと、表の項目名らしく太字表記・中央寄せになります(以下サンプルの赤字)。<th>〜</th>は必ず使わなくてはならないわけではなく、他の行(段)と同じでよい場合は、<td>〜</td>で構いません。次のサンプルで確認して下さい。

[HTMLサンプル] ※「border="1"」は、「枠線の太さ1」の意。
<table border="1">
<tr><th>No</th><th>語</th><th>音</th></tr>
<tr><td>1</td><td>か</td><td>ka</td></tr>
<tr><td>2</td><td>て</td><td>te</td></tr>
</table>

[サンプルのブラウザ表示結果]
テーブルサンプル表示結果

[HTMLタグとブラウザ表示の対応イメージ]
テーブルタグと表示の対応イメージ

●表がつぶれてる?

 表だけを作成すると、表の未入力のセルが、つぶれたようになってしまいます。上記のサンプルのような場合は問題ありませんが、未入力のセルができる場合は、全角のスペースなどを入れておきましょう。つぶれたように見える状況が、解消されますので試して見て下さい。

●セルの結合

 表を利用する際、複数のセルを結合し、ひとつのセルとして扱いたい場合があります。
 セルを横方向に結合したい場合、<td>タグに、「colspan="結合するセルの数"」という属性を追加します。結合した場合、その行(段)のセルの数(あるいは<td>〜</td>の数)は少なくなります。例えば、上記のサンプルのように、3×3の表の場合、一行(段)あたり、3つの<td>〜</td>が設定されますが、最下段の中央の<td>タグに、「colspan="2"」として2つ分のセルを結合すると、その行(段)は、<td>〜</td>の数が、「colspan="2"」を設定したものを含めて2つになります。以下のサンプルとイメージを確認して下さい。

[HTMLサンプル]
<table border="1">
<tr><th>No</th><th>語</th><th>音</th></tr>
<tr><td>1</td><td>か</td><td>ka</td></tr>
<tr><td>2</td><td colspan="2">結合</td></tr>
</table>

[サンプルのブラウザ表示結果]
セル結合サンプル

[HTMLと表示結果の対応イメージ]
セル結合対応イメージ

 また、セルを縦方向に結合したい場合には、<td>タグに、rowspan="結合するセルの数"を追加します。例えば、上のサンプル表示結果の表の一番左側の列の2行目と3行目のセルを結合するは、一番左側の列の2行目の位置の<td>タグに、<td rowspan="2">を設定します。このとき、一番左側の列の3行目(最下段)のセルの<td>〜</td>は不要となり、最下段の<tr>〜</tr>の中に指定される<td>〜</td>タグは、既に結合指定してあるもの一つだけとなります。以下のサンプルとイメージで確かめましょう。

[HTMLサンプル]
<table border="1">
<tr><th>No</th><th>語</th><th>音</th></tr>
<tr><td rowspan="2">結合</td><td>か</td><td>ka</td></tr>
<tr><td colspan="2">結合</td></tr>
</table>

[サンプルのブラウザ表示結果]
上下結合サンプル

[HTMLと表示結果の対応イメージ]
セル結合対応イメージ2

●その他の属性

 <table>タグと、関連する<tr><td><th>タグには、種々の属性がある。罫線の太さを指示するborder、幅を指定するwidth、高さを指定するheight、背景色を変えるbgcolor、背景画像を設定する backgroundなどである。

タグ 属性 設定値 意味 サンプル
table border 数値 罫線の太さ <table border="2">〜</table>
bgcolor 色コード 背景色 <table bgcolor="red">〜</table>
background 画像 背景画像 <table background="x.jpg">〜</table>
width 数値や% 表の幅 <table width="70%">〜</table>
height 数値や% 表の高さ <table height="350">〜</table>
cellpadding 数値 セル余白 <table cellpadding="3">〜</table>
cellspacing 数値 セル間隔 <table cellspacing="3">〜</table>
align left
right
center
左寄せ
右寄せ
中央寄せ
<table align="center">〜</table>
tr bgcolor 色コード 背景色 <tr bgcolor="red">〜</tr>
background 画像 背景画像 <tr background="x.jpg">〜</tr>
align left
right
center
左寄せ
右寄せ
中央寄せ
<tr align="center">〜</tr>
valign top
bottom
middle
上寄せ
下寄せ
中央寄せ
<tr valign="top">〜</tr>
td
(th)
bgcolor 色コード 背景色 <td bgcolor="red">〜</td>
background 画像 背景画像 <td background="x.jpg">〜</td>
align left
right
center
左寄せ
右寄せ
中央寄せ
<td align="center">〜</td>
valign top
bottom
middle
上寄せ
下寄せ
中央寄せ
<td valign="top">〜</td>
width 数値や% 表の幅 <td width="70%">〜</td>
height 数値や% 表の高さ <td height="350">〜</td>
colspan 数値 結合横セル <td colspan="3">〜</td>
rowspan 数値 結合縦セル <td rowspan="4">〜</td>

●ウェブデザインにも使える<table>タグ

 最近のウェブデザインの主流はスタイルシートですが、<table>タグもウェブデザインに使われてきました。
 例えば、次のようなウェブデザインはよくありますが、ウェブページは、基本的には、このような四角いブロックを組み合わせて構成され、そのブロックの中に文字や画像を配置することで作られています。そして、この四角いブロックの枠は、<table>タグを用いて実現することができます。border="0"とすれば、枠線も消すことができますし、<table>は入れ子にして使えます。また、colspanやrowspan属性を使えば、変則的な枠もデザインできます。
 ページの一部の構成を作ったり、1ページだけのシンプルなページをデザインする場合など、適切に使えると便利なことがあります。 

よくあるウェブページのデザイン
よくあるウェブページのデザイン

基本的には四角い枠のパーツで構成されています
ウェブデザインの構成

   
 
 
 
SPONSORED LINK


 

SPONSORED LINK