锐客网

  1. 首页 > 睿知 > it技术 > >

HTML表格

html5HTML表格

本文概述

  • HTML表格标签
  • HTML表格示例
  • 带边框的HTML表
  • 1）HTML Border属性
  • 2）CSS Border属性
  • 带单元格填充的HTML表
  • HTML表格宽度
  • 例
  • 带colspan的HTML表
  • 带行距的HTML表
  • 带标题的HTML表
  • 样式化HTML表的偶数和奇数单元格
  • 支持的浏览器
HTML表标签用于以表格形式（行*列）显示数据。一行中可以有很多列。
我们可以在< tr> , < td> 和< th> 元素的帮助下使用< table> 元素创建表格以表格形式显示数据。
在每个表中, 表行由< tr> 标记定义, 表头由< th> 定义, 表数据由< td> 标记定义。
HTML表格用于管理页面的布局, 例如页眉部分, 导航栏, 正文内容, 页脚部分等。但是建议在表格上使用div标签来管理页面的布局。
HTML表格标签
标签 描述
< table> 它定义了一个表。
< tr> 它在表中定义一行。
< th> 它在表中定义标题单元格。
< td> 它在表中定义一个单元格。
< caption> 它定义了表格标题。
< colgroup> 它在表中指定一组一个或多个列以进行格式化。
< col> 它与< colgroup> 元素一起使用以指定每个列的列属性。
< tbody> 用于将表中的正文内容分组。
< thead> 用于将表中的标题内容分组。
< tfooter> 用于将表中的页脚内容分组。
HTML表格示例 【HTML表格】让我们看一下HTML表标记的示例。输出如上所示。
< table> < tr> < th> First_Name< /th> < th> Last_Name< /th> < th> Marks< /th> < /tr> < tr> < td> Sonoo< /td> < td> Jaiswal< /td> < td> 60< /td> < /tr> < tr> < td> James< /td> < td> William< /td> < td> 80< /td> < /tr> < tr> < td> Swati< /td> < td> Sironi< /td> < td> 82< /td> < /tr> < tr> < td> Chetna< /td> < td> Singh< /td> < td> 72< /td> < /tr> < /table>

立即测试
输出：
名字 姓 分数
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72
在上面的html表中, 有5行和3列= 5 * 3 = 15个值。
带边框的HTML表 有两种方法可以为HTML表指定边框。
  1. 按HTML中表格的边框属性
  2. 通过CSS中的border属性
1）HTML Border属性 你可以在HTML中使用表格标记的border属性来指定边框。但是现在不建议这样做。
< table border="1"> < tr> < th> First_Name< /th> < th> Last_Name< /th> < th> Marks< /th> < /tr> < tr> < td> Sonoo< /td> < td> Jaiswal< /td> < td> 60< /td> < /tr> < tr> < td> James< /td> < td> William< /td> < td> 80< /td> < /tr> < tr> < td> Swati< /td> < td> Sironi< /td> < td> 82< /td> < /tr> < tr> < td> Chetna< /td> < td> Singh< /td> < td> 72< /td> < /tr> < /table>

立即测试
输出：
名字 姓 分数
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72
2）CSS Border属性 现在建议使用CSS的border属性在表格中指定边框。
< style> table, th, td { border: 1px solid black; } < /style>

立即测试
你可以通过border-collapse属性将所有边界折叠到一个边界中。它将使边界合而为一。
< style> table, th, td { border: 2px solid black; border-collapse: collapse; } < /style>

立即测试
输出：
Name 姓 分数
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72
带单元格填充的HTML表 你可以通过两种方式为表头和表数据指定填充：
  1. 通过HTML中表格的cellpadding属性
  2. 通过在CSS中填充属性
HTML table标记的cellpadding属性现在已过时。建议使用CSS。因此, 让我们看一下CSS的代码。
< style> table, th, td { border: 1px solid pink; border-collapse: collapse; } th, td { padding: 10px; } < /style>

立即测试
输出：
Name 姓 分数
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72
HTML表格宽度 我们可以使用CSS width属性指定HTML表的宽度。可以像素或百分比指定。
我们可以根据需要调整表格宽度。以下是显示宽度表格的示例。
table{ width: 100%; }

例
< !DOCTYPE html> < html> < head> < title> table< /title> < style> table{ border-collapse: collapse; width: 100%; } th, td{ border: 2px solid green; padding: 15px; } < /style> < /head> < body> < table> < tr> < th> 1 header< /th> < th> 1 header< /th> < th> 1 header< /th> < /tr> < tr> < td> 1data< /td> < td> 1data< /td> < td> 1data< /td> < /tr> < tr> < td> 2 data< /td> < td> 2 data< /td> < td> 2 data< /td> < /tr> < tr> < td> 3 data< /td> < td> 3 data< /td> < td> 3 data< /td> < /tr> < /table> < /body> < /html>

立即测试
输出：
HTML表格

文章图片
带colspan的HTML表 如果要使一个单元格跨度超过一列, 则可以使用colspan属性。
它将一个单元格/行划分为多列, 并且列数取决于colspan属性的值。
让我们看一下跨越两列的示例。
CSS代码：
< style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } < /style>

HTML代码：
< table style="width:100%"> < tr> < th> Name< /th> < th colspan="2"> Mobile No.< /th> < /tr> < tr> < td> Ajeet Maurya< /td> < td> 7503520801< /td> < td> 9555879135< /td> < /tr> < /table>

立即测试
输出：
Name 手机号码。
阿耶特·莫里亚 7503520801 9555879135
带行距的HTML表 如果要使一个单元格跨度超过一行, 则可以使用rowspan属性。
它将一个单元格分成多行。划分的行数将取决于行跨度值。
让我们看一下跨越两行的示例。
CSS代码：
< style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } < /style>

HTML代码：
< table> < tr> < th> Name< /th> < td> Ajeet Maurya< /td> < /tr> < tr> < th rowspan="2"> Mobile No.< /th> < td> 7503520801< /td> < /tr> < tr> < td> 9555879135< /td> < /tr> < /table>

立即测试
输出：
Name 阿耶特·莫里亚
手机号码。 7503520801
9555879135
带标题的HTML表 HTML标题显示在表格上方。它只能在表标记之后使用。
< table> < caption> Student Records< /caption> < tr> < th> First_Name< /th> < th> Last_Name< /th> < th> Marks< /th> < /tr> < tr> < td> Vimal< /td> < td> Jaiswal< /td> < td> 70< /td> < /tr> < tr> < td> Mike< /td> < td> Warn< /td> < td> 60< /td> < /tr> < tr> < td> Shane< /td> < td> Warn< /td> < td> 42< /td> < /tr> < tr> < td> Jai< /td> < td> Malhotra< /td> < td> 62< /td> < /tr> < /table>

立即测试
样式化HTML表的偶数和奇数单元格 CSS代码：
< style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } table#alter tr:nth-child(even) { background-color: #eee; } table#alter tr:nth-child(odd) { background-color: #fff; } table#alter th { color: white; background-color: gray; } < /style>

立即测试
输出：
HTML表格

文章图片
注意：你还可以使用表中的不同CSS属性来创建各种类型的表。 支持的浏览器
Element Chrome IE Firefox Opera Safari
< table> Yes Yes Yes Yes Yes

    推荐阅读


    上一篇：HTML符号

    下一篇：HTML标签