零基础教你学前端-89、CSS表格

次，我们来讲解应用 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

果想开发一个网站，除了要精通后端开发语言（如：php）外，还要精通HTML代码。那么，什么是HTML呢？HTML是一种超文本标记语言，它包含有众多的标签，我们可以通过这些标签，把不同的internet资源（如：文字、图片、视频、音频、表单等等）整合在一个统一的文档中，这就形成了我们可以看得见的网页。那么，HTML都有哪些常用的标签呢？

一、文档类型声明。

html5文档类型声明：<!doctype html>

html4文档类型声明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二、html主标签。

这个标签是html最外层的标签，所有其它的HTML标签都要放在这个标签的内部。

<html>

</html>

三、双标签和单标签。

在HTML标签中，有的标签是成双成对的，如：<html></html>（如下图）；而有的标签是单个的，如：<hr>横线标签。

四、head头部标签。

head头部有以下几种常用标签：

meta：主要提供有关页面的元信息。

link：用来定义文档与外部资源的关系，最常用的是调用CSS样式文件。

title：页面标题的标签。

script：用来调用JS文件或JS代码。当然，script标签也可以在body主体中使用。

五、body主体标签。

1、块级标签。

块级标签的特性是：独自占有一行；标签的高与宽、边距可以修改；没有设置宽与高时，默认继承父标签。例如：

<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>

前端页面显示的效果如下图：

常用的块级标签有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

2、内联标签。

内联标签与块级标签不同，它不能独自占有一行，会与其它内联标签在同一样展示；内联标签的高与宽、上下边距是不能修改的，它里面的文字或图片有多高，它就是多高。例如如下代码：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>

CSS样式代码跟块级标签的例子是一样的，而显示的效果就不一样了，宽与高、上下边距没有效果。如下图：

常用的内联标签有：span、a、b、strong、i、em 。

3、内联块级标签。

内联块级标签，既有一些内联标签的特性，也有一些块级标签的特点：它不能独自占有一行，但是可以修改它的宽度和高度。例如下面这段代码：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">

CSS样式代码跟块级标签的那个例子仍然是一样的，图片的宽和高、上下边距修改成功，而2个图片不能独自占有一行，而是在同一行。如下图：

常用的内联块级标签有：img、input、textarea。

4、区域标签。

所谓区域标签，就是主要用来划分布局页面区域的。如：头部、主体内容、侧边栏、底部。这样划分的好处是：让页面布局更加清晰明了。

常用的区域标签有：header（头部）、footer（底部）、nav（导航）、aside（侧边栏）、section（主体）、article（独立内容）。

5、表单标签。

这个表单标签我们也是会经常用到的，如：登录网站的时候、提交数据的时候。如下图的评论表单：

?表单常用的标签有：form、input、select、option、textarea 。

以上就是我们开发网页时，会常用到的HTML标签。当然，HTML标签远不止这些，尤其是html5出来后，新增了许多的新标签。但是，有些标签在我们开发中很少用到，所以，这里就没有做相应的介绍。

OCTYPE（文档类型声明）是放置于HTML或XHTML文档开头的指令，用于指示浏览器使用哪种解析模式来渲染页面。它告诉浏览器使用的是哪个HTML或XHTML版本的规范，并且帮助浏览器正确地渲染和解析当前页面内容。

在HTML5中，DOCTYPE声明相对简洁，通常只需要写<！DOCTYPE html>。这是因为HTML5引入了更宽松的解析模式，使得开发者不再需要严格地遵循XHTML那样的规则。而在过去的HTML或XHTML版本中，DOCTYPE声明可能会更加复杂。

在XHTML 1.0 Strict规范中，DOCTYPE声明需要包含<IDOC TYPE html PUBLIC-// W3C//DTD XHTML 1.0 Strict// EN ttp：// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>。

DOCTYPE的作用包括：

1. 渲染模式指定：DOCTYPE声明决定了浏览器选择使用哪种渲染模式，如标准模式（Artist Mode）或怪异模式。

2. DOCTYPE声明指示了页面使用的是哪个HTML或XHTML版本的规范，从而帮助浏览器正确地解析页面。

3. 浏览器兼容性：DOCTYPE声明有助于确保页面在不同浏览器中以一致的方式渲染，从而提高跨浏览器兼容性。

总的来说，DOCTYPE声明是确保你的网页在各种浏览器中正确显示的关键。在现代Web开发中，随着HTML5的普及，简洁的<！DOCTYPE html>成为了主流，使得开发更加方便。

在线咨询

上一篇：HTML5新增了哪些结构标签？
下一篇：实在！基于Springboot和WebScoket，

您的项目需求

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