Html 简明教程
HTML - Table Styling
HTML 表格样式是用来增强表格内容可读性的。有几种表格样式可以使表格具有可读性，例如将表格宽度设置为 100% 百分比可确保表格适合每个屏幕尺寸。在本文中，我们将了解 样式 @ {s0} 的不同方法。
Normal HTML Table
正常的 HTML 表格表示没有预定义任何样式的表格。这里我们将创建一个正常的 HTML 表格并在该表格上使用样式。将对 atble 进行修改作为样式。
Define a Normal HTML Table
这里我们已经创建了一个带有某些属性的普通表格，用于在表格的每个单元格上设置边框，并提到了 ID 的未来用途，当时我们需要选择这些 ID 来设置表格样式。
<!DOCTYPE html>
<html>
<head>
<title>Normal HTML Table</title>
</head>
<body>
<table id="table1" border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
<br />
<table id="table2" border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>HTML Table Styles
有很多样式来设置 HTML 表格的样式，这里我们列出了常用的样式。我们可以根据需要组合下面提到的样式按要求进行所需的样式设计。
-
斑马条纹 @ {s1} @ {s2} @ {s3}
HTML Table Styling Examples
这里我们已经用方法和完整的示例代码涵盖了所有上述样式。您还可以操作提供的代码，在现有的样式上尝试自己的样式。
HTML Table - Border Collapse
我们可以通过操作 CSS 中的 @ {s4} 属性来调整表框之间的空间。通过调整 border-collapse 的值，您可以控制表格中边框之间的间距或空隙。 border-collapse 有两个可能的值。默认值“separate”将给表格单元格之间带来额外的空隙，值“collapse”可防止表格单元格之间出现额外的空隙。
<!DOCTYPE html>
<html>
<head>
<style>
#table1 {
border-collapse: separate;
}
#table2 {
border-collapse: collapse;
}
</style>
</head>
<body>
<table id="table1" border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
<br />
<table id="table2" border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>HTML Table - Horizontal Zebra Stripes
斑马条纹——水平技术是 Microsoft word 中常用的表格样式技术，它涉使用交替颜色设置表格行的样式来增强表格内容的视觉吸引力和可读性。在下面的代码 @ {s6} 选择器中，每隔一行变化一种样式，并应用背景颜色创建条纹效果。
<!DOCTYPE html>
<html>
<head>
<style>
tr:nth-child(even) {
background-color: #ffebcd;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir </td>
<td>7000</td>
</tr>
<tr>
<td> Hussein</td>
<td>700</td>
</tr>
<tr>
<td>Farhan</td>
<td>17000</td>
</tr>
<tr>
<td> Raman</td>
<td>1700</td>
</tr>
<tr>
<td>Laksmi</td>
<td>7100</td>
</tr>
<tr>
<td>Anagha</td>
<td>9000</td>
</tr>
</table>
</body>
</html>HTML Table - Vertical Zebra Stripes
斑马条纹——垂直技术通过对每隔一列应用交替样式来增强表格的可读性。这是使用 @ {s7} 选择器来实现表格数据 (td) 和表头 (th) 元素的。
<!DOCTYPE html>
<html>
<head>
<style>
td:nth-child(even),
th:nth-child(even) {
background-color: #D6EEEE;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
<th>Designation</th>
<th>Experience</th>
</tr>
<tr>
<td>Jhon Deo</td>
<td>5000</td>
<td>Marketing</td>
<td>1 year</td>
</tr>
<tr>
<td>Alan Walker</td>
<td>7000</td>
<td>Content</td>
<td>5 year</td>
</tr>
</table>
</body>
</html>Horizontal & Vertical Zebra Stripes
您可以通过将水平和垂直斑马条纹模式结合到您的表格中，来制作出可读性较好的表格内容。这涉及对行 @ {s8} 和列 @ {s9} 都应用交替的样式。为了增强这种效果，您可以考虑使用 @ {s10} 调整颜色透明度。
<!DOCTYPE html>
<html>
<head>
<style>
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),
td:nth-child(even) {
background-color: rgba(212, 150, 192, 0.4);
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
<th>Designation</th>
<th>Experience</th>
</tr>
<tr>
<td>Jhon Deo</td>
<td>5000</td>
<td>Marketing</td>
<td>1 year</td>
</tr>
<tr>
<td>Alan Walker</td>
<td>7000</td>
<td>Content</td>
<td>5 year</td>
</tr>
<tr>
<td>Tyler Swift</td>
<td>5000</td>
<td>Marketing</td>
<td>1 year</td>
</tr>
</table>
</body>
</html>HTML Table - Text Alignment
您可以使用 @ {s11} 和 @ {s12} 属性水平和垂直排列表格单元格内的文本。
<!DOCTYPE html>
<html>
<head>
<style>
td,
th {
text-align: right;
vertical-align: middle;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>HTML Table - Horizontal Dividers
水平分隔符用在表格的行之间，将每一行与其他行分隔开来，以便提高表格的整体可读性。可以使用 CSS 的 @ {s13} 属性在表格下方设计一个边框。
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
tr {
border-bottom: 5px solid #ddd;
}
th,
td {
padding: 10px;
/* Add padding for better visibility */
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>Hoverable Table Rows
让表格行在鼠标指针悬停在其上方时改变颜色，可改善用户体验和可读性。下面的 HTML 程序创建了一个带有边框的表格。CSS 样式使得将鼠标悬停在某一行上方时，该行的背景颜色会变成浅蓝色。
<!DOCTYPE html>
<html>
<head>
<style>
tr:hover {
background-color: #D6EEEE;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>