HTML表格标签
表格是一种组织整理数据的手段，在HTML当中表格使用<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<body><table><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></body>
1. 表格边框属性
如果不定义边框属性，表格将不显示边框，但是大多数时候，我们希望显示边框。
我们可以在在table标签中添加border属性，border的属性值可以直接位数字，省略单位像素（px）。
<body><!--设置table的边框的宽度为1px，表格居中显示--><table border="1" align="center"><!--设置每一行的高度为40px,内容显示居中。--><tr height="40x" align="center"><!--设置每一列的宽度为120px--><td width="120px">第1行-第1列</td><td width="120px">第1行-第2列</td><td width="120px">第1行-第3列</td></tr><tr height="40x" align="center"><td>第2行-第1列</td><td>第2行-第2列</td><td>第2行-第3列</td></tr><tr height="40x" align="center"><td>第3行-第1列</td><td>第3行-第2列</td><td>第3行-第3列</td></tr></table></body>
以上代码在Chrome浏览器中显示的效果为：
那么我们该怎么取消table表格中的双层边框呢？我们可以把cellspacing的属性的值设置为0。
cellspacing是表格里单元格之间的距离; cellpadding是表格里单元格内的空白部分;
<body><!--cellspacing属性的值设置为0,两根线合称为一根线--><!--cellpadding属性设置文字内容和边框的距离--><table border="1" align="center" cellpadding="10" cellspacing="0"><tr height="40x"><td>第1行-第1列</td><td>第1行-第2列</td><td>第1行-第3列</td></tr><tr height="40px"><td>第2列-第1行</td><td>第2列-第2行</td><td>第2列-第3行</td></tr><tr height="40x"><td>第3行-第1列</td><td>第3行-第2列</td><td>第3行-第3列</td></tr></table></body>
以上代码在Chrome浏览器中显示的效果为：
2. 表格的表头
表格的表头使用<th>标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本：
<body><table align="center" border="1" cellspacing="0"><tr align="center" height="40px"><!--设置表格的表头--><th width="70px">演员</th><th width="90px">代表作</th></tr><tr align="center" height="40px"><td>成龙</td><td>警察故事</td></tr><tr align="center" height="40px"><td>周星驰</td><td>大话西游</td></tr><tr align="center" height="40px"><td>李连杰</td><td>少林寺</td></tr></table></body>
以上代码在Chrome浏览器中显示的效果为：
3. 表格的标题
在<table>标签中添加<caption>标签。
<body><table align="center" border="1" cellspacing="0"><!--给表格设置标题--><caption>优秀男演员代表作</caption><tr align="center" height="40px"><!--设置表格的表头--><th width="70px">演员</th><th width="90px">代表作</th></tr><tr align="center" height="40px"><td>成龙</td><td>警察故事</td></tr><tr align="center" height="40px"><td>周星驰</td><td>大话西游</td></tr><tr align="center" height="40px"><td>李连杰</td><td>少林寺</td></tr></table></body>
4. 表格跨行跨列
在<td>或<th>标签中添加colspan属性实现跨列操作。
<body><table border="1" align="center" cellspacing="0" cellpadding="10"><caption>横跨两列的单元格</caption><tr height="35px"><th>姓名</th><!--添加colspan属性，实现跨两列单元格--><th colspan="2">手机号</th></tr><tr height="35px"><td>周安德</td><td>18911450210</td><td>1852346</td></tr><tr height="35px" align="center"><td>谭健</td><td>18911450210</td><td>1852346</td></tr></table></body>
在<td>或<th>标签中添加rowspan属性实现跨行操作。
<table border="1" cellspacing="0" cellpadding="10"><caption>横跨两行的单元格：</caption><tr><th>姓名</th><td>周安德</td></tr><tr><!--添加rowspan属性，实现跨两行单元格--><th rowspan="2">手机号</th><td>18911450210</td></tr><tr><td>1852346</td></tr></table>
