table布局以及table表格

最新推荐文章于 2025-06-11 08:30:00 发布

原创最新推荐文章于 2025-06-11 08:30:00 发布 · 1.4k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#table表格 #display:table #table布局

前端专栏收录该内容

125 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS创建并美化表格的方法，通过具体的代码示例展示了如何设置表格的宽度、边框、背景颜色等属性，以及如何使表格单元格居中显示。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display普通表格</title>
<style type="text/css">
.table, .table * {margin: 0 auto; padding: 0;font-size: 14px;font-family: Arial, 宋体, Helvetica, sans-serif;}
.table {display: table; width: 80%; border-collapse: collapse;}
.table-tr {display: table-row; height: 30px;}
.table-th {display: table-cell;font-weight: bold;height: 100%;border: 1px solid gray;text-align: center;vertical-align: middle;background-color:#E5E5E5;}
.table-td {display: table-cell; height: 100%;border: 1px solid gray; text-align: center;vertical-align: middle;}
</style>
</head>
<body>
    <div class="table">
        <div class="table-tr">
            <div class="table-th">省份/直辖市</div>
            <div class="table-th">GDP(亿元)</div>
            <div class="table-th">增长率</div>
        </div>
        <div class="table-tr">
            <div class="table-td">广东</div>
            <div class="table-td">72812</div>
            <div class="table-td">8.0%</div>
        </div>
        <div class="table-tr">
            <div class="table-td">河南</div>
            <div class="table-td">37010</div>
            <div class="table-td">8.3%</div>
        </div>
        <div class="table-tr">
            <div class="table-td">江苏</div>
            <div class="table-td">70116</div>
            <div class="table-td">8.5%</div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述