7.テーブルセルに関するタグ


最終更新日、2007年9月10日

spacer

〈サブメニュー〉   


spacer

〈テーブルの横一行を指定するタグ〉

<tr> </tr>

▽タグと属性の説明、
 TRは、Table Rowの略で、表の横一行を指定します。
 このtrタグは、<TABLE>と</table>タグ間で使用します。さらに、この<tr>と</tr>タグ間に、<td>と</td>タグを挿入してセルを作ります。

▽使用例、
<body>
<table border="3" width="50%" height="30%">
<tr>
<td>一行1列</td><td>一行2列</td><td>一行3列</td>
</tr>
<tr>
<td>二行1列</td><td>二行2列</td><td>二行3列</td>
</tr>
<tr>
<td>三行1列</td><td>三行2列</td><td>三行3列</td>
</tr>
</table>
</body>
</html>

 このページのメニューへ戻る

spacer

〈データセルを指定するタグ〉

<td> </td>

▽タグと属性の説明、
 TDは、Table Dataの略で、表のデータセルを指定します。このtdタグは、<tr>と</tr>タグ間に挿入してセルを作ります。

▽使用例、
<body>
<table border="3" width="50%" height="30%">
<tr>
<td>一行1列</td><td>一行2列</td><td>一行3列</td>
</tr>
<tr>
<td>二行1列</td><td>二行2列</td><td>二行3列</td>
</tr>
<tr>
<td>三行1列</td><td>三行2列</td><td>三行3列</td>
</tr>
</table>
</body>
</html>

 このページのメニューへ戻る

spacer

〈見出しのセルを指定するタグ〉

<th> </th>

▽タグと属性の説明、
 THは、Table Headerの略で、見出しとなるセルを指定します。また、ヘッダセル内の文字列は、太字となり、中央寄せで表示されます。
 なお、セルの内容が通常のデータの場合には、<TD>タグを使用します。

▽使用例、
<body>
<table border="3" width="50%" height="30%">
<tr>
<th>名前(見出しのセル)</th><th>住所(見出しのセル)</th><th>電話(見出しのセル)</th>
</tr>
<tr>
<td>日本 太郎</td><td>千代田区丸の内1−1−1</td><td>03−1234−5678</td>
</tr>
<tr>
<td>日本 花子</td><td>千代田区千代田2−2−2</td><td>03−9876−5432</td>
</tr>
<tr>
<td>畠山 工</td><td>札幌市東京区沖縄町2−2−2</td><td>01−999−0000</td>
</tr>
</table>
</body>
</html>

 このページのメニューへ戻る

spacer

〈横(行)方向にセルの結合を指定する属性〉

<td colspan="結合するセルの数"> </td>

▽タグと属性の説明、
 colは、Columnの略で、横(行)方向にセルの結合を指定します。colspanの値には、colspan="3"のように、"と"の間に、右方向に何個のセルを結合するか正数で指定します。

▽使用例、
<body>
<table border="3" width="50%" height="30%">
<tr>
<td colspan="2">横2個のセルを結合したセル(一行1列・一行2列)</td><td>一行3列</td>
</tr>
<tr>
<td>二行1列</td><td>二行2列</td><td>二行3列</td>
</tr>
<tr>
<td>三行1列</td><td>三行2列</td><td>三行3列</td>
</tr>
</table>
</body>
</html>

 このページのメニューへ戻る

spacer

〈縦(列)方向にセルの結合を指定する属性〉

<td rowspan="結合するセルの数"> </td>

▽タグと属性の説明、
 rowspanは、縦(列)方向にセルの結合を指定します。rowspanの値には、rowspan="3"のように、"と"の間に、下方向に何個のセルを結合するか正数で指定します。

▽使用例、
<body>
<table border="3" width="50%" height="30%">
<tr>
<td rowspan="2">縦2個のセルを結合したセル(一行1列・二行1列)</td><td>一行2列</td><td>一行3列</td>
</tr>
<tr>
<td>二行2列</td><td>二行3列</td>
</tr>
<tr>
<td>三行1列</td><td>三行2列</td><td>三行3列</td>
</tr>
</table>
</body>
</html>

 このページのメニューへ戻る

spacer

〈横方向と縦方向を同時にセルの結合を指定する場合〉

<td colspan="横方向に結合するセルの数" rowspan="縦方向に結合するセルの数"> </td>

▽タグと属性の説明、
 colspanrowspanは、同時に指定する事ができます。

▽使用例、
<body>
<table border="3" width="50%" height="30%">
<tr>
<td colspan="3" rowspan="3">
縦横9個のセルを結合
 一行1列  一行2列  一行3列
 二行1列  二行2列  二行3列
 三行1列  三行2列  三行3列
</td>

<td>一行4列</td>
</tr>
<tr>
<td>二行4列</td>
</tr>
<tr>
<td>三行4列</td>
</tr>
<tr>
<td>四行1列</td><td>四行2列</td><td>四行3列</td><td>四行4列</td>
</tr>
</table>
</body>
</html>

 このページのメニューへ戻る

spacer

〈セルの内側の余白(枠線と文字の間隔)を指定する属性〉

<td cellpadding="ピクセル値"> </td>

▽タグと属性の説明、
 cellpaddingは、セルの内側の余白(枠線と文字の間隔)を指定します。cellpaddingの値には、cellpadding="3"のように、"と"の間にピクセル値で指定します。初期値は"2"です。
 また、<tr>タグに指定すると、その行全体に適用されます。

▽使用例、
<body>
<table border="3" cellspacing="3" width="50%" height="30%">
<tr>
<td cellpadding="3">一行1列</td><td>一行2列</td><td>一行3列</td>
</tr>
<tr cellpadding="3">
<td>二行1列</td><td>二行2列</td><td>二行3列</td>
</tr>

</table>
</body>
</html>

 このページのメニューへ戻る

spacer

〈セルの大きさを指定する属性〉

<td width="横幅" height="高さ"> </td>

▽タグと属性の説明、
 widthは、セルの横幅を指定します。widthの値には、width="50%"のように、"と"の間に、テーブル全体の幅に対する割合に%(パーセント)を付けて指定するか、またはピクセル値で指定します。
 指定したセルの列は、全て同じ幅のセルになります。また、同じ列の複数のセルに指定した場合は、一番幅の広いセルの指定値が有効になります。なお、未指定の場合は、セルの内容によって自動設定されます。
spacer
 heightは、セルの高さを指定します。heightの値には、height="30%"のように、"と"の間に、テーブル全体の高さに対する、割合に%(パーセント)を付けて指定するか、またはピクセル値で指定します。
 指定したセルの行は、全て同じ高さのセルになります。また、同じ行の複数のセルに指定した場合は、一番高いセルの指定値が有効になります。なお、未指定の場合は、セルの内容によって自動設定されます。

▽使用例、
<body>
<table border="3" cellspacing="3">
<tr>
<td width="25%" height="20%">一行1列 幅25%×高さ20%のセル</td>
<td width="50%">一行2列 幅50%×高さ20%のセル</td>
<td width="25%">一行3列 幅25%×高さ20%のセル</td>

</tr>
<tr>
<td height="30%">二行1列 幅25%×高さ30%のセル</td>
<td>二行2列 幅50%×高さ30%のセル</td>
<td>二行3列 幅25%×高さ30%のセル</td>

</tr>
</table>
</body>
</html>

 このページのメニューへ戻る

spacer

〈セルの背景色を指定する属性〉

<td bgcolor="#RGBコード"> </td>

▽タグと属性の説明、
 bgcolorは、backgrand colorの略で、セルの背景色を指定します。bgcolorの値には、bgcolor="#000000"のように、"と"の間にrgbコードまたはカラーネームで指定します。未指定の場合は、TABLEタグなどで指定した背景色になります。
 また、<tr>タグに指定すると、その行全体に適用されます。

▽使用例、
<body>
<table border="3" cellspacing="3">
<tr>
<td bgcolor="#000000">一行1列 黒の背景色</td>
<td bgcolor="#ffffff">一行2列 白の背景色</td>
<td bgcolor="#ff0000">一行3列 赤の背景色</td>

</tr>
</table>
</body>
</html>

 このページのメニューへ戻る

spacer

〈文字列の位置を指定する属性〉

<td align="左右の位置名" valign="上下の位置名"> </td>

▽タグと属性の説明、
 alignは、セル内の文字列の左右位置を指定します。alignの値には、align="center"のように、"と"の間に左右の位置名を指定します。
 また、<tr>タグに指定すると、その行全体に適用されます。

使用できる位置名は、下記の3種類です。
 align="left"は、左寄せで、初期値です。

 align="center"は、中央寄せです。

 align="right"は、右寄せです。
spacer
 valignは、セル内の文字列の上下の位置を指定します。valignの値には、valign="middle"のように、"と"の間に上下の位置名を指定します。
 また、<tr>タグに指定すると、その行全体に適用されます。

使用できる位置名は、下記の3種類です。
 valign="top"は、上寄せです。

 valign="middle"は、中央寄せです。

 valign="bottom"は、下寄せで、初期値です。

▽使用例、
<body>
<table border="3" width="50%" height="30%">
<tr>
<td align="center">左右位置を中央に指定(一行1列)</td>
<td valign="top">上下位置を上に指定(一行2列)</td>
<td align="right" valign="middle">左右位置を右に、上下位置を中央に指定(一行3列)</td>

</tr>
</table>
</body>
</html>

 このページのメニューへ戻る

spacer

〈セルに画像を表示する属性〉

<td background="画像のファイル名"> </td>

▽タグと属性の説明、
 backgroundは、セルの背景に画像を表示します。backgroundの値には、background="photo.gif"のように、"と"の間に表示する画像のファイル名を相対パス名またはフルパス名で指定します。
 表示できるファイル形式の主なものに「GIF」 「JPEG」 「PNG」などがあります。

▽使用例、
<body>
<table border="3" cellspacing="3">
<tr>
<td>一行1列</td>
<td background="photo.gif">一行2列 背景画像の表示セル</td>
<td>一行3列</td>
</tr>
</table>
</body>
</html>

ここで本文終わりです
spacer

 このページのメニューへ戻る
  よく使うと思うタグ集のメニューページへ戻る
  ホームページ作成のメニューページへ戻る
  トップページへ戻る


spacer

(c)copyright. 2007 09 01. takumi hatakeyama