如何使用HTML TABLE表格
在 HTML 中创建表格
HTML 表格允许您将数据排列成行和列。HTML 表格通常用于显示表格数据,如产品列表、客户详细信息、财务报告等。
您可以使用<table>
元素创建表格。在<table>
元素内部,您可以使用<tr>
元素来创建行,并且您可以使用<td>
元素在行内创建列。您还可以使用<th>
元素将单元格定义为一组表格单元格的标题。
以下示例演示了表的最基本结构。
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Peter Parker</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>Clark Kent</td>
<td>34</td>
</tr>
</table>
默认情况下,表格没有任何边框。您可以使用 CSS border
属性为表格添加边框。此外,默认情况下,表格单元格的大小刚好足以容纳内容。要在表格单元格的内容周围添加更多空间,您可以使用 CSS padding
属性。
以下样式规则为表格添加 1 像素的边框,并为其单元格添加 10 像素的内边距。
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
默认情况下,表格周围的边框和它们的单元格是相互分离的。但是您可以通过使用<table>
元素的border-collapse
属性将它们折叠成一个。
此外,<th>
元素内的文本以粗体显示,默认情况下在单元格中水平居中对齐。要更改默认对齐方式,您可以使用 CSS text-align
属性。
以下样式规则折叠表格边框并将表格标题文本左对齐。
table {
border-collapse: collapse;
}
th {
text-align: left;
}
注意:大多数<table>
元素的属性,如border
, cellpadding
, cellspacing
, width
,align
等在早期版本中用于样式化表格外观,但在 HTML5 中已被删除,因此请避免使用它们。改用 CSS 来设置HTML 表格的样式。
跨越多行和多列
跨越允许您跨多个其他行和列扩展表行和列。
通常,一个表格单元格不能越过另一个表格单元格下方或上方的空间。但是,您可以使用rowspan
或colspan
属性来跨越表中的多行或多列。
让我们尝试以下示例来了解其colspan
基本工作原理:
<table>
<tr>
<th>Name</th>
<th colspan="2">Phone</th>
</tr>
<tr>
<td>John Carter</td>
<td>5550192</td>
<td>5550152</td>
</tr>
</table>
同样,您可以使用rowspan
属性创建一个跨越多行的单元格。让我们尝试一个示例来了解行跨越的基本工作原理:
<table>
<tr>
<th>Name:</th>
<td>John Carter</td>
</tr>
<tr>
<th rowspan="2">Phone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
为表格添加标题
您可以使用<caption>
元素为表格指定标题。
<caption>
元素必须直接放在<table>
开始标签之后。默认情况下,标题显示在表格的顶部,但您可以使用 CSS caption-side
属性更改其位置。
以下示例显示了如何在表格中使用<caption>
元素。
<table>
<caption>Users Info</caption>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Peter Parker</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>Clark Kent</td>
<td>34</td>
</tr>
</table>
定义表头、正文和页脚
HTML 提供了一系列标签<thead>
、<tbody>
和<tfoot>
,它们分别通过定义页眉、正文和页脚区域来帮助您创建更有条理的表格。
下面的示例演示了这些标签元素的使用。
<table>
<thead>
<tr>
<th>Items</th>
<th>Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stationary</td>
<td>2,000</td>
</tr>
<tr>
<td>Furniture</td>
<td>10,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td>12,000</td>
</tr>
</tfoot>
</table>
注意:在 HTML5 中,<tfoot>
元素可以放在<tbody>
和<tr>
元素之前或之后,但必须出现在<caption>
, <colgroup>
, 和<thead>
元素之后。
提示:不要使用HTML TABLE来创建网页布局。TABLE表格布局的渲染速度较慢,并且很难维护。它应该只用于显示表格数据。
上一篇: 如何在WPS中设置页眉和页脚?
下一篇: 如何轻松定制Word文档的页眉和页脚
推荐阅读
-
如何在 Vue 中呈现使用 Vue 编写的 HTML 文件?
-
JS】react antd 项目如何让 Table 组件实现表格滚动播放
-
如何使用 GaussDB 创建外来表(FOREIGN TABLE)
-
SAP RFC 函数 RFC_READ_TABLE 的使用和优化-表格参数
-
如何使用 HTML、CSS 创建完全响应的中秋礼品卡❤️
-
西门子 S7-1200 程序状态监控器,如何使用监控器表格,如何使用交叉参考列表
-
源码为您提供,零基础搭建的免费网址导航站--中国妖怪百集,收集了大量古代文献中的妖怪,非常详细的记录了妖怪的来历、描述甚至图片,让您对中国的妖怪文化有一个整体的了解,茶余饭后的消遣非常有趣,类似的网站还有很多,期待您的探索! 导航站的另一个特点是汇集了大量咖啡平时用的非常好的工具软件,其中大部分都是在线的,不需要下载安装,包括文档协作、分享,图片、音频、视频处理,格式转换,文件传输,各个网站的视频下载等等,兼职就是一个工具百宝箱! 如果你觉得这些网站不符合你的使用习惯,或者想添加一些自己收藏的网站,那么把源码交给你,只需简单修改就可以变成符合自己使用习惯的独特导航了! 如何修改 导航站采用纯静态构建,下载源代码后,只需要修改 html 文件中的代码块即可,代码块结构如下: 只需要修改四个地方,分别对应网站的四个关键信息: 修改相应网站的 URL 地址 修改相应网站的徽标 修改相应网站的名称
-
HTML 如何使用 A 标记创建指向其他页面的链接
-
html 表格单元格边框不显示如何做
-
如何为 HTML 表格设置边框样式