Home > Article > Web Front-end > How to implement a concise table layout using HTML and CSS
How to implement a concise table layout using HTML and CSS
- 王林Original
- 2023-10-19 10:34:48886browse
How to use HTML and CSS to implement a simple table layout
HTML and CSS are the two most commonly used languages in front-end development and can be used to create and beautify web pages . Tables are one of the common elements in web pages and are used to display data. How to use HTML and CSS to implement a simple table layout? The specific steps are described below, with code examples provided.
Step 1: Create HTML structure
First, we need to create an HTML file and add the basic structure of the table to the file. The code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>简洁表格布局</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table>
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
</tr>
<tr>
<td>数据4</td>
<td>数据5</td>
<td>数据6</td>
</tr>
<tr>
<td>数据7</td>
<td>数据8</td>
<td>数据9</td>
</tr>
</tbody>
</table>
</body>
</html>In the above code, we created a basic HTML structure, including a table and the content of the table.
Step 2: Add CSS style
Next, we need to use CSS to beautify the table. Create a CSS file named style.css and include it in the HTML file. The code is as follows:
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
tbody tr:hover {
background-color: #f5f5f5;
}
In the above code, we beautify the table by setting CSS styles. Specific styles include:
- Set the width of the table to 100%, and use the border-collapse attribute to merge the borders into one line.
- Set the style of the table header and table content, including padding and text alignment.
- Set the background color of the header to light gray.
- Use the nth-child pseudo-class selector to add a background color to the even rows in the middle of the table.
- Set the background color of table rows when the mouse is hovering.
Step 3: Adjust the table style
As needed, we can further adjust the table style. For example, you can set the border and text color of the table, and adjust the style of the table header and table content.
table {
width: 100%;
border-collapse: collapse;
border: 1px solid #ddd;
color: #333;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
tbody tr:hover {
background-color: #f5f5f5;
}In the above code, we added a border style and set the text color to black. At the same time, we also highlight it by setting the font of the header to be bold.
So far, we have completed the implementation of a simple table layout. Further style adjustments can be made according to actual needs.
Summary:
By using HTML and CSS, we can easily implement a simple table layout. First, we need to create an HTML file and add the basic structure of the table in the file. Then, use CSS styles to beautify the table and set the table's borders, text alignment, background color and other attributes. Finally, further adjust the table style as needed to make it more consistent with the design requirements. At the same time, we can also use CSS to achieve some interactive effects, such as changing the color of table rows when the mouse is hovering.
The above is the detailed content of How to implement a concise table layout using HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!