前端学习——HTML初学__6 HTML常用标签（3）

最新推荐文章于 2024-09-06 22:20:29 发布

龙蛋蛋啊

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量201

点赞数 1

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

本文链接：https://blog.csdn.net/m0_53428059/article/details/125543447

版权

HTML 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

继续进行标签学习：

一、表格标签

表格主要用于显示，展示数据，它可以让数据显示的非常规整，可读性非常好，特别是后台展示数据的时候，一个表格可以将繁杂的数据表现得更加有条理。

表格基本语法如下：

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

<table></table>是用于定义表格的标签，一个table就是一个最大的表格。

<tr></tr>标签定义单元格中的行，必须嵌套在<table></table>中使用。

<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>中。

举个简单例子：

<body>
   <table>
    <tr>
        <td>姓名</td><td>性别</td><td>年龄</td>
    </tr>
    <tr>
        <td>龙龙</td><td>男</td><td>22</td>
    </tr>
    <tr>
        <td>茹茹</td><td>女</td><td>20</td>
    </tr>
   </table>
</body>

显示：

二、表头单元格标签

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

<th>标签表示HTML表格的表头部分，语法规范如下：

<body>
   <table>
    <tr>
        <th>姓名</th><th>性别</th><th>年龄</th>
    </tr>
    <tr>
        <td>龙龙</td><td>男</td><td>22</td>
    </tr>
    <tr>
        <td>茹茹</td><td>女</td><td>20</td>
    </tr>
   </table>
</body>

此时运行如下：

当然单元格内容也可以放图片，链接等等等等的哦！

三、表格属性

表格属性不常用！以后学习CSS时设置，这里了解一下就行啦。

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

注意这些属性要写到表格标签table里面去，仅添加边框时，默认单元格之间是有空白的，如果不想要将cellspacing的值设为0即可，举个栗子：

<body>
   <table align="center" border="1" cellpadding="20" cellspacing="0">
    <tr>
        <th>姓名</th><th>性别</th><th>年龄</th>
    </tr>
    <tr>
        <td>李龙玺</td><td>男</td><td>22</td>
    </tr>
    <tr>
        <td>茹茹</td><td>女</td><td>20</td>
    </tr>
   </table>
</body>

不再演示啦，很简单的。

四、表格结构标签

有的表格会很长，可以将表格分割成表格头部和表格主体两大部分。

<thead>标签表示表格头部区域

<tbody>标签表示表格主体区域

上述代码更改后可以这样子：

<body>
   <table align="center" border="1" cellpadding="20" cellspacing="0">
    <thead>
    <tr>
        <th>姓名</th><th>性别</th><th>年龄</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>李龙玺</td><td>男</td><td>22</td>
    </tr>
    <tr>
        <td>茹茹</td><td>女</td><td>20</td>
    </tr>
    </tbody>
   </table>
</body>

五、合并单元格

特殊情况下可以把多个单元格合并为一个单元格，这里学一下最简单的合并单元格。

合并单元格方式：

1.跨行合并：rowspan="合并单元格的个数"，举个例子：第二行的第一个单元格与第三行的第一个单元格进行合并。

2.跨列合并：colspan="合并单元格的个数"，举个例子：第一行的第二个单元格与第一行的第三个单元格进行合并。

目标单元格：

合并单元格代码要写在目标单元格身上。如果是跨行，将最上侧作为目标单元格写合并代码；如果是跨列，将最左侧作为目标单元格写合并代码。

演示代码如下：

最初三行三列表格

<body>
   <table align="center" border="1" cellpadding="20" cellspacing="0" width="400">
    <tr>
        <td></td><td></td><td></td>
    </tr>    
    <tr>
        <td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td>
    </tr>
   </table>
</body>

第一行的第二个单元格与第一行的第三个单元格进行合并，第二行的第一个单元格与第三行的第一个单元格进行合并。

<body>
   <table align="center" border="1" cellpadding="20" cellspacing="0" width="400">
    <tr>
        <td></td><td colspan="2"></td>
    </tr>
    <tr>
        <td rowspan="2"></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td>
    </tr>
   </table>
</body>

合并后如下图：