table中cesllspacing与cellpadding的差异详解
|
这篇文章主要介绍了table中cesllspacing与cellpadding的区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
ASP站长网table是什么？它是由一个个cell单元格构成的，在表格中，<td>的个数取决于每行<tr>中包裹的cell单元格个数！此外，默认table表格在没有添加css样式<style type="text/css">table tr td,th{border:1px solid #000;}之前,在浏览器中显示是没有表格线的；
html中常见table写法:A.<tr>…</tr>:表格的一行,有几对tr表格就有几行； B.<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列； C.<th>…</th>:表格的头部的一个单元格,表格表头,文本默认为粗体并且居中显示；D.<table summary="表格简介文本">/*摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。*/ E.caption标签,为表格添加标题和摘要,标题用以描述表格内容，标题的显示位置：表格上方
<table border="" cellspacing="" cellpadding=""> <tr><th>Header</th></tr> <tr><td>Data</td></tr> </table>
<table border="" cellspacing="" cellpadding="" summary=""> <caption></caption> <tr><th>今天星期五/th></tr> <tr><td>today is Friday</td></tr> </table>
言归正传，cellpadding 和cellspacing区别，先看下面一组表格图片与cellspacing代码的对比：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>table中cellspacing的区别</title> <style type="text/css"> table{ margin-bottom: 50px; } .ceshi{ border-spacing: 20px; /*Specifies the distance between the borders of adjoining cells in a table. */ } </style> </head> <table width="600" cellspacing="0" bordercolor="#333" border="1"> <caption>第一个单元格</caption> <tr> <td>测试1</td> <td>测试2</td> <td>测试3</td> </tr> </table> <table width="600" cellspacing="20" bordercolor="#333" border="1"> <caption>第二个单元格</caption> <tr> <td>测试1</td> <td>测试2</td> <td>测试3</td> </tr> </table> <table width="600" bordercolor="#333" border="1" class="ceshi"> <caption>第三个单元格</caption> <tr> <td>测试1</td> <td>测试2</td> <td>测试3</td> </tr> </table> </html>
比较代码，最上面的两个表格只有cellspacing的设置不同，一个为”0“，一个为”20“，显示的结果就是第一个表格的每个单元格之间的距离为0，第二个表格的每个单元格之间的距离为20；延伸下：第二个表格与第三个表格一致，但是第三个表格没有设置cellspacing，我们发现这个border-spacing: 20px;与cellspacing="20" 的结果一样一样的，e.g小结：cellspacing属性用来指定表格各单元格之间的空隙。此属性的参数值是数字，表示单元格间隙所占的像素点数。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>tabl表格中cellpadding的区别</title> <style type="text/css"> table{ margin-bottom: 50px; } </style> </head> <body> <table width="600px" border="1" bordercolor="#ccc" cellpadding="0"> <tr> <th>我是快乐的cell表格</th> <th>我是快乐的cell表格</th> <th>我是快乐的cell表格</th> </tr> </table> <table width="600px" border="1" bordercolor="#ccc" cellpadding="20"> <tr> <th>我是快乐的cell表格</th> <th>我是快乐的cell表格</th> <th>我是快乐的cell表格</th> （编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |