table一级结构为：　　　　标题 caption　　和　　表格内容；

　　二级结构为：　　thead  ，  tbody  ，  tfoot  ；

　　三级结构为：　　tr  ， th  ，  td；　　// td通过colspan 和rowspan来实现横向和纵向的单元格合并；

 

　　CSS样式：

　　table：

　　　　collapse:　　　　　　seprate(默认值)　　/　　collapse;　　　　//合并边框；

　　　　border-spacing:　　//在未合并边框的情况下设置单元格边框之间的间距；

　　　　caption-side:　　　　top　　/　　bottom;　　//标题位置；

　　　　empty-cells:　　　　hide　　/　　show;　　//是否显示空单元格（未合并边框时才有意义）;

　　　　table-layout:　　　　auto　　/　　fixed;　　//前者单元格宽度由内容自适应大小； 后者单元格大小由设定值决定；

 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>table</title>
<style type="text/css">
table.a{border:1px solid #000;padding:10px;margin:100px auto;}
table.a{/*border-collapse:collapse;*/
border-spacing:30px;}
table.a{empty-cells:hide;}

table.a th,td{border:1px solid #000;padding:5px;text-align:center;width:100px;height:30px; vertical-align: middle;}
table.a .blank{height:5px;padding:0;}


table.one
{
margin:100px auto;
width:400px;
table-layout: automatic
}

table.two
{
margin:0px auto;
width:400px;
table-layout: fixed
}
</style>
</head>
<body>
<table class="a">
<caption><h2>课程表</h2></caption>
<thead>
<tr>
<th>时间</th>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2">上午</th>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr>
<td class="blank" colspan="6"></td>
</tr>
<tr>
<th rowspan="2">下午</th>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>备注</th>
<td colspan="5"></td>
</tr>
</tfoot>
</table>

<table class="one" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>

<br />

<table class="two" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>
</body>
</html>