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 樣式使行在懸停時將背景顏色更改為淺藍色，從而增強使用者互動。

列印頁面