border-collapse: collapse;和cellspacing=“0“有什么区别呢?

border-collapse

CSS属性,用来决定表格的边框是分开的还是合并的。在分隔模式下,相邻的单元格都拥有独立的边框。在合并模式下,相邻单元格共享边框。

cellspacing

cellspacing 属性规定单元格之间的空间。


从以上定义可以看出,border-collapse实现一个边框的合并问题,也就是相邻边框会变成一条边框显示。而,cellspacing只能定义相邻边框之间的间距,也就是说两条边框还独立存在,并未合并为一条边框。
DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        table {
            width: 500px;
            height: 308px;
        }
        table,
        td {
            padding: 0;
            border: 1px solid pink;
            border-top: 1px solid blue;
            /* border-collapse: collapse; */
        }
    style>
head>

<body>
    <table cellspacing=“0“>
        <tr>
            <td>哈哈哈哈哈td>
            <td>哈哈哈哈哈td>
            <td>哈哈哈哈哈td>
        tr>
        <tr>
            <td>哈哈哈哈哈td>
            <td>哈哈哈哈哈td>
            <td>哈哈哈哈哈td>
        tr>
        <tr>
            <td>哈哈哈哈哈td>
            <td>哈哈哈哈哈td>
            <td>哈哈哈哈哈td>
        tr>
    table>
body>

html>

你可能感兴趣的:(HTML+CSS,前端,html,css)