CSS tables

CSS Table

In web design, tables are a common element used to display data and information. By using CSS (Cascading Style Sheets), we can customize the style and layout of tables to make them more aesthetically pleasing and meet your design needs. This article will detail how to design and beautify tables using CSS.

1. Creating a Basic Table

First, we need to create a basic table structure. A simple HTML table structure is as follows:

<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td>Zhang San</td>
<td>25</td>
<td>Male</td>
</tr>
<tr>
<td>Li Si</td>
<td>30</td>
<td>Female</td>
</tr>
</table>

In the code above, we create a simple table containing name, age, and gender information. Next, we’ll use CSS to beautify this table.

2. Adding Styles

We can use CSS to change the table’s color, borders, font, and other styles. Below is a simple CSS code example for styling a table:

table {
width: 100%;
border-collapse: collapse;
}

th, td {
border: 1px solid #000;
padding: 8px;
text-align: center;
}

th {
background-color: #f2f2f2;
}

tr:nth-child(even) {
background-color: #f9f9f9;
}

In the above code, we set the table’s width to 100% so that it takes up the entire width of its container. We also adjust the cell border style, padding, center text alignment, and the background color of the header and even-numbered rows.

3. Table Style Effects

By applying the above CSS styles, we can see that the table’s style has changed, making it look more beautiful and clear:

<table> 
<tr> 
<th>Name</th> 
<th>Age</th> 
<th>Gender</th> 
</tr> 
<tr> 
<td>Zhang San</td> 
<td>25</td> 
<td>Male</td> 
</tr> 
<tr> 
<td>Li Si</td> 
<td>30</td> 
<td>Female</td> 
</tr> 
</table> 

The table after CSS styling is as follows:

4. Table Layout

In addition to styling, we can also use CSS to adjust the table layout, such as adjusting column widths and row heights. Here’s a simple CSS code example to adjust the layout of the table:

th:nth-child(1), 
td:nth-child(1) { 
width: 100px; 
} 

th:nth-child(2), 
td:nth-child(2) { 
width: 50px; 
} 

th:nth-child(3), 
td:nth-child(3) { 
width: 80px; 
} 

tr { 
height: 40px; 
} 

In the code above, we use the nth-child selector to set the width of the first, second, and third columns respectively. In addition, we also adjust the height of each row to 40px.

5. Table Layout Effect

By applying the above CSS styles, we can see that the table layout has changed, with column widths becoming more even and row heights adjusted:

<table> 
<tr> 
<th>Name</th> 
<th>Age</th> 
<th>Gender</th> 
</tr> 
<tr> 
<td>Zhang San</td> 
<td>25</td> 
<td>Male</td> 
</tr> 
<tr> 
<td>Li Si</td> 
<td>30</td> 
<td>Female</td> 
</tr> 
</table> 

The table after adjustment using CSS is as follows:

Conclusion

Through this article, we have learned how to use CSS to design and beautify tables, including style and layout adjustments. By using appropriate CSS styles, we can make tables more prominent and beautiful on a web page, improving the user experience.