HTML5入门之table表格的cellspacing问题

肖-肖 · 发表于 2021-4-25 15:04:04

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

效果图

源代码

table表格案例.zip (3.62 KB, 下载次数: 1, 售价: 6 鱼币)
知识点总结

    <!-- 
        2.13
        th:表头单元格
        <table style="margin: 0 auto;">这个能使表格居中显示
        <table align="center">也行就是style那里报红
        <table style="margin: 0 auto; width: 600px;height: 249px;" border=1px;>
        当设置表格的宽高的时候因为宽高是外部的属性所以写行内样式的时候需要用:style并且是="……"
        ……中的属性和属性值需要用-》属性:值;的形式来写。
        因为border是table特有的属性所以不需要写在style里,写在table后边即可,格式是:属性=值;
        注意是=号
        cellspacing-》是单元格和单元格之间的距离
        html5中不再支持table的cellspacing和cellpadding属性
        如果现在开始用html5的声明来写页面时，会发现在定义table的cellspacing和cellpadding时被提示该属性已过时或者提示非法属性。
        具体原因是在html5中table标签的这两个属性已经被移除，需要定义边框之类的时应该使用css的写法。
        
        cellpadding="20" cellspacing="30" 怎样在css中写？还有哪些属性无法在css中设置。
        具体实现如下：

        <!DOCTYPE html>
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Html5 Table Test</title>
            <style type="text/css">
                table{ border-collapse:collapse; border:solid 1px Black; }
                table td{ width:50px; height:20px;  border:solid 1px Black; padding:5px;}
            </style>
        </head>
        <body>
            <table>
                <tr>
                    <td></td>
                    <td></td>
                </tr>

                <tr>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </body>
        </html>
    -->

    <!-- 解决方案:
        用 css 的 border 解决

        table { 

            border-collapse: collapse;  //切记是 <table> 的属性，而非 <td> 的.

        }
        border-collapse中的 collapse 和 separate 值，
        定义为collapse时，边框会重叠在一起。
        定义为separate时单元格边框之间会有间隙。
        不定义时默认为separate。
        cus：cellpadding，cellspacing都是废弃的属性了，早已不推荐使用，最新的html5里已经彻底去掉了这些表现型的属性
   -->

账号		自动登录	找回密码
密码			立即注册

[原创] HTML5入门之table表格的cellspacing问题

马上注册，结交更多好友，享用更多功能^_^