表格(html+CSS)_html +css制作表格-CSDN博客

本文链接：https://blog.csdn.net/qq_43701213/article/details/132670651

初始状态

<table border="1">
        <thead>
            <tr>
                <th>属性</th>
                <th>说明</th>
                <th>示例</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>3</td>
                <td>3</td>
            </tr>

        </tbody>

页面显示:
在这里插入图片描述

去除单元格之间的空隙

<table border="1" cellspacing="0">

在这里插入图片描述

用CSS设置表格样式

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 1.只有table有边框 */
        /* table {
            border: 1px black solid;
        } */

        /* 2.只有td单元格有边框 */
        /* td {
            border: 1px black solid;
        } */

        /* 3.td,table均设置border,且cellspacing="0" */
        /* table,
        td {
            border: 1px black solid;
        } */

        /* 4.合并相邻的边框，使重叠的地方变细,且补充上表头单元格 */
        table,
        th,
        td {
            border: 1px black solid;
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>属性</th>
                <th>说明</th>
                <th>示例</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>3</td>
                <td>3</td>
            </tr>

        </tbody>
    </table>

</body>

</html>