HTML中正確設定表格table邊框border的三種辦法

阿新 • • 發佈：2021-07-07

如何實現單線邊框

方法一

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>

效果圖：

方法二：

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>

效果圖:

方法三

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>

效果圖:

【表格屬性小結】

屬性名	屬性值	描述
align	left、center、right	規定表格相對周圍元素的對齊方式
border	1或省略不寫	規定表格是否有邊框，border="1"表示有邊框，預設無邊框
cellspacing	畫素值	規定單元格之間的空白，預設2px
cellpadding	畫素值	規定單元邊沿與其內容之間的空白區域，預設1px
width	畫素值或百分比	規定表格的寬度