HTML_表格的语法及使用

L败落

已于 2023-12-20 17:04:22 修改

阅读量1.2k

点赞数 21

文章标签： html 前端

于 2023-12-08 09:56:45 首次发布

本文链接：https://blog.csdn.net/2301_78311954/article/details/134870129

版权

🐲1、HTML表格介绍：

表格由 < table > 标签来定义。每个表格均有若干行（由 < tr > 标签定义），每行被分割为若干单元格（由 < td > 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格基本框架：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table> <!--table:定义表格-->

    <thead><!--thead:定义表格表头，也就是表格的头部-->
    <tr><!--tr:定义表格的行-->
        <th>姓名</th> <!--th:定义表格的标题栏（文字加粗）-->
        <th>年龄</th>
    </tr>
    </thead>
    
    <tbody><!--tbody:定义表格表身，也就是表格的主体内容。-->
    <tr>
        <td>张三</td><!--td:定义表格的列-->
        <td>18</td>
    </tr>
    </tbody>

    <tfoot><!--tfoot:定义表格表尾，也就是表格的结尾。-->
    <tr>
        <td>李四</td>
        <td>24</td>
    </tr>
    </tfoot>

</table>

</body>
</html>

运行结果：

在这里插入图片描述

🐲2、表格属性：

在这里插入图片描述

border属性值：

<table border="1"> <!--table:定义表格-->

    <thead><!--thead:定义表格表头，也就是表格的头部-->
    <tr><!--tr:定义表格的行-->
        <th>姓名</th> <!--th:定义表格的标题栏（文字加粗）-->
        <th>年龄</th>
    </tr>
    </thead>

    <tbody><!--tbody:定义表格表身，也就是表格的主体内容。-->
    <tr>
        <td>张三</td><!--td:定义表格的列-->
        <td>18</td>
    </tr>
    </tbody>

    <tfoot><!--tfoot:定义表格表尾，也就是表格的结尾。-->
    <tr>
        <td>李四</td>
        <td>24</td>
    </tr>
    </tfoot>

</table>

运行结果：

在这里插入图片描述

🐲3、总结：

< table > 标签的常用属性:

属性	作用	参数
border	表格边框的宽度	1
bordercolor	表格边框的颜色	#fff
cellspacing	单元格之间的间距	5
cellpadding	单元格的上下间距	5
width	表格的总宽度	500
height	表格的总高度	100
align	表格整体对齐方式	left、center、right
bgcolor	表格整体的背景色	#fff

< tr > 标签的常用属性:

属性	作用	参数
bgcolor	行的颜色	#fff
align	行内文字的水平对齐方式	left、center、right
valign	行内文字的垂直对齐方式	top、middle、bottom

< td >、< th > 标签的常用属性:

属性	作用	参数
width	单元格的宽度，设置后对当前一列的单元格都有影响	500
height	单元格的高度，设置后对当前一行的单元格都有影响	100
bgcolor	单元格的背景色	#fff
align	单元格文字的水平对齐方式	left、center、right
rowspan	合并垂直水平方向的单元格	3
colspan	合并水平方向单元格	3
valign	单元格文字的垂直对齐方式	middle、bottom、top