table中cesllspacing与cellpadding的区别详解
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>colspan与rowspan的区别</title> <style type="text/css"> table{ margin: 0 auto; margin-bottom: 50px; text-align: center; } </style> </head> <body> <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc"> <caption>正常展示：一行三列</caption> <tr> <td>说点啥了,不知道</td> <td>说点啥了,不知道</td> <td>说点啥了,不知道</td> </tr> </table> <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc"> <caption>现在要展示一行二列,怎么办？colspan跨列合并</caption> <tr> <td>说点啥了,不知道</td> <td colspan="2">说点啥了,不知道</td> <!-- <td>说点啥了,不知道</td> --> </tr> </table> <!-- ========无情分割线========================================================== --> <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc"> <caption>正常展示：二行二列</caption> <tr> <td>说点啥了,不知道</td> <td>说点啥了,不知道</td> </tr> <tr> <td>说点啥了,不知道</td> <td>说点啥了,不知道</td> </tr> </table> <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc"> <caption>现在要展示一行二列,怎么办?rowspan跨行合并</caption> <tr> <td rowspan="2">说点啥了,不知道</td> <td>说点啥了,不知道</td> </tr> <tr> <!-- <td>说点啥了,不知道</td> --> <td>说点啥了,不知道</td> </tr> </table> </body> </html> 拓展二：如何合并表格边框？border-collapse: collapse; <!-- 合并表格单元格 --> <style type="text/css"> table{ border-collapse: collapse; /* border-collapse: separate; */ /*Indicates whether the row and cell borders of a table are joined in a single border or detached as in standard HTML. */ } </style> <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc"> <tbody> <tr> <td>单元格1</td> <td>单元格2</td> <td>单元格3</td> </tr> </tbody> </table> 最后chrome浏览器中，系统默认的表格边框颜色grey，边框间距为2等等 /* user agent stylesheet */ /* table { display: table; border-collapse: separate; border-spacing: 2px; border-color: grey; } */ /* border="1"默认等于border="1px" border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; */ /* bordercolor返回或设置对象的边框颜色 bordercolor:W3C - String Specifies the color of the border of the element. Specify either a color name or RGB color code. */ 到此这篇关于table中cesllspacing与cellpadding的区别详解的文章就介绍到这了,更多相关table中cesllspacing与cellpadding内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！ （编辑：源码网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
