Home >Web Front-end >Front-end Q&A >How to set the center of html table
How to set the center of html table
- PHPzOriginal
- 2023-04-25 10:28:4710799browse
HTML is a widely used hypertext markup language used to create web pages. In web design, tables are a very useful element for displaying data. When designing tables, a common need is to center them. Here's how to center a table in HTML.
1. Use CSS stylesheet
After creating a table in HTML, you can easily center the table using a CSS stylesheet. In a stylesheet, you can use the "margin: auto" attribute to center the table.
For example, the following code sets the table to a width of 80% and centers it on the page.
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 80%;
margin: auto;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>学号</th>
<th>成绩</th>
</tr>
<tr>
<td>小明</td>
<td>001</td>
<td>90</td>
</tr>
<tr>
<td>小红</td>
<td>002</td>
<td>95</td>
</tr>
</table>
</body>
</html>
In the above code, we create a table and set its width to 80%. Next, use the "margin: auto" attribute to center the table.
2. Use HTML attributes
In addition to using CSS style sheets, you can also set attributes directly in the HTML table element to center the table. Below is sample code on how to center a table in HTML.
<!DOCTYPE html> <html> <head> <title>HTML表格居中</title> </head> <body> <center> <table border="1"> <tr> <th>姓名</th> <th>学号</th> <th>成绩</th> </tr> <tr> <td>小明</td> <td>001</td> <td>90</td> </tr> <tr> <td>小红</td> <td>002</td> <td>95</td> </tr> </table> </center> </body> </html>
In the above code, we use the HTML
Summary
The table in HTML is a common web design element, and centered tables are a common design requirement. To center a table, you can use CSS stylesheets or HTML properties. Using CSS stylesheets requires some basic skills, but also results in better scalability and is a long-standing best practice. Using HTML attributes to center the table is simpler, but may cause problems for complex web designs. Therefore, when designing any web page, one must consider which method to use.
The above is the detailed content of How to set the center of html table. For more information, please follow other related articles on the PHP Chinese website!