HTML - 表格样式

折叠边框表格

您可以通过操作 'border-collapse' 属性来灵活地管理表格边框之间的间距。此属性确定相邻表格单元格边框如何交互，调整它可以控制表格内边框之间的间距或间隙。

将 'border-collapse' 设置为 "collapse"，边框将合并，消除任何间距，而 "separate" 允许您使用 'border-spacing' 属性控制间距，从而为表格布局提供更自定义的外观。

示例

这是一个折叠边框表格的示例，其中表格边框使用 border-collapse: 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>

水平斑马纹表格

斑马纹 - 水平技术涉及使用交替颜色设置表格行的样式，增强表格的视觉吸引力和可读性。

:nth-child(even) 选择器选择每隔一行，并应用背景颜色以创建条纹效果。

示例

这是一个水平斑马纹表格的示例，此处交替的行使用不同的背景颜色进行样式设置。

<!DOCTYPE html>
<html>
<head>
   <style>
      tr:nth-child(even) {
         background-color: #8a83de;
      }
   </style>
</head>
<body>
   <table border="1">
      <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>
   </table>
</body>
</html>

表格单元格中的文本对齐

您可以使用 text-align 和 vertical-align 属性在表格单元格中水平和垂直对齐文本。

示例

这是一个表格单元格中文本对齐的示例。

<!DOCTYPE html>
<html>
<head>
   <style>
      td,
      th {
         text-align: center;
         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>

垂直斑马纹表格

斑马纹 - 垂直技术通过对每隔一列应用交替样式来增强表格的可读性。这是通过对表格数据 (td) 和表格标题 (th) 元素都使用 :nth-child(even) 选择器来实现的。

示例

这是一个垂直斑马纹表格的示例，其中交替的列使用不同的背景颜色进行样式设置。

<!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>
      </tr>
      <tr>
         <td>Ramesh Raman</td>
         <td>5000</td>
      </tr>
      <tr>
         <td>Shabbir Hussein</td>
         <td>7000</td>
      </tr>
   </table>
</body>
</html>

带有组合垂直和水平斑马纹的表格

您可以通过在表格上组合水平和垂直斑马纹图案来获得迷人的视觉效果。这涉及对行 (:nth-child(even)) 和列 (td:nth-child(even), th:nth-child(even)) 都应用交替样式。

为了增强此效果，请考虑使用 rgba() 函数调整颜色透明度，为独特的视觉效果创建引人入胜且美观的条纹重叠。

示例

这是一个带有组合垂直和水平斑马纹的表格的示例，其中交替的行和列都使用不同的背景颜色进行样式设置。

<!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>
      </tr>
      <tr>
         <td>Ramesh Raman</td>
         <td>5000</td>
      </tr>
      <tr>
         <td>Shabbir Hussein</td>
         <td>7000</td>
      </tr>
   </table>
</body>
</html>

带有水平分隔线的表格

您可以通过合并水平分隔线来增强表格的视觉结构。通过为每个 '<tr>' 元素 设置底部边框来实现此效果。

此 CSS 自定义提供了行之间清晰的分隔，有助于提高表格清晰度和表格数据的更规范的呈现。

示例

这是一个带有水平分隔线的表格的示例，其中每行都用不同的水平线分隔开。

<!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>

上面的 HTML 程序定义了一个简单的表格，其中包含两行两列。应用 CSS 样式以使用每行底部的实线边框在行之间创建视觉分隔。border-collapse 属性确保更清晰的布局，并且添加了填充以提高表格单元格的可见性。

可悬停的表格行

您可以通过使用 ':hover' 选择器来改善用户交互，该选择器在用户将鼠标悬停在表格行上时突出显示表格行。这增强了视觉反馈，使表格更具交互性和用户友好性。

示例

这是一个可悬停的表格行的示例，其中表格行的背景颜色在用户将鼠标悬停在其上时会更改。

<!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>

上面的 HTML 程序创建了一个带边框的表格。CSS 样式使行在悬停时将背景颜色更改为浅蓝色，从而增强用户交互。

打印页面