创建表格的四个元素：table、tr、th、td
<table>…</table>：整个表格以 <table> 标记开始，以 </table> 标记结束。 <tr>…</tr>：表格的一行，所以有几对 tr 表格就有几行。
<th>…</th>：表格的头部的一个单元格，表格表头。
<td>…</td>：表格的一个单元格，一行中包含几对 <td>...</td>，说明一行中就有几列。表格中列的个数，取决于一行中数据单元格的个数。
<table border="1">
<tr>
<th>姓名</th>
<th>性别</th>
<th>工号</th>
</tr>
<tr>
<td>小白</td>
<td>男</td>
<td>123</td>
</tr>
<tr>
<td>初夏</td>
<td>女</td>
<td>321</td>
</tr>
</table>
此外，还有几个相当重要的表格标签，用于优化和组合表格元素：caption、thead、tbody、tfoot
<caption>…</caption>：定义表格的标题，该标签必须放置在 <table> 元素之后，作为第一个子元素，并且一个表格只能定义一个标题。通常这个标题居中于表格之上，可以通过 CSS 属性 "text-align" 和 "caption-side" 来设置标题的对齐方式和显示位置。
<thead>…</thead>：用于组合 HTML 表格的表头内容。该元素必须作为 <table> 元素的子元素，并且出现在 <caption>、<colgroup> 元素之后，<tbody>、 <tfoot> 和 <tr> 元素之前。
<tbody>…</tbody>：用于组合 HTML 表格的主体内容。当表格内容非常多时，表格会下载一点显示一点，但如果加上 <tbody> 标签后，这个表格就要等表格内容全部下载完才会显示。该元素必须作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 和 <thead> 元素之后。
<tfoot>…</tfoot>：用于组合 HTML 表格的页脚内容。该元素必须作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 和 <thead> 元素之后，<tbody> 和 <tr> 元素之前。
注意：<thead>、<tbody>、<tfoot> 元素应该结合起来使用，用来规定表格的各个部分。通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。在使用这3个元素时，在内部必须包含一个或者多个 <tr> 标签。
带有标题的表格：
基本语法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
<style>
caption{
font-size:20px;
font-weight:bold;
margin-bottom:10px;
}
table,th,td{
border:2px solid black;
padding:5px;
}
.tab{
width:40%;
border-collapse:collapse;
}
.tab th{
background:yellow;
}
.tab td{
text-align:center;
background:lightgreen;
}
</style>
</head>
<body>
<table border="1" class="tab">
<caption>商品列表</caption>
<thead>
<tr>
<th>商品名称</th>
<th>价格（元）</th>
<th>生产日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>洗衣机</td>
<td>1999.00</td>
<td>2016-2-1</td>
</tr>
<tr>
<td>电视机</td>
<td>3999.00</td>
<td>2016-2-2</td>
</tr>
<tr>
<td>电冰箱</td>
<td>2999.00</td>
<td>2016-2-8</td>
</tr>
</tbody>
</table>
</body>
</html>
CSS 的 border-collapse 属性是表格属性, 可以设置表格的边框是否合并为一条，还是像在标准的 HTML 中那样分开显示。默认值为 separate 边框分开，不会忽略 border-spacing 和 empty-cells 属性。collapse 边框合并，如果相邻，则共用一个边框，会忽略 border-spacing 和 empty-cells 属性。border-spacing 属性设置相邻单元格的边框间的距离，仅用于"边框分开"样式。用于规定相邻单元的边框之间的距离，不允许负值，如果设置1个参数，定义的是水平和垂直间距。如果是2个参数，那么第一个设置水平间距，而第二个设置垂直间距。empty-cells 属性设置是否显示表格中的空单元格，仅用于"边框分开"样式。默认值为 show 表示空单元格显示边框。hide 为不在空单元格周围显示边框。
表格表头竖直显示：
<table border="1">
<caption>商品列表</caption>
<tr>
<th>商品名称</th>
<td>洗衣机</td>
<td>电视机</td>
<td>电冰箱</td>
</tr>
<tr>
<th>价格（元）</th>
<td>1999.00</td>
<td>3999.00</td>
<td>2999.00</td>
</tr>
<tr>
<th>生产日期</th>
<td>2016-2-2</td>
<td>2016-2-8</td>
<td>2010-2-10</td>
</tr>
</table>
<th> 和 <td> 元素有2个重要属性 rowspan 和 colspan，rowspan 用于设置单元格可横跨的行数。colspan 用于设置单元格可横跨的列数。
跨行跨列的表格：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
<style>
caption{
font-size:20px;
font-weight:bold;
margin-bottom:10px;
}
table,th,td{
border:2px solid black;
padding:10px;
}
.tab{
width:40%;
border-collapse:collapse;
}
.tab th{
background:yellow;
}
.tab td{
text-align:center;
background:lightgreen;
}
</style>
</head>
<body>
<table border="1" class="tab">
<caption>促销信息</caption>
<thead>
<tr>
<td colspan="3" style="text-align:left;font-weight:bold;">新华书店</td>
</tr>
<tr>
<th>类 目</th>
<th>书 名</th>
<th>价 格（元）</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">图书</td>
<td>HTML5 基础</td>
<td>29.00</td>
</tr>
<tr>
<td>CSS3 精通</td>
<td rowspan="2">52.00</td>
</tr>
<tr>
<td>JS 精华</td>
</tr>
<tr>
<td>数码</td>
<td colspan="2">一律半价</td>
</tr>
</tbody>
</table>
</body>
</html>
浙公网安备 33010602011771号