如何在 CSS 中将表格居中？

allway2

已于 2022-07-02 20:42:55 修改

阅读量5.7k

点赞数 1

文章标签： css html javascript

于 2022-07-02 20:41:02 首次发布

本文链接：https://blog.csdn.net/allway2/article/details/125577414

版权

在网站设计中使用表格是一项令人兴奋的任务。默认情况下，表格的对齐方式是向左对齐，但使用CSS中的margin属性，我们可以将其对齐在中心。

如果我们将margin-left和margin-right的值设置为auto，那么浏览器会显示表格居中。我们可以使用简写属性margin并将其设置为auto以使表格居中对齐，而不是使用margin-left和margin-right属性。

不是将表格对齐到中心，而是text-align: center; 属性仅将表格内容居中，例如表格内的文本。

例子

在这个例子中，我们使用了text-align: center; 属性使表格内的内容居中，左边距：自动；和边距：自动；使表格居中。

<!DOCTYPE html>
<html>
    <head>
        <style>
            table, th, td {
                border: 1px solid black;
                margin-left: auto;
                margin-right: auto;
                border-collapse: collapse;
                width: 500px;
                text-align: center;
                font-size: 20px;
            }
        </style> </head>
    <body>
        <table>
            <tbody>
                <tr>
                    <th>First_Name</th>
                    <th>Last_Name</th>
                    <th>Subject</th>
                    <th>Marks</th>
                </tr>
                <tr>
                    <td>James</td>
                    <td>Gosling</td>
                    <td>Maths</td>
                    <td>92</td>
                </tr>
                <tr>
                    <td>Alan</td>
                    <td>Rickman</td>
                    <td>Maths</td>
                    <td>89</td>
                </tr>
                <tr>
                    <td>Sam</td>
                    <td>Mendes</td>
                    <td>Maths</td>
                    <td>82</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <style>
            table, th, td {
                border: 1px solid black;
                margin: auto;
                border-collapse: collapse;
                width: 500px;
                text-align: center;
                font-size: 20px;
            }
        </style> </head>
    <body>
        <table>
            <tbody>
                <tr>
                    <th>First_Name</th>
                    <th>Last_Name</th>
                    <th>Subject</th>
                    <th>Marks</th>
                </tr>
                <tr>
                    <td>James</td>
                    <td>Gosling</td>
                    <td>Maths</td>
                    <td>92</td>
                </tr>
                <tr>
                    <td>Alan</td>
                    <td>Rickman</td>
                    <td>Maths</td>
                    <td>89</td>
                </tr>
                <tr>
                    <td>Sam</td>
                    <td>Mendes</td>
                    <td>Maths</td>
                    <td>82</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

输出

allway2

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
如何在 CSS 中将表格居中？

在网站设计中使用表格是一项令人兴奋的任务。默认情况下，表格的对齐方式是向左对齐，但使用CSS中的margin属性，我们可以将其对齐在中心。如果我们将margin-left和margin-right的值设置为auto，那么浏览器会显示表格居中。我们可以使用简写属性margin并将其设置为auto以使表格居中对齐，而不是使用margin-left和margin-right属性。不是将表格对齐到中心，而是text-align: center; 属性仅将表格内容居中，例如表格内的文本。在这个例子中，我们使用了tex
复制链接

扫一扫