HTML 中的无边框表格

无边框表格是使用 HTML 表格的网页设计视图。表格的使用简化了以最简单的形式呈现大量信息。

• 带或不带边框的表格，用于项目之间的比较。
• 文本和数字信息都可以以表格格式呈现。

在 HTML 页面中，很多表格结构都是无边框创建的。在表格设计中使用边框取决于其用途。可以使用以下 HTML 创建页面上的表格设计。

示例：

S.No	Name	Date of Birth	Profile	Salary
1	Jeff Smith	35	Assistant Manager	120,000
2	Maria Garcia	42	Department Head	85,000
3	David Rodriguez	37	Senior Sales Executive	45,000
4	Eyon Shih	32	Sales Executive	35,000

上面给出的表格结构将以表格格式显示数据，如下图所示。

在上面给出的屏幕截图中，边框不可用。默认情况下，表格设计中的边框保持不可用。要启用表格中的边框，需要添加样式边框；这个边框包含三项内容，例如边框的大小（如以 px 为单位）、边框的类型（如实心、薄、继承等），第三个是颜色（如红色、蓝色、黑色、绿色，颜色代码）。

table{
border : 1px solid #000000;
}

表格边框可以更轻松地表示表格、行和列的分隔。

无边框表格类型

给出了无边框表格的类型：

1.嵌套桌

嵌套表是指表内的表。嵌套表并不是一个好的做法，但在某些情况下，有必要在表内使用表。由于其可访问性和令人困惑的标记，使用表格嵌套可能很荒谬。

示例：

在下面给出的表中，两个表嵌套在父表列内。

代码：

Description

Electricals & Electronics

Computers & Accessories

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Television	Washing Machine	Fan
Induction	Room Heater	Iron
Inverter Kits	Circuits	CPU
Keyboard	Mouse	Scanner

Laptop	Monitor	CPU
Keyboard	Mouse	Scanner

风格：

下面给出的样式用于表示嵌套表格设计的更清晰视图。

代码：

<style type="text/css">
table th{
width: 200px;
text-align: center;
}
td.text{
text-align: justify;
padding: 5px;
}
table table, table table td{
border: 1px solid #000;
}
</style>

输出：

没有边框的父表。但内部表格包含边框。为了清晰表示，嵌套表中使用边框。我们可以通过删除与边框相关的样式来删除嵌套表的边框。

2.斑马条纹表

斑马条纹表格是指交替行中具有不同颜色的表格。交替行中的不同颜色可以更容易地区分彼此。通过颜色更容易看到表格的特定行。也可以使用 jQuery 在表格标签上添加样式。

示例：

一个例子是基本的；这里的 HTML 标签表创建了一个表格设计，然后添加样式以使该表成为斑马条纹表。

代码：

S.No.	Country Code	Country	Phone Code
1	AW	Aruba	297
2	AU	Australia	61
3	AT	Austria	43
4	AZ	Azerbaijan	994
5	BS	Bahamas	1241
6	BH	Bahrain	973

风格：

下面给出的 CSS 使 HTML 表格出现斑马条纹。

代码：

<style type="text/css">
table th, table td{
text-align: center;
}
tbody tr:nth-child(even) {
background: #e8e7e1;
}
</style>

输出：

在下面给出的输出中，我们可以看到如何交替具有不同颜色的表格行。

结论

无边框表格是表格表示方式之一。表格格式也可以使用其他 HTML 标签来实现，例如 ul > li、div 等，但是使用 table 进行表格结构减少了样式工作，而由于响应式设计方法，div 进行表格设计的使用正在增加。

以上是HTML 中的无边框表格的详细内容。更多信息请关注PHP中文网其他相关文章！