我教女朋友学编程html系列(5) html中table的用法和例子
女朋友不是学计算机的，但是现在从事计算机行业，做技术支持，她想学习编程，因此我打算每天教她一点点，日积月累，带她学习编程，如果其他初学者感兴趣，可以跟着学。
为了将table介绍的简单、生动，具有实战性，我花了3个半小时，写了5个列子，把table的一些重点知识讲了一下，直接看代码吧，一边看一边跟着敲，多动手练习。
1，边框不重叠的3行3列表格
<html>
<head>
<title>
html中table的用法和例子
</title>
</head>
<body>
1，边框不重叠的3行3列表格
<table border="1" >
<tr>
<td>学号</td> <td>姓名</td> <td>性别</td>
</tr>
<tr>
<td>001</td> <td>小强</td> <td>男</td>
</tr>
<tr>
<td>002</td> <td>小芳</td> <td>女 </td>
</tr>
</table>
</body>
</html>
(1)table标签代表“表格”，border是它的属性，“边框”的意思，这里设置边框1像素(1px)。
(2)tr标签代表“行”，每个表格table都是由多行(tr)组成的
(3)td标签代表“单元格”，每行(tr)都包括多个单元格(td)。
(4)表格的每个单元格都有边框，默认是不显示边框的；当给table设置了border="1"之后，就会显示边框，但是边框不重叠。
(5)边框不重叠是不是很丑？你知道怎么让边框重叠吗？往下看。
2，合并边框的3行3列表格
<html>
<head>
<title>
html中table的用法和例子
</title>
</head>
<body>
2，合并边框的3行3列表格
<table border="1" style=" border-collapse:collapse;" >
<tr>
<td>学号</td> <td>姓名</td> <td>性别</td>
</tr>
<tr>
<td>001</td> <td>小强</td> <td>男</td>
</tr>
<tr>
<td>002</td> <td>小芳</td> <td>女 </td>
</tr>
</table>
</body>
</html>
(1)合并表格的边框，需要给table添加样式；样式就是样子、外貌、长相，可以通过style=""来给
任何html标签添加样式，双引号内部采用“属性名称:属性值;”的形式，注意“属性名称”和“属性值”
中间是冒号，不是等号，属性值后面是分号。
(2)属性名称border-collapse的意思是“边框折叠方式”，border是边框的意思，collapse是“折叠”的意思，border-collapse对应的值有3个：separate(边框分开)，collapse(边框折叠)，inherit(从父元素继承border-collapse的值)。
border-collapse默认值为separate，因此，如果需要边框折叠，就需要设置border-collapse:collapse。
(3)表格没有标题，内容很挤，不美观，往下看吧。
3，带有标题、设置了宽度的表格
<html>
<head>
<title>
html中table的用法和例子
</title>
</head>
<body>
<table border="1" style=" border-collapse:collapse;width:80%;" >
<caption align="top">学生信息表</caption>
<tr>
<td style="width:30%;">学号</td> <td style="width:60%;">姓名</td> <td style="width:10%;">性别</td>
</tr>
<tr>
<td >001</td> <td >小强</td> <td>男</td>
</tr>
<tr>
<td>002</td> <td>小芳</td> <td>女 </td>
</tr>
</table>
</body>
</html>
(1)caption标签是表格的标题标签，caption 标签必须紧随 table 标签之后。且每个表格只能定义一个标题。默认标题会显示在表格上方中间，可以使用align属性来
设置标题位置，值有top(顶部)，bottom(底部)，left(左边)，right(右边)。
(2)width:80%;设置了table的宽度为80%，指的是table占父元素(此处是body标签)的百分比。另外，
分别给“学号”、“姓名”、“性别”这3列的宽度设置为30%、60%、10%，指的是td占tr的百分比，而tr
代表一行，又默认宽度为table的宽度。
(3)对于表格，只需要设置第一行各个单元格的宽度就行了，其他行的单元格会继承相同列单元格的宽度，我实验了一下，如果第二行第一列设置为70%，那么所有的第一列都占了70%的宽度，因此，
建议只设置第一行单元格的宽度，而不是所有单元格都设置宽度，不要把自己都搞晕了。
(4)你知道怎么让一个单元格跨多列吗？且让内容居中？表格固定像素宽度？请往下看。
4，用跨列td填充标题，表格固定宽度，单元格居中显示
<html>
<head>
<title>
html中table的用法和例子
</title>
</head>
<body>
4，用跨列td填充标题，表格固定宽度，单元格居中显示
<table border="1" style=" border-collapse:collapse; width:300px; " >
<tr>
<td colspan="3" align="center" >学生信息表</td>
</tr>
<tr>
<td style="width:50px;">姓名</td> <td style="width:200px;">经典</td> <td style="width:50px;">性别</td>
</tr>
<tr>
<td >小强</td><td >
小强你怎么样了小强，小强你不要死啊。我们同甘共苦了那么多年，一直对你供书教学，想不到现在白头人送黑头人。你死了我怎么办啊小强。你醒醒啊，小强！
</td> <td>男</td>
</tr>
<tr>
<td>凤姐</td>
<td>
以我的智商和以我的能力的话，往前推三百年，往后推三百年，总共六百年之内不会有第二个人超过我。
</td> <td>女 </td>
</tr>
</table>
</body>
</html>
(1)固定宽度直接使用像素表示，比如table的宽度设置为300像素，width:300px;
(2)colspan="3"说明了一个单元格跨3列，col是列的意思，span是平铺的意思，组合就是"平铺3列"；如果跨3行，用rowspan="3"，row是行的意思，组合就是“平铺3行”，也就是“跨3行”。
(3)单元格有个属性align，代表内容靠哪边的意思，它的值有left(靠左),right(靠右),center(居中)，align="center"就是让内容“居中”的意思，因此标题就居中了。默认的是靠左，因此，其他单元格的内容都靠左。
(4)坚持一下，最后给你讲讲表格的“固定表格布局”和“自动表格布局”。
5,“固定表格布局”和“自动表格布局”
<html>
<head>
<title>
html中table的用法和例子
</title>
</head>
<body>
5,“固定表格布局”和“自动表格布局”
<table border="1" style=" border-collapse:collapse; table-layout:fixed; width:300px;" >
<tr>
<td colspan="3" align="center" >学生信息表</td>
</tr>
<tr>
<td style="width:50px;">姓名</td> <td style="width:200px;">经典</td> <td style="width:50px;">性别</td>
</tr>
<tr>
<td >小强</td><td >
小强你怎么样了小强，小强你不要死啊。我们同甘共苦了那么多年，一直对你供书教学，想不到现在白头人送黑头人。你死了我怎么办啊小强。你醒醒啊，小强！
</td> <td>男</td>
</tr>
<tr>
<td>凤姐</td>
<td>
以我的智商和以我的能力的话，往前推三百年，往后推三百年，总共六百年之内不会有第二个人超过我。
</td> <td>女 </td>
</tr>
</table>
</body>
</html>
(1)table多了一个样式table-layout:fixed;意思是设置表格布局算法为“固定表格布局”。当设置了fixed时，列宽由表格宽度和列宽度设定，“固定”的意思就是宽度固定不变，有时设置了表格单元格的宽度，但是不起作用(可以在IE6、IE7、IE8上测试一下)，就需要增加样式table-layout:fixed;
我在IE10和猎豹浏览器上测试了1个小时，结果是加上了table-layout:fixed;导致宽度不起作用了，但是，我在公司使用IE8测试程序时，不加table-layout:fixed会导致宽度不起作用，因此，不同浏览器对table-layout的解析是不同的。
(2)table-layout还有另外一个值，automatic，对应“自动表格布局”，也是默认值，列的宽度是由列单元格中没有折行的最宽的内容设定的，也就是单元格宽度和最长一行的内容一致，单元格宽度不是固定的，需要动态计算。
(3)一般情况下，是需要用“固定表格布局”的，设置好表格和单元格的宽度，防止表格因为内容的不同而变形。
在浏览器中查看，效果图我截了2张，如下：
效果图2：
