Dreamweaverでゴォ!

表を作るには?

表をつくるには、<table></table>を使います。

表を作るための要素は行と列があり、それぞれ、行は<tr></tr>、列は<td></td> <th></th>で表示します。

表を作るためのHTMLの構造は以下のようになります。

<table>
 <tr>
  <td> </td>(もしくは<th></th>)
 </tr>
</table>
<td> </td>………… 列を増やしたい時は この命令をくり返す。
<tr> </tr>………… 行を増やしたい時は この命令をくり返す。

なお< td></td> と <th></th> の違いは、<th></th>を使うと文字が太く、セルの中央揃えとなり、表の中での『見出し』として使えるということです。

文字や画像の位置を揃える

文字や画像の位置を左・右・中央に揃えるためには、<tr>もしくは<td>のどちらかで下記のように記述します。

<TR ALIGN="☆"></TR>
<TD ALIGN="☆"></TD>
※☆はRIGHT、CENTER、LEFTが入ります。 

上下に揃えることもできます。

<TR VALIGN="☆"></TR>
<TD VALIGN="☆"></TD>
※ ☆はBOTTOM、TOP、MIDDLE、BASELINEが入ります。 

またがる行と列の設定

複数行にまたがるセルを設定する場合

<TD ROWSPAN="☆"></TD>
<TH ROWSPAN="☆"></TH>
※☆には またがる行の数が入ります。

複数列にまたがるセルの設定する場合

<TD COLSPAN="☆"></TD>
<TH COLSPAN="☆"></TH>
※ ☆には またがる列の数が入ります。

表の幅や、外枠などを設定する

表の幅や高さを調節することができます。数値はピクセル単位もしくは%で設定します。

<TABLE WIDTH="☆"></TABLE>  ……… 幅を指定する  ☆には数値
<TABLE HEIGHT="☆"></TABLE> ……… 高さを指定する ☆には数値
<TABLE CELLPADDING="☆"></TABLE> ……… 枠線とテキストの間隔を指定する ☆には数値
<TABLE CELLSPACING="☆"></TABLE> ……… 枠線の幅を指定する ☆には数値
<TABLE BORDER="☆"></TABLE>    ……… 外枠の太さを指定する ☆には数値

HTMLを覚える目次にもどる

このページの上へ
Dreamweaverでゴォ! 制作著作/ノンピリオド:村山秀明