tableとは、表を作成するためのタグであります。

エクセルの様な表をホームページ上に見せる事ができる技術となりますし、何かしらの表を作る場合は、大変便利なタグでありますので、覚えておきましょう。

Advertisement

1.テーブルを作る

テーブルを作る場合は、<table>を使いますが、その他にも<tr>、<th>、<td>を併用して使います。

<table>は表全体の枠組みのような物と考えると分かりやすいかもしれません。

<tr>は、表の横一列を指定するタグであります。

<th>と<td>は、共に表の内容が表示される部位になりますが、<th>は見出しとして扱うタグです。

これだけの説明では、分かりづらいと思いますので、実際に扱ってみましょう。

まず、下図の様なソースコードを作ります。

ソースコード

image31

コピー用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>テーブルを作る</title>
</head>

<body>
<table border="1">
 <tr>
  <th>名前</th>
  <td>佐藤</td>
  <td>鈴木</td>
 </tr>
</table>
</body>
<html>

すると、ブラウザ上では下図の様に表示されます。

ブラウザ

image32

それぞれの表を構成するマス目の事をセルと呼びます。

thタグで表示されたセルの内容が太字になっています。
上記でも説明したとおりthタグは見出しになりますので、デフォルトだと太字に設定されています。
tdタグは普通に表示されていますね。

ソースコードのtableタグの属性に指定している「border="1"」は、テーブルの枠を表示させる為に指定してあり、これを削除すれば、テーブルの枠が表示されなくなります。
逆に、数字を「border="2"」「border="3"」と大きくしていく事によって枠を太く表示する事ができます。

次は、下図の様にソースコードを追加して下さい。

ソースコード

image33

コピー用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>テーブルを作る</title>
</head>

<body>
<table border="1">
 <tr>
  <th>名前</th>
  <td>佐藤</td>
  <td>鈴木</td>
 </tr>
 <tr>
  <th>住所</th>
  <td>東京</td>
  <td>大阪</td>
 </tr>
</table>
</body>
<html>

すると、ブラウザ上では下図の様に表示されます。

ブラウザ

image34

trタグを増やした事によって表の行が増えたのがわかると思います。

2.セルを結合させる

セルを結合する方法です。

行や列によってセルの数を変更したい場合、<th>や<td>の数を調節しただけでは、テーブルの表示が狂ってしまいます。

例えば下図の様にです。

ソースコード

<table>
 <tr>
  <th>名前</th>
  <td>佐藤</td>
 </tr>
 <tr>
  <th>住所</th>
  <td>東京</td>
  <td>大阪</td>
 </tr>
</table>

表示

名前 佐藤
住所 東京 大阪

一行目と二行目のセル(tbタグ)の数が違う事によって、一行目のセルがひとつ潰れています。

この場合、「佐藤」のセルを隣のセルと結合させることが出来るのです。

隣のセルと結合させるためには、colspan属性を使用します。

横のセルと結合させたいタグに対して、<td colspan="値">と書き込みます。
値には結合させたいセルの数を指定します。
例えば、3つのセルを結合させたい場合は、<td colspan="3">となります。

下図を見てください。

ソースコード

<table>
 <tr>
  <th>名前</th>
  <td colspan="2">佐藤</td>
 </tr>
 <tr>
  <th>住所</th>
  <td>東京</td>
  <td>大阪</td>
 </tr>
</table>

表示

名前 佐藤
住所 東京 大阪

「佐藤」セルが、右隣のセルと結合している事がわかりますか?

colspan属性は常に右となりのセルと結合しようとします。


セルの結合は縦でも行なう事ができます。

縦のセルを結合させた場合は、<td rowspan="値">と書き込みます。

下図を見てください。

ソースコード

<table>
 <tr>
  <th>名前</th>
  <td>佐藤</td>
  <td rowspan="2">鈴木</td>
 </tr>
 <tr>
  <th>住所</th>
  <td>東京</td>
 </tr>
</table>

表示

名前 佐藤 鈴木
住所 東京

「鈴木」セルが縦に結合されていますね。

colspan属性とrowspan属性は同時に指定することもできますので、テーブルのマス目は自由自在に設定する事ができるのです。

3.テーブルのサイズを変更する

テーブルのサイズは自由に設定することができます

テーブルのサイズを設定する場合は、画像を表示するの、「3.画像のサイズを変更する」でも使用した、widthとheightを指定する方法で可能です。

widthとheight要素は、 tableタグだけではなくthタグやtdタグに個別に指定する事ができますので、試してみて下さい。
※同列、同行で異なる数値を指定した場合、大きい数字を指定したセルが基準になります。

テーブルの枠サイズを設定する場合は、1.テーブルを作るで触れた、border要素にピクセル数を指定する事で可能です。

4.テーブルの枠を変更する

テーブルの枠にはいくつかの種類があります。

border-style属性でテーブルの枠の種類を変更する事ができます。

書き方の例としては、
<table style="border-style: solid ;">
の様になります。
この場合、tableタグのスタイルシートで、border-style属性(枠の種類)にsolid(実線)を指定しています。

まず、下図を見て下さい。

ソースコード

<table style="border-style: solid ;">
 <tr>
  <th>名前</th>
  <td>佐藤</td>
  <td>鈴木</td>
 </tr>
 <tr>
  <th>住所</th>
  <td>東京</td>
  <td>大阪</td>
 </tr>
</table>

表示

名前 佐藤 鈴木
住所 東京 大阪

テーブルの外枠にだけ実線が表示されているのが分かると思います。

この場合、<table>にはスタイルシートが反映されていますが、<th>、<td>には反映されていないので、セルごとには実線が表示されていません。
セルごとに実線を表示させるためには、<th>、<td>にもスタイルシートを書きこまなければなりません。

上図ではborder-style属性の値にsolidを指定していすが、この値を変更すれば枠の種類を変更する事ができます。

枠の種類を下記にまとめておきます。

solid
dotted
dashed
double
ridge
groove
inset
outset

※ridge~下は、分かりやすい様に枠色と枠線の太さを変えてあります。

5.テーブルに色をつける

テーブルの背景や枠に対して色をつける方法です。

まずテーブル色をつける場合は、bordercolor属性を指定します。

下図が、ソースコードと、実際にどの様に表示されるになります。

ソースコード

<table border="1" bordercolor ="#F00000">
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
</table>

表示

   

#f00000」は、色コードで赤を示し、<td>内の「&nbsp;」は空白の為に書き込んでいます。

次は、テーブルの背景に色をつける方法ですが、styleにbackground-color属性を指定します。

下図が、ソースコードと実際の表示になります。

ソースコード

<table border="1">
 <tr>
  <td style="background-color: #F00000;">&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
</table>

表示

   

この様に、tdタグやthタグ毎にbackground-colorを指定する事によって、個別のセルにも背景の色を指定する事ができます。

もちろん、tableタグにbackground-colorを指定すれば、テーブル全体の背景の色を変化させる事もできます。

この他のテーブルについての属性などは、 タグ辞典にも乗せておくので参考にして下さい。

では、divを扱うの項目に進みましょう。

Big-Sea All rights reserved.2010-2013
当サイト内の文章、画像など、すべての無断使用、転載を禁じます。