当前位置：首页 > 行业动态 > 正文

表格如何居中html

在HTML中，可以使用CSS样式来居中表格，下面是一个示例代码，包括小标题和单元表格的居中显示：

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 样式表 */
        .centertable {
            display: flex;
            justifycontent: center;
            alignitems: center;
            height: 100vh; /* 使表格垂直居中 */
        }
        
        /* 表格样式 */
        table {
            bordercollapse: collapse; /* 合并边框 */
            width: 50%; /* 设置表格宽度 */
        }
        
        th, td {
            border: 1px solid black; /* 设置边框样式 */
            padding: 8px; /* 设置单元格内边距 */
            textalign: left; /* 设置文本对齐方式 */
        }
    </style>
</head>
<body>
    <div >
        <!小标题 >
        <h2>表格标题</h2>
        
        <!单元表格 >
        <table>
            <tr>
                <th>列1</th>
                <th>列2</th>
                <th>列3</th>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
            </tr>
            <tr>
                <td>数据4</td>
                <td>数据5</td>
                <td>数据6</td>
            </tr>
        </table>
    </div>
</body>
</html>

在上面的示例代码中，我们使用了CSS样式来居中表格，通过将包含表格的<div>元素设置为display: flex、justifycontent: center和alignitems: center，使其水平和垂直居中，使用height: 100vh将表格的高度设置为视口的高度，以确保表格完全占据整个页面，接下来，我们定义了表格的样式，包括边框样式、单元格内边距和文本对齐方式等，在<div >内部添加小标题和单元表格即可实现居中显示的效果。

本站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本站，有问题联系侵删！
本文链接：http://www.xixizhuji.com/fuzhu/319338.html
0

相关文章

随机文章