HTML：表格的应用知识

最新推荐文章于 2024-06-20 10:34:39 发布
原创 最新推荐文章于 2024-06-20 10:34:39 发布 · 1.3k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html

1.创建表格

在HTML中，表格主要通过三个标记来构成，即表格标记（table）、行标记（tr）、单元格标记（td）。
1.1表格的基本构成
表格中各元素的含义如下：

元素含义
行和列横向为行，纵向为列
单元格行列交叉的部分
边距单元格中的内容和表框之间的距离
间距单元格和单元格之间的距离
边框整张表格的边缘叫边框
三要素行、列、单元格
嵌套在一张表格的单元格中插入另一张表格，大小受单元格的大小限制

1.2表格的标题
表格中的表格标题通过caption标签来实现。
语法描述如下：

<caption>表格的标题</caption>

1.3表格的表头
表头是表格中一种特殊的单元格，一般位于第一行，用来表示这一列的内容类别。
语法描述如下：

<table>
        <tr>
            <th>单元格中的内容</th>
            <th>单元格中的内容</th>
        </tr>
    </table>

表格（包含标题与表头）的制作实例代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table>
        <caption>成绩单</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>98</td>
            <td>99</td>
            <td>97</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>93</td>
            <td>96</td>
            <td>97</td>
        </tr>
    </table>
</body>

</html>

代码运行结果如下图：
在这里插入图片描述

2.设置表格边框样式

2.1给表格设置边框
border属性被指定时浏览器才会显示表格的边框。
语法描述如下：

<table border="参数值"></table>

设置表格边框示例代码如下：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1">
        <caption>成绩单</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>98</td>
            <td>99</td>
            <td>97</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>93</td>
            <td>96</td>
            <td>97</td>
        </tr>
    </table>
</body>

</html>

代码运行结果如下图：
在这里插入图片描述
2.2给表格边框设置颜色
如果没有自行设置边框颜色，边框在浏览器中显示就是灰色的，可以使用bordercolor属性进行边框颜色的设置。
语法描述如下：

<table bordercolor="颜色值"></table>

设置表格边框颜色的示例代码如下：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1" bordercolor="green">
        <caption>成绩单</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>98</td>
            <td>99</td>
            <td>97</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>93</td>
            <td>96</td>
            <td>97</td>
        </tr>
    </table>
</body>

</html>

代码运行结果如下图：
在这里插入图片描述
2.3表格中的单元格边距
单元格之间的间距用cellspacing属性进行设置，宽度值是像素。
语法描述如下：

<table cellspacing="值"></table>

设置表格单元格边距的示例代码如下：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1" bordercolor="green" cellspacing="10">
        <caption>成绩单</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>98</td>
            <td>99</td>
            <td>97</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>93</td>
            <td>96</td>
            <td>97</td>
        </tr>
    </table>
</body>

</html>

代码运行结果如下图：
在这里插入图片描述
2.4表格中文字与边框边距
单元格中的文字在没被设置的情况是紧贴在单元格边框上的，若要设置文字与边框之间的距离就要用到cellpadding属性。
语法描述如下：

<table cellpadding="值"></table>

设置表格单元格边距的示例代码如下：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1" bordercolor="green" cellspacing="10" cellpadding="5">
        <caption>成绩单</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>98</td>
            <td>99</td>
            <td>97</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>93</td>
            <td>96</td>
            <td>97</td>
        </tr>
    </table>
</body>

</html>

代码运行结果如下图：
在这里插入图片描述

3.设置表格大小和行内属性

3.1设置整张表格的大小
表格的大小（宽和高）可以利用width和height属性来设置。这两个属性值可以是数字或者百分数，数字是表示表格的宽（高）所占的像素点，百分数是表示表格的宽（高）占据浏览器窗口的宽（高）度的百分比。
语法描述如下：

<table width="值" height="值"></table>

设置表格大小的示例代码如下：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1" width="200" height="150">
        <caption>成绩单</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>98</td>
            <td>99</td>
            <td>97</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>93</td>
            <td>96</td>
            <td>97</td>
        </tr>
    </table>
</body>

</html>

代码运行结果如下图：
在这里插入图片描述

3.2设置行的背景颜色及大小
bgcolor属性用来设置行（只是当前行）背景颜色，且会覆盖表格本来的颜色。
语法描述如下：

 <tr height="值" bgcolor="值"></tr>

设置行的背景颜色及大小的示例代码如下：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1" width="200" height="150">
        <caption>成绩单</caption>
        <tr height="50" bgcolor="skyblue">
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>98</td>
            <td>99</td>
            <td>97</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>93</td>
            <td>96</td>
            <td>97</td>
        </tr>
    </table>
</body>

</html>

代码运行结果如下图：
在这里插入图片描述
3.3设置行内文字的对齐方式
如果要单独给表格内的某一行（单元格）设置不同的对齐方式，就需要用到align（水平对齐）和valign（垂直对齐）属性。设置此属性后会覆盖表格的原有对齐样式。
水平对齐方式有三种：left、center、right；
垂直对齐方式有三种：top、middle、bottom。
水平对齐：
语法描述如下：

 <tr align="值"></tr>

垂直对齐：
语法描述如下：

 <tr valign="值"></tr>

设置水平对齐（姓名为张三行）和垂直对齐（姓名为李四行）的示例代码如下：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1" width="200" height="150">
        <caption>成绩单</caption>
        <tr height="50" bgcolor="skyblue">
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
        </tr>
        <tr align="center">
            <td>张三</td>
            <td>98</td>
            <td>99</td>
            <td>97</td>
        </tr>
        <tr valign="top">
            <td>李四</td>
            <td>93</td>
            <td>96</td>
            <td>97</td>
        </tr>
    </table>
</body>

</html>

代码运行结果如下图：
在这里插入图片描述

4.设置表格的背景

为了美化表格，可以为其设置背景颜色或者背景图。
4.1背景颜色：
语法描述如下：

<table bgcolor="值"></table>

设置背景颜色的示例代码如下：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table bgcolor="skyblue" border="1" width="200" height="150">
        <caption>成绩单</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>98</td>
            <td>99</td>
            <td>97</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>93</td>
            <td>96</td>
            <td>97</td>
        </tr>
    </table>
</body>

</html>

代码运行结果如下图：
在这里插入图片描述
4.2背景图：
语法描述如下：

<table background="图片地址"></table>

设置背景图的示例代码如下：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1" width="200" height="150" background="蓝忘机.jpg">
        <caption>成绩单</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>98</td>
            <td>99</td>
            <td>97</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>93</td>
            <td>96</td>
            <td>97</td>
        </tr>
    </table>
</body>

</html>

代码运行结果如下图：
在这里插入图片描述

5.设置单元格的样式

单元格是表格的基本单位，每个单元格都可以设置不同的样式，如颜色、跨度、对齐方式等，这些样式可以覆盖原表格或原某一行的样式。
5.1设置单元格的大小：
如果不单独设置单元格的属性，其宽度和高度都会根据内容自动调整。想要单独设置单元格大小，就要设置其width和height属性。
语法描述如下：

<td width="值" height="值"></td>

设置单元格大小的示例代码如下：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1" width="200" height="150">
        <caption>成绩单</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
        </tr>
        <tr>
            <td width="50" height="30">张三</td>
            <td>98</td>
            <td>99</td>
            <td>97</td>
        </tr>
        <tr>
            <td height="50">李四</td>
            <td>93</td>
            <td>96</td>
            <td>97</td>
        </tr>
    </table>
</body>

</html>

代码运行结果如下图：
在这里插入图片描述
5.2设置单元格的背景颜色
单元格与表格的背景颜色设置都是通过bgcolor属性实现，不过单元格的背景颜色会覆盖表格的背景颜色。
语法描述如下：

<td bgcolor="值"></td>

设置单元格背景颜色的示例代码如下：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1" width="200" height="150">
        <caption>成绩单</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
        </tr>
        <tr>
            <td bgcolor="skyblue">张三</td>
            <td>98</td>
            <td>99</td>
            <td>97</td>
        </tr>
        <tr>
            <td bgcolor="skyblue">李四</td>
            <td>93</td>
            <td>96</td>
            <td>97</td>
        </tr>
    </table>
</body>

</html>

代码运行结果如下图：
在这里插入图片描述
5.3设置单元格的边框颜色
通过bordercolor属性来设置单元格的边框属性。
语法描述如下：

<td bordercolor="值"></td>

设置单元格边框颜色的示例代码如下：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1" width="200" height="150">
        <caption>成绩单</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
        </tr>
        <tr>
            <td bordercolor="#ff0000">张三</td>
            <td>98</td>
            <td>99</td>
            <td>97</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>93</td>
            <td>96</td>
            <td>97</td>
        </tr>
    </table>
</body>

</html>

代码运行结果如下图（网上查过，颜色未发生改变应该是HTML兼容问题，但代码正确）：
在这里插入图片描述

5.4合并单元格

在表格设计时，有时需要将两个或多个相邻的单元格进行合并，这时就需要用到colspan属性（列间合并）和rowspan属性（行间合并）。举个例子：如果需要将两行相邻的两个单元格进行合并，在第一个单元格设置rowspan属性，后一个相应的空单元格删掉即可。
行间合并：
语法描述如下：

<td rowspan="值"></td>

列间合并：
语法描述如下：

<td colspan="值"></td>

设置行间、列间单元格合并的示例代码如下：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <td colspan="值"></td>
    <table border="1" width="200" height="150">
        <caption>成绩单</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td colspan="2">98</td>
            <td rowspan="2">97</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>93</td>
            <td>96</td>
        </tr>
    </table>
</body>

</html>

代码运行结果如下图：
在这里插入图片描述

_堇忆
关注
HTML表格应用
weixin_34212762的博客
05-07 340
HTML表格表格标签表格在数据展示方面非常简单，并且表现优秀，通过与CSS的结合，可以让数据变得更加美观和整齐。tr: table rowth: table headtd: table data行、列、单元格 单元格特点：同行等高、同列等宽表格的基本语法：创建一个3行3列的表格：<table border="1px" width="300px"><tr><!--tr...
html表格
LIJIWEI0611的博客
08-22 368
表格 table 表格作用： 较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。 因为它可以让数据显示的非常的规整，可读性非常好。 特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理，虽然 div 布局也可以做到，但是总没有表格来得方便。 1. 创建表格 在HTML网页中，要想创建表格，就需要使用表格相关的标签。 创建表格的基本语法： <table> &l...
html网页中表格的各种应用
Roben_的博客
10-30 673
第六周布置了前五周的作业 复杂程度循序渐进，没听课的我根据一些博客做了一下。 作业1 <!DOCTYPE html> <html lang="en"> <meta charset="UTF-8"> <title>作业1</title> </head> <body> <table border="2" width="400" cellpadding="30" bordercolor="#7ff
html表格应用
01-12 254
表格的应用 姓名1 学号 性别 身份 小王 A11 男 工程师 小虎 A11 男 学生 小昭 A11 女 学生
【HTML】表格应用
qq_45677671的博客
03-31 404
文章目录一、表格属性二、合并行列三、属性补充（css）3.1、单元格间距3.2、合并相邻单元格边框3.3、无内容时单元格的设置：3.4、显示单元格行和列的算法（加快运行速度）3.5、设置表格标题的位置 一、表格属性 表格标签和属性 <table> 标签：定义表格 border="10"/10：设置表格边框厚度，可为number或string类型，0表示没有边框 <th> 标签：定义表格的表头 colspan=2：规定单元格可横跨的列数，为number类型 rowspan
Form:表格HTMLCSS
03-11
### HTML表格基础 HTML中的表格由以下元素构成： 1. `<table>`：这是表格的容器元素。 2. `<tr>`：表格行（Table Row），每个表格由一行或多行组成。 3. `<td>`：表格数据单元格（Table Data Cell），每个单元格...
2022年HTML相关知识点表格标签.pptx
11-02
HTML相关知识点表格标签 HTML表格标签是HTML中一种基本的结构元素，用于组织和显示数据。下面是HTML表格标签的相关知识点： ...HTML表格标签提供了一种灵活和强大的方式来组织和显示数据，具有广泛的应用前景。
数据分析器：HTML表格到图表
04-11
标题“数据分析器：HTML表格到图表”涉及到将HTML表格中的数据转换为动态图表的过程，这是一种在Web应用中可视化数据的常见方法。HTML表格是结构化的数据展示方式，而图表则可以更直观地呈现数据趋势和模式，对于...
FormAPI:表格API
04-28
PHP（Hypertext Preprocessor）是一种开源的服务器端脚本语言，主要应用于Web开发，可以嵌入到HTML中使用。它支持多种数据库，如MySQL、PostgreSQL等，提供丰富的函数库，可用于处理文件、表单、会话管理等多种功能...
JS:表格排序
03-21
标题“JS:表格排序”指的是使用JavaScript实现对HTML表格数据的动态排序功能。在网页开发中，表格是一种常见的数据展示方式，而用户有时需要按照不同的列进行升序或降序排序，以方便查看和分析数据。JavaScript作为...
html 表格的使用
wgchen
07-12 1169
html 表格的使用...
HTML 表格的使用方法
chen983234416的博客
11-15 1361
    首先我先把所有熟悉的都列举出来，包括表格一些最常用的属性，很生僻的我就不列举啦，要是想要了解的话，到W3C手册上查询。首先表格的开始是由&lt;table&gt;&lt;/table&gt;标签引导的，接下来我先写出所有的标签，以及属性，然后在它们的旁边做一一的解释。   &lt;table border="1" width="200px"  height="200px" cellsp...
HTML表格使用全指南，真的很详细
最新发布
(黎子)人生编码
06-20 2979
通过使用CSS媒体查询和JavaScript，开发者可以创建出既美观又实用的表格，确保用户在任何设备上都能获得良好的浏览体验。通过合理的语义化标签使用，开发者可以创建出既美观又易于理解的表格。通过使用适当的属性和技巧，我们可以提高表格的可访问性。通过CSS样式设计和布局控制，HTML表格不仅可以提供清晰的数据展示，还能成为网页上的美观元素。跨行和跨列是表格设计中常用的技术，用于合并单元格，使表格布局更加灵活和紧凑。控制表格的布局对于确保数据的可读性和表格的整体美观至关重要。标签进行表格的语义化。
【攻破html系列——第五天】表格标签和列表标签
命运的左轮的博客
10-27 953
了解表格标签和列表标签的功能和使用。
HTML使用表格01
tracy_0215的博客
03-29 1153
概述：表格是网页制作中使用最多的工具之一，在制作网页时，使用表格可以更清晰的排列数据。但实际制作过程中，表格更多的用在网页布局定位上，很多网页都以表格布局的，这是因为表格在文本和图像的位置控制方面都有很强的功能。 1.创建表格 （1）表格的基本构成 tabel、tr、td 概述：表格由行、列和单元格3部分组成，一般通过3个标记来创建，分别是表格标记tabel、行标记tr和单元格标记t
HTMl笔记
m0_67857570的博客
03-26 295
1）行内样式:就是将CSS代码直接写在HTML的代码中的一个元素内并由<style>标记支持，比如:<div style="color:#foo"></div><input type="表项类型”name="表项名”value="默认值”size="x” maxlength="y”/)（2）内嵌式也叫内部样式表，是将样式代码写在<head>头部标记中，并且用<style>标记定义。（3）链接样式：<link>标记一般位于<head>标记中<title>标记之后。大多数浏览器会在该元素的前后添加换行。
HTML5表格介绍以及基本应用
L20220927Y的博客
10-26 2699
可以的话，麻烦关注一下，互相关注噢
前端学习笔记一一HTML表格标签（table）
pig_html的博客
12-08 2375
前言 表格是网页制作中使用最多的工具之一，在制作网页时，使用表格可以更清晰地排列数据。但是在实际制作过程中，表格更多用在网页布局的定位上。很多网页都是以表格布局的。这是因为表格在文本和图像的位置控制方面都有很强的功能。 1.表格的基本构成 表格由行、列、和单元格3部分组成，一般通过3个标记来创建，分别是表格标记<table>、行标记<tr>、和单元格标记<td>。表格的各种属性都要在表格的开始标记<table>和表格的结束标记</table>之间才
在html中 标题单元格的标记是,html表格标题标签是什么
weixin_34270705的博客
06-10 2873
在html中，表格标题标签是caption，语法“表格标题”。caption标签用于定义表格标题，必须紧跟在开始表格标签“”的后边，并且每个表格只能有一个caption标签。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。html中，表格使用的也是挺多的，今天介绍的这个标签就和表格有关系，它是表格中的一个标签，即标签。“caption”作为英文单...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值