html如何实现表格布局

90次阅读
没有评论

HTML 提供了表格元素 <table>、<tr>、<th> 和 <td>,可以用于实现表格布局。表格布局适用于显示类似于表格的数据或者布局,例如日历、排班表、统计数据等。

下面是一个完整的 HTML 页面示例,实现一个简单的表格布局:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表格布局示例</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }

        th {
            background-color: #f2f2f2;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        tr:hover {
            background-color: #ddd;
        }

        .header {
            background-color: #4CAF50;
            color: white;
            padding: 15px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="header">表格布局示例</div>
<table>
    <thead>
    <tr>
        <th>项目</th>
        <th>数量</th>
        <th>单价</th>
        <th>金额</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>商品A</td>
        <td>10</td>
        <td>$5.00</td>
        <td>$50.00</td>
    </tr>
    <tr>
        <td>商品B</td>
        <td>8</td>
        <td>$6.00</td>
        <td>$48.00</td>
    </tr>
    <tr>
        <td>商品C</td>
        <td>12</td>
        <td>$3.00</td>
        <td>$36.00</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="3">总计</td>
        <td>$134.00</td>
    </tr>
    </tfoot>
</table>
</body>
</html>

在这个示例中,我们使用 <table> 元素创建表格,使用 <thead>、<tbody> 和 <tfoot> 元素分组表格内容。width: 100% 属性将表格宽度设置为 100%,border-collapse: collapse 属性将相邻单元格边框合并。

<th> 元素用于创建表头单元格,<td> 元素用于创建表格数据单元格,border: 1px solid black 属性指定单元格边框样式,padding: 8px 属性指定单元格内边距,text-align: center 属性指定文本水平居中对齐。

<tr> 元素用于创建表格行,tr:nth-child(even) 选择器用于设置偶数行的背景色

正文完
 
评论(没有评论)