我教女朋友学编程html系列(5) html中table的用法和例子

女朋友不是学计算机的,但是现在从事计算机行业,做技术支持,她想学习编程,因此我打算每天教她一点点,日积月累,带她学习编程,如果其他初学者感兴趣,可以跟着学。

为了将table介绍的简单、生动,具有实战性,我花了3个半小时,写了5个列子,把table的一些重点知识讲了一下,直接看代码吧,一边看一边跟着敲,多动手练习。



1,边框不重叠的3行3列表格
<span style="font-family:Microsoft YaHei;font-size:14px;"><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></span>

(1)table标签代表“表格”,border是它的属性,“边框”的意思,这里设置边框1像素(1px)。
(2)tr标签代表“行”,每个表格table都是由多行(tr)组成的
(3)td标签代表“单元格”,每行(tr)都包括多个单元格(td)。
(4)表格的每个单元格都有边框,默认是不显示边框的;当给table设置了border="1"之后,就会显示边框,但是边框不重叠。
(5)边框不重叠是不是很丑?你知道怎么让边框重叠吗?往下看。

2,合并边框的3行3列表格
<span style="font-family:Microsoft YaHei;font-size:14px;"><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></span>

(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,带有标题、设置了宽度的表格
<span style="font-family:Microsoft YaHei;font-size:14px;"><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></span>

(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填充标题,表格固定宽度,单元格居中显示
<span style="font-family:Microsoft YaHei;font-size:14px;"><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></span>
(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,“固定表格布局”和“自动表格布局”
<span style="font-family:Microsoft YaHei;font-size:14px;"><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>
</span>

(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张,如下:
我教女朋友学编程html系列(5) html中table的用法和例子_第1张图片



效果图2:

我教女朋友学编程html系列(5) html中table的用法和例子_第2张图片


你可能感兴趣的:(html)