Html 简明教程

HTML - Table Styling

HTML 表格样式是用来增强表格内容可读性的。有几种表格样式可以使表格具有可读性，例如将表格宽度设置为 100% 百分比可确保表格适合每个屏幕尺寸。在本文中，我们将了解样式 @ {s0} 的不同方法。

HTML Table Styling is done to enhance the readability of tabuler content. There are several table styles to make the table readable, for example setting table width to 100% percent ensures the table fits for every screen size. In this article we will learn different ways to style HTML tables.

Normal HTML Table

正常的 HTML 表格表示没有预定义任何样式的表格。这里我们将创建一个正常的 HTML 表格并在该表格上使用样式。将对 atble 进行修改作为样式。

A normal HTML tables means a table that does not have any predefined styling. Here we will create a normal HTML table and use styling on that table. Will make modification on the atble as styling.

Define a Normal HTML Table

这里我们已经创建了一个带有某些属性的普通表格，用于在表格的每个单元格上设置边框，并提到了 ID 的未来用途，当时我们需要选择这些 ID 来设置表格样式。

Here we have created a normal table with some attribute to set the border on each cell of the table and mentioned ids for future puspose when we will need to select those id to style the table.

<!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 表格的样式，这里我们列出了常用的样式。我们可以根据需要组合下面提到的样式按要求进行所需的样式设计。

There are multiple styles to style an HTML table, here we are listed the popular styles to do that. We can combine below mentioned styles to do the required styling as per the requirements.

Border Collapse
Zebra Stripes Horizontal Zebra Stripes Vertical Zebra Stripes Horizontal & Vertical Zebra Stripes
Table Text Alignment
Horizontal Dividers
Hoverable Table Rows

HTML Table Styling Examples

这里我们已经用方法和完整的示例代码涵盖了所有上述样式。您还可以操作提供的代码，在现有的样式上尝试自己的样式。

Here we have covered all the above mentioned styles with the approaches and complete exammple code. You can manipulate the provided code as well to try your own styling on the existing styles as well.

HTML Table - Border Collapse

我们可以通过操作 CSS 中的 @ {s4} 属性来调整表框之间的空间。通过调整 border-collapse 的值，您可以控制表格中边框之间的间距或空隙。 border-collapse 有两个可能的值。默认值“separate”将给表格单元格之间带来额外的空隙，值“collapse”可防止表格单元格之间出现额外的空隙。

We can adjust the space between table borders by manipulating the 'border-collapse' property in CSS. By adjusting the value of border-collapse you can control the spacing or gap between the borders within your table. There are two values possible for border-collapse. The defulat value 'separate' will bring extra gap between table cells, value 'collapse' prevent extra gap in between table cells.

<!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} 选择器中，每隔一行变化一种样式，并应用背景颜色创建条纹效果。

The Zebra Stripes - Horizontal technique is a common table styling technique used in Microsoft word, this involves styling table rows with alternating colors to enhance the visual appeal and readability of the table contents. In the following code :nth-child(even) selector targets every second row, and a background color is applied to create a striped effect.

<!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) 元素的。

The Zebra Stripes - Vertical technique enhances table readability by applying alternating styles to every other column. This is achieved using the :nth-child(even) selector for both table data (td) and table header (th) elements.

<!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} 调整颜色透明度。

You can make a good readable table contents by combining both horizontal and vertical zebra stripe patterns in your table. This involves applying alternating styles to both rows (:nth-child(even)) and columns (td:nth-child(even), th:nth-child(even)). To enhance this effect, you can consider adjusting the color transparency using the rgba() function.

<!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} 属性水平和垂直排列表格单元格内的文本。

You can align the text within your table cells horizontally and vertically using the text-align and vertical-align properties.

<!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} 属性在表格下方设计一个边框。

Horizontal Dividers are used between rows of table to separate each rows from other, so that overall readability of table is improved. You can use border-bottom property of CSS to design a border under the table.

<!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 样式使得将鼠标悬停在某一行上方时，该行的背景颜色会变成浅蓝色。

Making a table row to change it’s color on hovering the mouse pointer over it improves user experience and readability. The below HTML program creates a table with a border. The CSS style makes the rows change the background color to light blue when hovered over.

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

Cnclusion

有很多其他样式可以应用于 HTML 表格，以上样式是最常见的，已经使用了几十年。继续练习，使用适合自己要求的 CSS 创建自己的表格样式。

There are lots of other styles that can be applied on HTML Tables, above styles are the most common styles that are in used for a decade. Keep practicing to create your own table styles using CSS that fits your requirements.