table2

HTML

※tableで指定したborderとtdで指定したborderを重ねて表示する場合、
border-collapse: collapse;を使用する。

table{
	border-collapse: collapse;
	border:#000099 solid 1px;
}

td {
	border: 1px #000000 solid;
}

例）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5 - table</title>
<link rel="stylesheet" href="table2.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="sample.js"></script>
</head>
<body>
<div id="wrapper">
<header>シンプルなtable</header>
<div id="content">
<table summary="通常table"><caption>通常のtable</caption>
  <tr id="tr01"><td id="td01">1</td><td id="td02">2</td><td id="td3" rowspan="2">3</td><td id="td04">4</td><td id="td05">5</td></tr>
  <tr id="tr02"><td id="td06">6</td><td id="td07"  rowspan="4">7</td><td id="td8" colspan="2">8</td></tr>
  <tr id="tr03"><td id="td09" rowspan="2">9</td><td id="td10" colspan="3">10</td></tr>
  <tr id="tr04"><td id="td11" colspan="2">11</td><td id="td12" rowspan="2">12</td></tr>
  <tr id="tr05"><td id="td13">13</td><td id="td14">14</td><td id="td15">15</td></tr>
</table>

<!-- /#content --></div>
<footer></footer>   
<!--/#wrapper--></div>
</body>
</html>

@charset "utf-8";

table{
	margin:15px 0 10px 5px;
	border-collapse: collapse;
	border:#000099 solid 1px;
	background-color: #FFFF99;
	width:300px;
	}

td {
	border: 1px #000000 solid;
}