How to set the center of html table-Front-end Q&A-php.cn

How to set the center of html table

PHPz

Release： 2023-04-25 10:55:29

Original

10802 people have browsed it

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>

Copy after login

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>

Copy after login

In the above code, we use the HTML

tag outside the table to center the table. This method is simple and intuitive, suitable for small web design.

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!