用table做一页简单的表格,table表格变成excel

首页 > 经验 > 作者:YD1662022-10-29 00:56:35

用table做一页简单的表格,table表格变成excel(1)

上篇文章介绍了div标签的作用,我们这篇文章主要来看下过气表格标签table的语法与使用。

1)table的曾经

在div没有出现之前,table曾是做网页的中坚力量。记得在开始学网页的时候,div是神马,我不造呀!做网页还用div吗,就只用table就可以了,各种表格嵌套加嵌套,一个网页就拼凑出来了。但table写的布局页面做维护就比较令人头痛欲裂了。因为table是一层一层嵌套,标签量冗余过多。所以修改起来就是动一发而牵全身。维护起来格外麻烦,往往是拆东墙补西墙。所以它后来就慢慢被div所替代。但是在数据列表上还是用table形式来写比较的合理,所以现在table多用于网站后台的表格数据处理中。

2)表格标签table使用

简单的表格由table元素以及一个或多个tr(行标签)、th(表头单元格标签)、td(普通单元格标签)等标签所组成,当然复杂的表格还包括caption(表格标题)、col(定义列)、colgroup(对表格中的列进行组合)、thead(组合表头的内容)tbody(组合表格的主题内容)、tfoot(组合表格的脚注内容)等这里我们先简单了解下即可。

定义表格:<table></table>

创建表行:<tr></tr>

创建列(单元格):<th></th>(表头)、<td></td>(表格单元)

注意:默认情况下,每行中的列数是统一的。

比如我们想创建一个姓名、年龄、分数和日期的数据表格,并设置border为1,我们可以使用table来制作。具体的表格代码如下图所示:

用table做一页简单的表格,table表格变成excel(2)

在网页中呈现的效果就如下图所示:

用table做一页简单的表格,table表格变成excel(3)

3)为表格添加简单样式

这时候有的人就会说了,为什么这个表格看起来这么奇怪,边框都是有空隙的呢?我们只需要给表格添加一些特殊的样式,即可制作一个比较漂亮好看的表格了。添加的样式代码:

用table做一页简单的表格,table表格变成excel(4)

在网页中呈现的效果就如下图所示:

用table做一页简单的表格,table表格变成excel(5)

现在我们的表格是不是看着比较的清新了,上面的css代码中为表格添加了背景、边框以及去掉了粗的边线。具体的css代码我们会在以后的课程中为大家介绍,大家在这里只需要知道并了解table标签的作用以及使用就可以了。没事可以多用table写一写表格,熟能生巧。

附赠一句经典语录:每天早上,你有两个简单的选择:是睡回笼觉,还是起身追逐 梦想 。喜欢我的文章的小伙伴记得关注一下哦,每天将为你更新最新知识。

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.