我们首先介绍下制作HTML表格的相关标签：
<table>定义HTML表格
<thead>标签定义表格的表头
<tbody>标签表格主体（正文）
<tfoot>标签定义表格的页脚（脚注或表注）
<tr>元素定义表格行
<th>元素定义表头
<td>元素定义表格单元
<caption>元素定义表格标题，必须紧随table标签之后。只能对每个表格定义一个标题，默认居中与表格之上
<col>标签为表格中一个或多个列定义属性值。
<colgroup>标签用于对表格中的列进行组合，以便对其进行格式化。
html表格制作及实例具体代码如下：
<styletype="text/css">
/*公共样式*/
li{
width:600px;
margin:auto;
margin-top:20px;
}
p{
width:600px;
margin:auto;
}
table{
width:600px;
margin:auto;
text-align:center;
}
/*基本表格样式*/
.table-1{
border:1pxsolid#ccc;
border-collapse:collapse;/*合并相邻表格的间距*/
}
.table-1tr,.table-1td{
border:1pxsolid#ccc;
}
/*无边框表格*/
.table-2{
}
/*双线表格*/
.table-3{
border:1pxsolid#ccc;
}
.table-3tr,.table-3td{
border:1pxsolid#ccc;
}
/*合并表格列*/
.table-4{
border:1pxsolid#ccc;
border-collapse:collapse;/*合并相邻表格的间距*/
}
.table-4tr,.table-4td{
border:1pxsolid#ccc;
}
/*合并表格行*/
.table-5{
border::1pxsolid#ccc;
border-collapse:collapse;
}
.table-5tr,.table-5td{
border:1pxsolid#ccc;
}
/*复杂表格一*/
.table-6{
border::1pxsolid#ccc;
border-collapse:collapse;
}
.table-6tr,.table-6td{
border:1pxsolid#ccc;
}
/*复杂表格二*/
.table-7{
border::1pxsolid#ccc;
border-collapse:collapse;
}
.table-7tr,.table-7td{
border:1pxsolid#ccc;
}
</style>
<body>
<divclass="container">
<ol>
<li>基本表格样式：</li>
<tableclass="table-1">
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
<li>无边框表格：</li>
<tableclass="table-2">
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
<li>双线表格：</li>
<tableclass="table-3">
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
<li>合并表格列：</li>
<tableclass="table-4">
<tr>
<!--未找到在css中的处理方式-->
<tdcolspan="3">1.1</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
<p>注：colspan在css中失效</p>
<li>合并表格行：</li>
<tableclass="table-5">
<tr>
<!--未找到在css中的处理方式-->
<tdrowspan="3">1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
<p>注：rowspan在css中失效</p>
<li>复杂表格（一）</li>
<tableclass="table-6">
<tr>
<!--未找到在css中的处理方式-->
<td>1.1</td>
<tdcolspan="2">1.2</td>
</tr>
<tr>
<td>2.1</td>
<tdrowspan="2">2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.3</td>
</tr>
</table>
<li>复杂表格（二）</li>
<tableclass="table-7">
<tr>
<!--未找到在css中的处理方式-->
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<tdcolspan="2">2.1</td>
<tdrowspan="2">2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
</tr>
</table>
</ol>
</div>
</body>
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h54942.shtml
