table中cesllspacing与cellpadding的区别详解(3)

发布时间：2020-05-10 10:35 所属栏目：116 来源：站长网

导读：!DOCTYPE htmlhtmlheadmeta charset=utf-8titlecolspan与rowspan的区别/titlestyle type=text/csstable{margin: 0 auto;margin-bottom: 50px;text-align: center;}/style/headbodytable width=600 cellpadding=10 c

<!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>  </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> </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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

（编辑：ASP站长网）