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

格元素详解与练习

提到表格，大家最先想到的就是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>标签中修改border属性即可，示例代码如下：border="1"是给表格添加宽为1的边界线。

<table border = "1"><!-- border="1"是给表格添加宽为1的边界线 -->

效果如图所示：

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

<table border = "1" width = "100%"><!-- 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技术虽然简单，但是内容相对繁琐，也是以后进一步学习网页制作的基础，希望大家动手写每一段代码，把每一步踩坚实。

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

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中的<div>块元素——零基础自学网页制作

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

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

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

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

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

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

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

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

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

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

次，我们来讲解应用 CSS 来装饰表格。

如何制作一个表格，我们在HTML课程中已经学习过了。现在，我们通过样式，让表格变得更加美观易用。

首先来学习如何定义表格边框。

要在CSS中指定表格的边框，可以使用 border 属性。我们来举个例子。

创建 tables.html 文件和 tables-style.css 文件。在 html 里构建基础代码，引入外部样式。

在 body 里编写 emmet 命令：table>(tr>th*2)+(tr>td*2)*3，填入一些文本。

HTML
<table>
    <tr>
      <th>千锋名师</th>
      <th>最新作品</th>
    </tr>
    <tr>
      <td>浠浠呀</td>
      <td>《HTML+CSS前端入门》</td>
    </tr>
    <tr>
      <td>陆荣涛</td>
      <td>《Vite学习指南》</td>
    </tr>
    <tr>
      <td>Kerwin</td>
      <td>《Vue2+Vue3全套教程》</td>
    </tr>
  </table>

在浏览器里预览效果：表格的结构有了，还没有边框。大家还记得如何通过 html 属性定义边框吗？可以评论上告诉我。

现在，我们通过样式来给表格添加边框。定义群组选择器 table, th, td，声明样式：border: 1px solid。

再看效果，表格线出现了，可是外观上看，线条有点粗。是因为 table、th和td元素都有独立的边框。

CSS
table, th, td {
  border: 1px solid;
}

可以应用 border-collapse 属性，把表格的边框折叠成一个单一的边框。

回到 CSS，再给 table 元素声明样式：border-collapse: collapse。

此时，表格线变细了。

CSS
table {
  border-collapse: collapse;
}

当前表格看起来很小，如果我们需要一个横跨整个屏幕的表格，该如何实现呢？

回到CSS，再给 table 添加样式 width: 100%。

再看一下效果，表格横向撑满了整个屏幕。

接下来，我们来定义表格的宽度和高度。

width 和 height 属性用来定义表格的宽度和高度。我们来实验一下。

将 table 的 width 属性修改为 50%，再给 th 声明样式 height: 70px。

我们看，表格宽度缩小了一半，同时表头的高度也变大到 70px 了。

接下来，我们来设置表格的对齐方式。

text-align 属性用来设置 th 或 td 中内容的水平对齐方式，如居左、居右或居中对齐。默认情况下，th 元素的内容是居中对齐的，td 元素的内容是左对齐的。要使 td 元素的内容也居中对齐，可以使用text-align: center。举个例子：

回到CSS，给 td 添加样式：text-align: center。

此时，全部 td 里的内容在单元格里水平居中显示了。

要使内容左对齐，可以使用 text-align: left 属性。

比如将 th 元素的对齐方式改为左对齐。

CSS
th {
  height: 70px;
  text-align: left;
}

vertical-align 属性用来设置 th 或 td 中内容的垂直对齐方式。如顶部对齐、底部对齐或中间对齐。默认情况下，对于 th 和 td 元素，表格中内容的垂直对齐方式是中间对齐。举个例子：

回到 CSS，给 td 添加样式：height: 50px，vertical-align: bottom。

我们看， td 单元格里的内容垂直底部对齐了。

接下来，给表格添加内填充、水平分隔线、鼠标滑过高亮及颜色等样式。

要控制表格中边框和内容之间的空间，可以给 td 和 th 元素设置 padding 属性。

回到 CSS，先注释掉 th 和 td 的样式。定义选择器 th, td，声明样式：padding: 15px，text-align: left。

CSS
th, td {
  padding: 15px;
  text-align: left;
}

看一下效果，内容和边框线之间就具有了 15px 的填充。

接下来通过给 th 和 td 添加 border-bottom 属性，实现表格的水平分隔线效果。

注释掉原有的 border 属性，给 th 和 td 添加样式：border-bottom: 1px solid #ddd。

CSS
table, th, td {
  /* border: 1px solid; */
}
th, td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

我们看，水平分隔线的表格效果就实现了。

在 tr 上使用 :hover 选择器，在鼠标移过时突出显示表格的行。

回到CSS，定义选择器 tr:hover，声明样式：background-color: coral。kerou

当鼠标滑过每一行时，当前行就高亮显示了。

我们也可以专门给某一行添加背景色，比如给 th 添加一个绿色背景。

再单独给 th 定义样式：background-color: #04AA6D，color: white;

CSS
th {
  background-color: #04AA6D;
  color: white;
}

这样，通过给 th 添加背景色，使表头的显示更加醒目了。

本文配套教程链：https://www.bilibili.com/video/BV1oU4y1278g?p=101

格空间设置

通过为<table></table>标签的cellspacing进行赋值可以调整单元格与单元格之间的空间距离。

示例代码如下：

<table border = "1" width = "100%" cellspacing = "50">

页面效果如下：

下面我们删除cellspacing = "50"这段代码看看变化，如图：

通过对比，大家应该明白cellspacing这个属性的作用了吧。

通过为<table></table>标签的cellpadding进行赋值可以调整单元格边框与单元格内容之间的空间距离。

示例代码如下：

<table border = "1" width = "100%" cellspacing="10" cellpadding = "20">

页面效果如下：

通过与上图对比，我们不难发现变化。

设置表格颜色

这里我们要介绍一个全局属性style，对，你没看错！就是freestyle的那个style！英文翻译过来是"样式"、"风格"的意思。我们通过这个属性可以为表格设置颜色。实际上，可以为任何html元素设置颜色、大小、排列等不同属性！

值得一提的是把style信息如果写到一个独立文件中，并保存为css文件，就是以后我们要学的CSS层叠样式列表了。

这里我们先来简单了解一下它作为html的一个全局属性的用法。

示例代码如下：

<table border = "1" width = "100%" cellspacing="10" cellpadding = "20" style = "background-color: #00ffff;">

页面效果如图所示：

我们来分析一下这段代码，写法和其他属性大同小异。

首先也是才有"属性"="数值"的写法，具体是：style=""

是不是和其他属性写法一样？

但是到了双引号里面就不同了，比如width属性只需要为其赋值就可以，比如width="100%"。

而style是在双引号里面再指定属性。例如：style="background-color"。

然后我们再为background-color（背景颜色）属性赋值。

这时，赋值的写法就发生变化了，不是使用=号，而是使用：。

例如style="background-color ： #00ffff；"

大家注意的是为其赋值后，要用；结尾。这个；必须要添加，因为，通过style可以指定多个不同的样式属性，在指定多个样式属性时，我们使用；分割。

#00ffff这个符号是色彩的16进制表示方法，这个颜色是蓝色。

#000000这个符号的颜色是黑色。

#ffffff这个符号是白色。

这个颜色的算法我们会在下一期中详细讲解，感兴趣的小伙伴请关注！

大家想一想。如何为一列单元格指定背景颜色呢？

示例代码如下：我们为表格标题栏赋予绿色。

<tr style = "background-color: #00ff00;"><th>姓名</th><th>年龄</th></tr>

页面效果如图所示：

下面我们为"一列一行"、"二列一行"赋予红色。

示例代码如下：

<tr>
  <td style = "background-color: #ff0000;">一列一行</td>
  <td>一列二行</td>
</tr>
<tr>
    <td style = "background-color: #ff0000;">二列一行</td>
    <td>二列二行</td>
</tr>

页面效果如下：

今天的内容到此结束了，一下是今天示例的全部代码：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一个网页</title>
  </head> 
  <body>
  <h1>第一个网页</h1><hr>
  <h2>表格元素</h2><hr>
  <table border = "1" width = "100%" cellspacing="10" cellpadding = "20" style = "background-color: #00ffff;">
  <caption>表格标题</caption>
  <tr style = "background-color: #00ff00;">
  <th>姓名</th>
  <th>年龄</th>
  </tr>
  <tr>
  <td style = "background-color: #ff0000;">一列一行</td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td style = "background-color: #ff0000;">二列一行</td>
  <td>二列二行</td>
  </tr>
  </table>
  </body> 
  </html>

明天将继续为大家讲解页面制作中16进制的颜色指定方式和另外一种表格颜色指定方式。

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

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中的<div>块元素——零基础自学网页制作

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

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

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

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

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

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

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

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

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

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

在线咨询

上一篇：使用 DITA 内容为 Google Dialogflow 聊天机器人或百度UNIT 创建知识库
下一篇：如何一次开发生成android,ios（可无开发者账号）,Html5 web app

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

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

HTML完整学习目录

格空间设置

HTML完整学习目录

您的项目需求