Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 reference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial
ASP ADO リファレンス | PHP関数リファレンス | MySQL関数リファレンス

表の枠線を単一の線にする

■ 表の枠線を単一の線にする

collapse 表の外枠や各セルの枠を重ねて表示
separete 表の外枠や各セルの枠を別に表示
border-collapseプロパティは、表の外枠や各セルの枠線を重ねて(単一の線として)表示するか別々に表示するかを指定します。
このプロパティは、table要素に対してのみ指定できます。
■ 作例
HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>表の枠線を単一の線にする</title>
<style type="text/css">
<!--
body { margin: 2em }
table#sample1 { border-collapse: collapse }
table#sample2 { border-collapse: separate }
table, th, td { border: 3px solid #999999 }
th {
color: #000000;
background-color: #cccccc
}
caption{
font-size: large;
font-weight: bold;
color: #ff3300;
background: transparent
}
-->
</style>
</head>
<body>
<div align="center">
<table border="3" cellpadding="8" id="sample1">
<caption>
collapse
</caption>
<tr>
<th>ヘッダ</th>
<th>ヘッダ</th>
<th>ヘッダ</th>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</table>
<table border="3" cellpadding="8" id="sample2">
<caption>
separate
</caption>
<tr>
<th>ヘッダ</th>
<th>ヘッダ</th>
<th>ヘッダ</th>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</table>
</div>
</body>
</html>

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box | CSS Trial