HTML---table使用总结

最新推荐文章于 2024-09-18 13:48:35 发布

maidu_xbd

最新推荐文章于 2024-09-18 13:48:35 发布

阅读量267

点赞数

分类专栏： HTML 文章标签： table

本文链接：https://blog.csdn.net/maidu_xbd/article/details/97022996

版权

HTML 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在HTML中，使用table标签来创建一个表格。在table标签中使用tr来表示表格中的一行，有几行就有几个tr；在tr中需要使用td来创建一个单元格，有几个单元格就有几个td。
rowspan用来设置纵向的合并单元格， colspan用来设置横向的合并单元格。

使用场景: 有一些情况下表格是非常的长的，这时就需要将表格分为三个部分，表头(thead)，表格的主体(tbody)，表格底部(tfoot)。如果表格中没有写tbody，浏览器会自动在表格中添加tbody, 并且将所有的tr都放到tbody中

示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<style>
table {
    width: 60%;
    border: 2px solid orangered;
    text-align: center;
    margin: 0 auto;

}

thead {
    background-color: orangered;
    color: #fff;
}

tr {
    line-height: 40px;
    color：#ccc;
}
</style>

<body>
    <table border="1">
        <thead>
            <tr>
                <th>标题1</th>
                <th>标题2</th>
                <th>标题3</th>
                <th>标题4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>A1</td>
                <td>A2</td>
                <td>A3</td>
                <td rowspan="2">A4</td>
            </tr>
            <tr>
                <td>B1</td>
                <td rowspan="2">B2</td>
                <td>B3</td>
            </tr>
            <tr>
                <td>C1</td>
                <td>C3</td>
                <td>C4</td>
            </tr>
            <tr>
                <td>D1</td>
                <td colspan="3">D2</td>
            </tr>
        </tbody>
    </table>
</body>

</html>