html 表格_使用HTML添加表格1（基本元素）——零基础自学网页制作

表格元素详解与练习

提到表格，大家最先想到的就是EXCEL这款软件，实际上在对表格的操作上，HTML与EXCEL非常相似。

在展示数据，统计数据方面，表格比文字描述更具表达优势，在网页中，表格也经常被用来展示数据、计划日常安排等内容。如图所示：

今天我们就来学习一下如何向页面中添加表格元素。

首先来介绍一下表格元素中的基本标签。

NO.1：

这个标签是书写表格的第一个标签，它本身在页面上看不出什么内容，但是它的属性可以控制表格显示的全局样式。这个标签的开始标签写在表格元素的开头，结尾标签写在表格元素的结尾。

NO.2：

这个标签是表格的标题标签。

NO.3：

这个标签定义表格的列标签。

NO.4：

这个标签是列表标题标签，例如，男生、女士、姓名等。

NO.5：

这个标签定义表格的行标签。

OK，这些基本标签就可以构建一个基础的表格元素。示例代码如下：

表格标题

姓名	年龄
一列一行	一列二行
二列一行	二列二行

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

如何添加外边框呢？在

效果如图所示：

这时，您会发现表格在页面上的尺寸非常小，可不可以按照页面尺寸来显示表格吗？当然可以，这就需要为

标签修改第二个属性width，示例代码如图所示：width = "100%"指的是表格宽度与平面宽度一致。

效果如图所示：

ok！今天的讲解先到这里，明天我会继续为大家讲解、

、三个标签，以及合并单元格操作。

今天的完整代码示例如下：

       第一个网页

第一个网页

表格元素

表格标题姓名年龄一列一行一列二行二列一行二列二行

正所谓万丈高楼平地起，html技术虽然简单，但是内容相对繁琐，也是以后进一步学习网页制作的基础，希望大家动手写每一段代码，把每一步踩坚实。

喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！

HTML完整学习目录

HTML序章(学习目的、对象、基本概念)——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2(路径详解)——零基础自学网页制作

使用HTML添加表格1(基本元素)——零基础自学网页制作

使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作

使用HTML添加表格3(间距与颜色)——零基础自学网页制作

使用HTML添加表格4(行颜色与表格嵌套)——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的

块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3(下拉列表、多行文字输入)——零基础自学网页制作

HTML表单4(form的action、method属性)——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用标签实现文本内链接——零基础自学网页制作