CSS学习笔记7：表格样式

最新推荐文章于 2023-08-12 21:43:52 发布

提辖鲁

最新推荐文章于 2023-08-12 21:43:52 发布

阅读量197

点赞数

分类专栏： Web # CSS 文章标签： css html css3

本文链接：https://blog.csdn.net/lj402159806/article/details/122481897

版权

Web 同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

CSS

13 篇文章 0 订阅

订阅专栏

表格标题位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标题位置</title>
    <style>
        table, tr, td, th {
            border: 1px solid silver;
        }

        /*caption-side属性*/
        /*top	标题在顶部（默认值）*/
        /*bottom	标题在底部*/
        table {
            caption-side: bottom;
        }
    </style>
</head>
<body>
<table>
    <caption>表格标题</caption>
    <!--表头-->
    <thead>
    <tr>
        <th>表头单元格1</th>
        <th>表头单元格2</th>
    </tr>
    </thead>
    <!--表身-->
    <tbody>
    <tr>
        <td>表行单元格1</td>
        <td>表行单元格2</td>
    </tr>
    <tr>
        <td>表行单元格3</td>
        <td>表行单元格4</td>
    </tr>
    </tbody>
    <!--表脚-->
    <tfoot>
    <tr>
        <td>表行单元格5</td>
        <td>表行单元格6</td>
    </tr>
    </tfoot>
</table>
</body>
</html>

在这里插入图片描述

表格边框合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格边框合并</title>
    <style>
        table, th, td {
            border: 1px solid silver;
        }

        /*border-collapse属性*/
        /*separate	边框分开，有空隙（默认值）*/
        /*collapse	边框合并，无空隙*/
        table {
            border-collapse: collapse;
        }
    </style>
</head>
<body>
<table>
    <caption>表格标题</caption>
    <!--表头-->
    <thead>
    <tr>
        <th>表头单元格1</th>
        <th>表头单元格2</th>
    </tr>
    </thead>
    <!--表身-->
    <tbody>
    <tr>
        <td>表行单元格1</td>
        <td>表行单元格2</td>
    </tr>
    <tr>
        <td>表行单元格3</td>
        <td>表行单元格4</td>
    </tr>
    </tbody>
    <!--表脚-->
    <tfoot>
    <tr>
        <td>表行单元格5</td>
        <td>表行单元格6</td>
    </tr>
    </tfoot>
</table>
</body>
</html>

在这里插入图片描述

表格边框间距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格边框间距</title>
    <style>
        table, th, td {
            border: 1px solid silver;
        }

        /*border-spacing 定义边框间距*/
        table {
            border-spacing: 8px;
        }
    </style>
</head>
<body>
<table>
    <caption>表格标题</caption>
    <!--表头-->
    <thead>
    <tr>
        <th>表头单元格1</th>
        <th>表头单元格2</th>
    </tr>
    </thead>
    <!--表身-->
    <tbody>
    <tr>
        <td>表行单元格1</td>
        <td>表行单元格2</td>
    </tr>
    <tr>
        <td>表行单元格3</td>
        <td>表行单元格4</td>
    </tr>
    </tbody>
    <!--表脚-->
    <tfoot>
    <tr>
        <td>表行单元格5</td>
        <td>表行单元格6</td>
    </tr>
    </tfoot>
</table>
</body>
</html>