网页设计与网站建设教程网站制作如何做表格 _生活百科

表格元素详解与练习

文章插图
提到表格，大家最先想到的就是EXCEL这款软件，实际上在对表格的操作上，HTML与EXCEL非常相似。
在展示数据，统计数据方面，表格比文字描述更具表达优势，在网页中，表格也经常被用来展示数据、计划日常安排等内容。如图所示：

文章插图
今天我们就来学习一下如何向页面中添加表格元素。
首先来介绍一下表格元素中的基本标签。
NO.1：<table></table>
这个标签是书写表格的第一个标签，它本身在页面上看不出什么内容，但是它的属性可以控制表格显示的全局样式。这个标签的开始标签写在表格元素的开头，结尾标签写在表格元素的结尾。
NO.2：<caption></caption>
这个标签是表格的标题标签。
NO.3：<tr></tr>
这个标签定义表格的列标签。
NO.4：<th></th>
这个标签是列表标题标签，例如，男生、女士、姓名等。
NO.5：<td></td>
这个标签定义表格的行标签。
OK，这些基本标签就可以构建一个基础的表格元素。示例代码如下：
<table><!– 写在表格元素的开头 –><caption>表格标题</caption><!– 表格标题 –><tr>标题标签<th>姓名</th><!– 标题标签 –><th>年龄</th></tr><tr><td>一列一行</td><td>一列二行</td></tr><tr><td>二列一行</td><td>二列二行</td></tr></table><!– 写在表格元素的结尾 –>

文章插图
页面效果如图所示：没有表格的外边框。

文章插图
如何添加外边框呢？在<table>标签中修改border属性即可，示例代码如下：border=”1″是给表格添加宽为1的边界线。
<table border = "1">效果如图所示：

文章插图
这时，您会发现表格在页面上的尺寸非常?。?可不可以按照页面尺寸来显示表格吗？当然可以，这就需要为<table>标签修改第二个属性width，示例代码如图所示：width = “100%”指的是表格宽度与平面宽度一致。
<table border = "1" width = "100%">效果如图所示：

文章插图
ok！今天的讲解先到这里，明天我会继续为大家讲解<thead></thead>、<tfoot></tfoot>、<tbody></tbody>三个标签，以及合并单元格操作。
今天的完整代码示例如下：

<!DOCTYPE HTML><html><head><title>第一个网页</title></head> <body><h1>第一个网页</h1><hr><h2>表格元素</h2><hr><table border = "1" width = "100%"><caption>表格标题</caption><tr><th>姓名</th><th>年龄</th></tr><tr><td>一列一行</td><td>一列二行</td></tr><tr><td>二列一行</td><td>二列二行</td></tr></table></body> </html>

正所谓万丈高楼平地起，html技术虽然简单，但是内容相对繁琐，也是以后进一步学习网页制作的基?。?希望大家动手写每一段代码，把每一步踩坚实。
【网页设计与网站建设教程网站制作如何做表格】喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：

网页设计与网站建设教程 网站制作如何做表格

网页设计与网站建设教程网站制作如何做表格