Challenge HP
HP作成 スタイルシート apeskin サーバー HP作成ソフト アフィリエイト リンク BBS top
HPあれこれメニュー
はじめに
知っておきたい事
HTMLの基本
フレーム
レイアウト
画像
色々なこと
HTML4.01要素一覧
XHTML
テンプレート
エイプスキン
サイトマップ


IEツールバー
Googleツールバー
Infoseekツールバー
Yahoo!ツールバー
Windowsをお使いでしたら、IEツールバーを利用すると検索に便利。 ブラウザに組み込まれ、キーワード検索できます。




■ 幅と高さ width / height
テーブルの幅を指定します。セル単位で幅の指定も出来ます。

<table border="1" width="350">
<tr>
<td>幅はセルに入れたもの次第で自動的にサイズが<br>
変わりますが、サイズ指定をした方が良いです。<br>
サイズの指定は0〜100の%を使ってもできます。</td>
</tr>
</table>


幅はセルに入れたもの次第で自動的にサイズが
変わりますが、サイズ指定をした方が良いです。
サイズの指定は0〜100の%を使ってもできます。

テーブルの高さを指定します。セル単位で高さの指定も出来ます。

<table border="1" height="65">
<tr>
<td>高さはセルに入れたもの次第で自動的にサイズが<br>
変わりますが、サイズ指定をした方が良い場合が多いです。<br>
サイズの指定は0〜100の%を使ってもできます。</td>
</tr>
</table>

高さはセルに入れたもの次第で自動的にサイズが
変わりますが、サイズ指定をした方が場合があります。
■ 配置 align / valign
セル内の横の配置を 左・中央・右 で指定します。指定しないと左です。

<table border="1" width="350">
<tr>
<td align="left">左寄せ</td>
<td align="center">中央</td>
<td align="right">右寄せ</td>
</tr>
</table>

左寄せ 中央 右寄せ


セル内の縦の配置を 上・中央・下 で指定します。指定しないと中央です。

<table border="1" height="50">
<tr>
<td valign="top">上</td>
<td valign="middle">中央</td>
<td valign="bottom">下</td>
</tr>
</table>

中央
■ border / cellpadding / cellspacing
この3つの属性は、線の太さ・セル内の空白部分・枠線と枠線の距離です。 極端な例を下に用意しました。

border="0" cellpadding="0" cellspacing="0" の場合。

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>border="0"</td>
<td>cellpadding="0"</td>
<td>cellspacing="0"</td>
</tr>
</table>

border="0" cellpadding="0" cellspacing="0"


border="10" にした場合。

<table border="10" cellpadding="0" cellspacing="0">
<tr>
<td>border="10"</td>
<td>cellpadding="0"</td>
<td>cellspacing="0"</td>
</tr>
</table>

border="10" cellpadding="0" cellspacing="0"


cellpadding="10" にした場合。

<table border="1" cellpadding="10" cellspacing="0">
<tr>
<td>border="1"</td>
<td>cellpadding="10"</td>
<td>cellspacing="0"</td>
</tr>
</table>

border="1" cellpadding="10" cellspacing="0"


cellspacing="10" にした場合。

<table border="1" cellpadding="0" cellspacing="10">
<tr>
<td>border="1"</td>
<td>cellpadding="0"</td>
<td>cellspacing="10"</td>
</tr>
</table>

border="1" cellpadding="0" cellspacing="10"
■ 背景 bgcolor / background
背景に色を付ける。

<table border="1" width="350" bgcolor="#ddddff">
<tr>
<td>bgcolor="#ddddff" (背景に色を付ける)</td>
</tr>
</table>

bgcolor="#ddddff" (背景に色を付ける)


背景に画像を使う。

<table border="1" width="350" background=../image/u.gif>
<tr>
<td>background=image/u.gif (背景に画像を使用)</td>
</tr>
</table>

background=../image/u.gif (背景に画像を使用)

今回は<table>タグに背景を付けましたが、各<td>にも付けられます。
■ ボーダーの表示指定 rules
セル全てのボーダーを表示 rules="all"

<table border="1" rules="all">
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>

セル1セル2
セル3セル4


セル全てのボーダーを非表示 rules="none"

<table border="1" rules="none">
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>

セル1セル2
セル3セル4


セル横のボーダーのみ表示 rules="rows"

<table border="1" rules="rows">
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>

セル1セル2
セル3セル4


セル縦のボーダーのみ表示 rules="cols"

<table border="1" rules="cols">
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>

セル1セル2
セル3セル4


<thead> <tfoot> <tbody> の境のボーダーのみ表示 rules="groups"

<table border="1" rules="groups">
<thead>
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</thead>
<tfoot>
<tr>
<td>セル5</td><td>セル6</td>
</tr>
<tr>
<td>セル7</td><td>セル8</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>セル9</td><td>セル10</td>
</tr>
<tr>
<td>セル11</td><td>セル12</td>
</tr>
</tbody>
</table>

セル1セル2
セル3セル4
セル5セル6
セル7セル8
セル9セル10
セル11セル12
■ ボーダーの表示指定 frame
全てのボーダーを表示 frame="border"

<table border="1" frame="border">
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>

セル1セル2
セル3セル4


全てのボーダーを表示 frame="box"

<table border="1" frame="box">
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>

セル1セル2
セル3セル4


左右のボーダーを非表示 frame="hsides"

<table border="1" frame="hsides">
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>

セル1セル2
セル3セル4


上下のボーダーを非表示 frame="vsides"

<table border="1" frame="vsides">
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>

セル1セル2
セル3セル4


左右と下のボーダーを非表示 frame="above"

<table border="1" frame="above">
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>

セル1セル2
セル3セル4


左右と上のボーダーを非表示 frame="below"

<table border="1" frame="below">
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>

セル1セル2
セル3セル4


上下と右のボーダーを非表示 frame="lhs"

<table border="1" frame="lhs">
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>

セル1セル2
セル3セル4


上下と左のボーダーを非表示 frame="rhs"

<table border="1" frame="rhs">
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>

セル1セル2
セル3セル4


回り全てのボーダーを非表示 frame="void"

<table border="1" frame="void">
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>

セル1セル2
セル3セル4
 you style Copyright (C) 2003-2004 Challenge HP, All rights reserved.