当前位置： 首页 > article >正文

html-表格标签

article 2025/3/13 7:17:13

一、表格标签

1. 表格的主要作用

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

总结: 表格不是用来布局页面的,而是用来展示数据的.

2.表格的基本语法

<table>
  <tr>
    <th>表头</th>
    <td>数据</td>
  </tr>
</table>

  • <th>：表头单元格，内容加粗居中

1. <table> </table> 是用于定义表格的标签｡

2. <tr> </tr> 标签用于定义表格中的行,必须嵌套在 <table> </table>标签中｡

3. <td> </td> 用于定义表格中的单元格,必须嵌套在<tr></tr>标签中｡

4. 字母 td 指表格数据(table data),即数据单元格的内容｡

<th>：Table Head Cell，表头单元格，

<table>：Table，用于定义表格，是整个表格结构的容器标签，包含表格的所有内容。

<tr>：Table Row，用于定义表格中的行，在<table>标签内部，通过<tr>标签来划分不同的行，每一行包含多个单元格。

<td>：Table Data Cell，用于定义表格中的单元格，在<tr>标签内部，每个<td>标签代表一个数据单元格，用于存放具体的数据内容 。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表头单元格标签</title>
</head>

<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th> 年龄 </th>
        </tr>
        <tr>
            <td>刘德华</td>
            <td>男</td>
            <td> 56 </td>
        </tr>
        <tr>
            <td>张学友</td>
            <td>男</td>
            <td> 58 </td>
        </tr>
        <tr>
            <td>郭富城</td>
            <td>男</td>
            <td> 51 </td>
        </tr>
        <tr>
            <td>黎明</td>
            <td>男</td>
            <td> 57 </td>
        </tr>
    </table>
</body>

</html>

运行结果：

3.表格属性

表格标签这部分属性我们实际开发我们不常用,后面通过 CSS 来设置.

目的有2个:

1. 记住这些英语单词,后面 CSS 会使用.

2. 直观感受表格的外观形态.

⑴.align：对齐；使一致；使成一行

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格属性</title>
</head>

<body>
    <!-- 这些属性要写到表格标签table 里面去 -->
    <table align="right">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th> 年龄 </th>
        </tr>
        <tr>
            <td>刘德华</td>
            <td>男</td>
            <td> 56 </td>
        </tr>
        <tr>
            <td>张学友</td>
            <td>男</td>
            <td> 58 </td>
        </tr>
        <tr>
            <td>郭富城</td>
            <td>男</td>
            <td> 51 </td>
        </tr>
        <tr>
            <td>黎明</td>
            <td>男</td>
            <td> 57 </td>
        </tr>
    </table>
</body>

</html>

表格在页面的显示位置

center：居中

right：右边

⑵.border：边界；边框；边缘

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格属性</title>
</head>

<body>
    <!-- 这些属性要写到表格标签table 里面去 -->
    <table align="center" border="1">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th> 年龄 </th>
        </tr>
        <tr>
            <td>刘德华</td>
            <td>男</td>
            <td> 56 </td>
        </tr>
        <tr>
            <td>张学友</td>
            <td>男</td>
            <td> 58 </td>
        </tr>
        <tr>
            <td>郭富城</td>
            <td>男</td>
            <td> 51 </td>
        </tr>
        <tr>
            <td>黎明</td>
            <td>男</td>
            <td> 57 </td>
        </tr>
    </table>
</body>

</html>

加变框，

⑶.cellpadding：单元格内边距；单元格填充

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格属性</title>
</head>

<body>
    <!-- 这些属性要写到表格标签table 里面去 -->
    <table align="center" border="1" cellpadding="30">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th> 年龄 </th>
        </tr>
        <tr>
            <td>刘德华</td>
            <td>男</td>
            <td> 56 </td>
        </tr>
        <tr>
            <td>张学友</td>
            <td>男</td>
            <td> 58 </td>
        </tr>
        <tr>
            <td>郭富城</td>
            <td>男</td>
            <td> 51 </td>
        </tr>
        <tr>
            <td>黎明</td>
            <td>男</td>
            <td> 57 </td>
        </tr>
    </table>
</body>

</html>

文字与单元格边框的距离，相当于单元格的长和宽

⑷cellspacing：单元格间距

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格属性</title>
</head>

<body>
    <!-- 这些属性要写到表格标签table 里面去 -->
    <table align="center" border="1" cellpadding="30" cellspacing="0">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th> 年龄 </th>
        </tr>
        <tr>
            <td>刘德华</td>
            <td>男</td>
            <td> 56 </td>
        </tr>
        <tr>
            <td>张学友</td>
            <td>男</td>
            <td> 58 </td>
        </tr>
        <tr>
            <td>郭富城</td>
            <td>男</td>
            <td> 51 </td>
        </tr>
        <tr>
            <td>黎明</td>
            <td>男</td>
            <td> 57 </td>
        </tr>
    </table>
</body>

</html>

单元格与单元格之间的距离

cellspacing="0"

cellspacing="40"

⑸.width或height

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格属性</title>
</head>

<body>
    <!-- 这些属性要写到表格标签table 里面去 -->
    <table align="center" border="1" cellpadding="30" cellspacing="40" width="500" height="500">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th> 年龄 </th>
        </tr>
        <tr>
            <td>刘德华</td>
            <td>男</td>
            <td> 56 </td>
        </tr>
        <tr>
            <td>张学友</td>
            <td>男</td>
            <td> 58 </td>
        </tr>
        <tr>
            <td>郭富城</td>
            <td>男</td>
            <td> 51 </td>
        </tr>
        <tr>
            <td>黎明</td>
            <td>男</td>
            <td> 57 </td>
        </tr>
    </table>
</body>

</html>

是表格的长和宽，不是单元格

二、表格结构标签

使用场景:因为表格可能很长,为了更好的表示表格的语义,可以将表格分割成 表格头部和表格主体两大部分.

在表格标签中,分别用:<thead>标签 表格的头部区域､<tbody>标签 表格的主体区域. 这样可以更好的分清表 格结构｡

。。。。目前看作用不明显，就是写代码分割用的

1. <thead></thead>:用于定义表格的头部｡<thead> 内部必须拥有 <tr> 标签｡ 一般是位于第一行｡

2. <tbody></tbody>:用于定义表格的主体,主要用于放数据本体 ｡

3. 以上标签都是放在 <table></table> 标签中｡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>今日小说排行榜</title>
</head>
<body>
    <table align="center" width="500" height="249" border="1" cellspacing="0">
    <thead>
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>进入搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg"></td>
            <td>456</td>
            <td>123</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>

        <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="up.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
    </tbody>           
    </table>
</body>
</html>

运行结果：

三、 合并单元格

特殊情况下,可以把多个单元格合并为一个单元格, 这里同学们会最简单的合并单元格即可.
1. 合并单元格方式
2. 目标单元格
3. 合并单元格的步骤
 

1.合并单元格方式:

跨行合并:rowspan="合并单元格的个数"，目标单元格为最上侧单元格。

跨列合并:colspan="合并单元格的个数"，目标单元格为最左侧单元格。

跨行合并：Row Span，“rowspan” 是 “Row Span” 的缩写。“Row” 意为行，“Span” 有跨度、跨越的意思，合起来表示跨越行，即跨行合并。

跨列合并：Column Span，“colspan” 是 “Column Span” 的缩写。“Column” 表示列 ，“Span” 同样是跨度、跨越的意思，整体意思是跨越列，即跨列合并。

2.目标单元格:(写合并代码)

跨行:最上侧单元格为目标单元格, 写合并代码

跨列:最左侧单元格为目标单元格, 写合并代码

3.合并单元格三步曲:

1. 先确定是跨行还是跨列合并｡

2. 找到目标单元格. 写上合并方式 = 合并的单元格数量｡比如:<td colspan=“2”></td>｡

3. 删除多余的单元格｡

要求：合成下面这样子

一开始：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>合并单元格</title>
</head>

<body>
    <table width="500" height="249" border="1" cellspacing="0">
        <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>

</html>

运行结果：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>合并单元格</title>
</head>

<body>
    <table width="500" height="249" border="1" cellspacing="0">
        <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>

</html>

运行结果：


http://www.kler.cn/a/582440.html

相关文章：

  • 蓝桥杯省赛真题C++B组-裁纸刀2022
  • 计算机视觉实战｜NeRF 实战教程：基于 nerf_recon_dataset 的三维重建
  • MySQL库和表的操作详解：从创建库到表的管理全面指南
  • 45.HarmonyOS NEXT Layout布局组件系统详解（十二）：高级应用案例与性能优化
  • 无标记点动作捕捉系统，无需穿戴设备，摄像头智能采集人体运动姿态
  • Webpack 优化深度解析：从构建性能到输出优化的全面指南
  • TDengine SQL 函数
  • JVM和运行时数据区
  • 国产化信创操作系统的电脑，能运行windows程序吗
  • 关于回归中R2指标的理解
  • docker搭建elk
  • 【学写LibreCAD】 4.1 RS_Undoable文件
  • 【Linux内核系列】：文件系统
  • 一文说清docker及docker compose的应用和部署
  • UI显示不出来问题（有的能显示出来一个方法，有的数据显示不出来另一个方法），多次尝试无果
  • CSPM-3级国标认证，项目管理如何成为组织变革的核心引擎？
  • 裂变营销策略在“开源链动2+1模式AI智能名片S2B2C商城小程序”中的应用探索
  • JavaScript性能优化实战：让你的Web应用飞起来
  • AI+API引爆数据分析：BI已成过去？
  • 【漫话机器学习系列】133.决定系数（R²：Coefficient of Determination）