HTML 中的无边框表格

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

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

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

示例：

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

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

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

table{
border : 1px solid #000000;
}

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

无边框表格类型

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

1.嵌套桌

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

示例：

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

代码：

<table width="80%" cellspacing="0" cellpadding="5">
<thead>
<th>Description</th>
<th>Electricals & Electronics</th>
<th>Computers & Accessories</th>
</thead>
<tbody>
<tr>
<td class="text">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.
</td>
<td>
<table width="400" cellspacing="0">
<tbody>
<tr>
<td>Television</td>
<td>Washing Machine</td>
<td>Fan</td>
</tr>
<tr>
<td>Induction</td>
<td>Room Heater</td>
<td>Iron</td>
</tr>
<tr>
<td>Inverter Kits</td>
<td>Circuits</td>
<td>CPU</td>
</tr>
<tr>
<td>Keyboard</td>
<td>Mouse</td>
<td>Scanner</td>
</tr>
</tbody>
</table>
</td>
<td>
<table width="250" cellspacing="0">
<tbody>
<tr>
<td>Laptop</td>
<td>Monitor</td>
<td>CPU</td>
</tr>
<tr>
<td>Keyboard</td>
<td>Mouse</td>
<td>Scanner</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

风格：

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

代码：

<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 标签表创建了一个表格设计，然后添加样式以使该表成为斑马条纹表。

代码：

<table width="50%" cellspacing="0">
<thead>
<th width="100">S.No.</th>
<th width="150">Country Code</th>
<th width="200">Country</th>
<th width="150">Phone Code</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>AW</td>
<td>Aruba</td>
<td>297</td>
</tr>
<tr>
<td>2</td>
<td>AU</td>
<td>Australia</td>
<td>61</td>
</tr>
<tr>
<td>3</td>
<td>AT</td>
<td>Austria</td>
<td>43</td>
</tr>
<tr>
<td>4</td>
<td>AZ</td>
<td>Azerbaijan</td>
<td>994</td>
</tr>
<tr>
<td>5</td>
<td>BS</td>
<td>Bahamas</td>
<td>1241</td>
</tr>
<tr>
<td>6</td>
<td>BH</td>
<td>Bahrain</td>
<td>973</td>
</tr>
</tbody>
</table>

风格：

下面给出的 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中文网其他相关文章！