表の枠線を単一の線にする
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>