HTML中正确设置表格table边框border的三种办法

如何实现单线边框

一、导入

table表格添加边框后,它的默认效果如下:

table {
        width: 400px;
    }
    
    table,
    table td,
    table th {
        border: 1px solid #000000;
    }

HTML中正确设置表格table边框border的三种办法

 

二、解决方案(3种方法)

【方法一】

核心思想:

1、设置BORDER=0 ;

2、再通过CSS,给Table加上1px的border-top,border-left;

3、然后再设置所有的td的border-right,border-bottom;

css代码:

<style>
    table {
        border-right: 1px solid #000000;
        border-bottom: 1px solid #000000;
        text-align: center;
    }
    
    table th {
        border-left: 1px solid #000000;
        border-top: 1px solid #000000;
    }
    
    table td {
        border-left: 1px solid #000000;
        border-top: 1px solid #000000;
    }
</style>

html代码:

<body>
    <table align="center" width="400" cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 第1行 -->
            <tr>
                <td>小王</td>
                <td>高数</td>
                <td>98</td>
                <td>
                    <a href="javascrpit:;">删除</a>
                </td>
            </tr>
            <!-- 第2行 -->
            <tr>
                <td>小深</td>
                <td>高数</td>
                <td>86</td>
                <td> <a href="javascrpit:;">删除</a></td>
            </tr>
            <!-- 第2行 -->
            <tr>
                <td>小濛</td>
                <td>高数</td>
                <td>65</td>
                <td><a href="javascript">删除</a></td>
            </tr>
        </tbody>
    </table>
</body>

 效果图:

HTML中正确设置表格table边框border的三种办法

 

 

 【方法二】

核心思想:

1、给table设置css为border-collapse: collapse

2、设置所有td及th的css为border: 1px solid #000000;

css代码:

<style>
    table {
        width: 400px;
        margin: 0 auto;
        border: 1px solid #000000;
        border-collapse: collapse;
    }
    
    th,
    td {
        border: 1px solid #000000;
        text-align: center;
    }
</style>

html代码:

<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 第1行 -->
            <tr>
                <td>小王</td>
                <td>高数</td>
                <td>98</td>
                <td>
                    <a href="javascrpit:;">删除</a>
                </td>
            </tr>
            <!-- 第2行 -->
            <tr>
                <td>小深</td>
                <td>高数</td>
                <td>86</td>
                <td> <a href="javascrpit:;">删除</a></td>
            </tr>
            <!-- 第2行 -->
            <tr>
                <td>小濛</td>
                <td>高数</td>
                <td>65</td>
                <td><a href="javascript">删除</a></td>
            </tr>
        </tbody>
    </table>
</body>

效果图:

HTML中正确设置表格table边框border的三种办法

【方法三】

核心思想:

1、将table的属性设置为:BORDER=0 、cellspacing=1 ;

2、设置table的背景色为即你要设置的table的边框颜色;

3、设置所有td背景色为#ffffff白色;

css代码

<style>
    table {
        background-color: black;
        text-align: center;
    }
    
    table th {
        background-color: #ffffff;
    }
    
    table td {
        background-color: #ffffff;
    }
</style>

html代码:

<body>
    <table width="400" cellspacing="1" border="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 第1行 -->
            <tr>
                <td>小王</td>
                <td>高数</td>
                <td>98</td>
                <td>
                    <a href="javascrpit:;">删除</a>
                </td>
            </tr>
            <!-- 第2行 -->
            <tr>
                <td>小深</td>
                <td>高数</td>
                <td>86</td>
                <td> <a href="javascrpit:;">删除</a></td>
            </tr>
            <!-- 第2行 -->
            <tr>
                <td>小濛</td>
                <td>高数</td>
                <td>65</td>
                <td><a href="javascript">删除</a></td>
            </tr>
        </tbody>
    </table>
</body>

效果图:

 HTML中正确设置表格table边框border的三种办法

 【表格属性小结】

 

属性名 属性值 描述
align left、center、right 规定表格相对周围元素的对齐方式
border 1或0

规定表格是否有边框默认无边框

border="1"表示有边框,意思给表格每一格加上1像素边框

border="0"表示无边框

cellspacing 像素值 规定单元格之间的空白,默认2px
cellpadding 像素值 规定单元边沿与其内容之间的空白区域,默认1px
width 像素值或百分比  规定表格的宽度

HTML中正确设置表格table边框border的三种办法

上一篇:Linux上部署web服务器并发布web项目


下一篇:html