无边框表格是使用 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;
}表格边框可以更轻松地表示表格、行和列的分隔。
给出了无边框表格的类型：
嵌套表是指表内的表。嵌套表并不是一个好的做法，但在某些情况下，有必要在表内使用表。由于其可访问性和令人困惑的标记，使用表格嵌套可能很荒谬。
在下面给出的表中，两个表嵌套在父表列内。
代码：
<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>输出：
没有边框的父表。但内部表格包含边框。为了清晰表示，嵌套表中使用边框。我们可以通过删除与边框相关的样式来删除嵌套表的边框。
斑马条纹表格是指交替行中具有不同颜色的表格。交替行中的不同颜色可以更容易地区分彼此。通过颜色更容易看到表格的特定行。也可以使用 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中文网其他相关文章！
