前端——10.表格标签

最新推荐文章于 2024-05-11 14:22:31 发布

L纸鸢

最新推荐文章于 2024-05-11 14:22:31 发布

阅读量624

点赞数

分类专栏：前端文章标签： html 前端 css html5 学习

本文链接：https://blog.csdn.net/m0_52096593/article/details/129487729

版权

前端专栏收录该内容

15 篇文章 2 订阅

订阅专栏

这篇文章，我们来讲一下HTML中的表格标签

1.表格标签概述

表格标签是实际开发中非常常用的标签。我们要熟练的使用它。下面，我们从两个方面来具体的讲解一下表格标签：

表格的主要作用
表格的基本语法

2.表格的主要作用

表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现的很有条理。

表格是用来展示数据的，也是用来布局页面的

如上图所示，这就是一个表格，就是用来展示数据的。

3.表格的基本语法

下面说一下表格的基本语法：

    <table>
        <tr>
            <td>单元格内的文字</td>
            ...
        </tr>
        ...
    </table>

解析：

<table></table>是用来定义表格的标签
<tr></tr>标签是用来定义表格中的行的，必须嵌套在<table></table>标签中
<td></td>标签是用来定义表格中的单元格的，必须嵌套在<tr></tr>标签中
字母td指表格中的数据（table data），即数据单元格的内容

下面用张图来解析一下：

4.实际演示

下面演示一下表格的使用

如上图所示：只是显示了数据，并没有表格。从这里我们就可以看出，这些标签就是很简单的用来展示数据并且布局页面的，没有表格线，

5.表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。

<th>标签表示HTML表格的表头部分（table head的缩写）

代码格式如下：

    <table>
        <tr> 
            <th>姓名</th> 
            ...
        </tr>
        ...
    </table>

解析：<th>与<td>是同一类型的标签，都是用来定义表格中的单元格的，只不过<th>是表头标签，被它括起来的文字会加粗居中显示

小结：表头单元格也是单元格，常用于表格第一行，突出重要性，表头单元格里面的文字会加粗居中显示。

下面看一下实际的案例：

6.表格的属性

看了上面的例子，可能就会有人问，为什么表格没有边框啊？其实像表格边框之类的就属于我们的表格属性了。表格标签这部分属性在实际开发中我们并不常用，因为我们后面会通过CSS来设置。

但是我们还是要学习一下，目的有两个：

记住这些英语单词，后面CSS会用
直观感受表格的外观状态

下面看一下表格的属性：

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或" "	规定表格单元是否拥有边框，默认为" "，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度