table中cesllspacing與cellpadding的區(qū)別詳解
table是什么？它是由一個(gè)個(gè)cell單元格構(gòu)成的，在表格中，<td>的個(gè)數(shù)取決于每行<tr>中包裹的cell單元格個(gè)數(shù)！此外，默認(rèn)table表格在沒(méi)有添加css樣式<style type="text/css">table tr t...
table是什么？它是由一個(gè)個(gè)cell單元格構(gòu)成的，在表格中，<td>的個(gè)數(shù)取決于每行<tr>中包裹的cell單元格個(gè)數(shù)！此外，默認(rèn)table表格在沒(méi)有添加css樣式<style type="text/css">table tr td,th{border:1px solid #000;}之前,在瀏覽器中顯示是沒(méi)有表格線的；
html中常見(jiàn)table寫(xiě)法:A.<tr>…</tr>:表格的一行,有幾對(duì)tr表格就有幾行； B.<td>…</td>:表格的一個(gè)單元格,一行中包含幾對(duì)<td>...</td>,說(shuō)明一行中就有幾列； C.<th>…</th>:表格的頭部的一個(gè)單元格,表格表頭,文本默認(rèn)為粗體并且居中顯示；D.<table summary="表格簡(jiǎn)介文本">/*摘要的內(nèi)容是不會(huì)在瀏覽器中顯示出來(lái)的。它的作用是增加表格的可讀性(語(yǔ)義化)，使搜索引擎更好的讀懂表格內(nèi)容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內(nèi)容。*/ E.caption標(biāo)簽,為表格添加標(biāo)題和摘要,標(biāo)題用以描述表格內(nèi)容，標(biāo)題的顯示位置：表格上方
<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區(qū)別，先看下面一組表格圖片與cellspacing代碼的對(duì)比：
<!DOCTYPE HTML>
<html>
????<head>
????????<meta charset="utf-8">
????????<title>table中cellspacing的區(qū)別</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>第一個(gè)單元格</caption>
????????<tr>
????????????<td>測(cè)試1</td>
????????????<td>測(cè)試2</td>
????????????<td>測(cè)試3</td>
????????</tr>
????</table>
????<table width="600" cellspacing="20" bordercolor="#333" border="1">
????????<caption>第二個(gè)單元格</caption>
????????<tr>
????????????<td>測(cè)試1</td>
????????????<td>測(cè)試2</td>
????????????<td>測(cè)試3</td>
????????</tr>
????</table>
????<table width="600" bordercolor="#333" border="1" class="ceshi">
????????<caption>第三個(gè)單元格</caption>
????????<tr>
????????????<td>測(cè)試1</td>
????????????<td>測(cè)試2</td>
????????????<td>測(cè)試3</td>
????????</tr>
????</table>
</html>
比較代碼，最上面的兩個(gè)表格只有cellspacing的設(shè)置不同，一個(gè)為”0“，一個(gè)為”20“，顯示的結(jié)果就是第一個(gè)表格的每個(gè)單元格之間的距離為0，第二個(gè)表格的每個(gè)單元格之間的距離為20；延伸下：第二個(gè)表格與第三個(gè)表格一致，但是第三個(gè)表格沒(méi)有設(shè)置cellspacing，我們發(fā)現(xiàn)這個(gè)border-spacing: 20px;與cellspacing="20" 的結(jié)果一樣一樣的，e.g小結(jié)：cellspacing屬性用來(lái)指定表格各單元格之間的空隙。此屬性的參數(shù)值是數(shù)字，表示單元格間隙所占的像素點(diǎn)數(shù)。
<!DOCTYPE HTML>
<html>
????<head>
????????<meta charset="utf-8">
????????<title>tabl表格中cellpadding的區(qū)別</title>
????????<style type="text/css">
????????????table{
????????????????margin-bottom: 50px;
????????????}
????????</style>
????</head>
????<body>
????????<table width="600px" border="1" bordercolor="#ccc" cellpadding="0">
????????????<tr>
????????????????<th>我是快樂(lè)的cell表格</th>
????????????????<th>我是快樂(lè)的cell表格</th>
????????????????<th>我是快樂(lè)的cell表格</th>
????????????</tr>
????????</table>
????????<table width="600px" border="1" bordercolor="#ccc" cellpadding="20">
????????????<tr>
????????????????<th>我是快樂(lè)的cell表格</th>
????????????????<th>我是快樂(lè)的cell表格</th>
????????????????<th>我是快樂(lè)的cell表格</th>
????????????</tr>
????????</table>
????</body>
</html>
從上面的代碼運(yùn)行展示結(jié)果來(lái)看：兩個(gè)表格只有cellpadding代碼值不同，第一個(gè)表格中"我是快樂(lè)的cell表格"這幾個(gè)字離它所在的單元格為0,那是因?yàn)樵O(shè)置了cellpadding="0"的原因；第二個(gè)表格中的"我是快樂(lè)的cell表格"這幾個(gè)字離它所在的單元格比較遠(yuǎn)，那是因?yàn)閏ellpadding="20",也就是說(shuō)"我是快樂(lè)的cell表格"離它所在的單元格的邊界的距離為20像素。簡(jiǎn)單的說(shuō),cellpadding的值等于多少,那表格內(nèi)的單元格從自身邊界開(kāi)始向內(nèi)保留多少空白,單元格里的元素永遠(yuǎn)都不會(huì)進(jìn)入那些空白里。||注意 cellpadding屬性用來(lái)指定單元格內(nèi)容與單元格邊界之間的空白距離的大小。此屬性的參數(shù)值也是數(shù)字，表示單元格內(nèi)容與上下邊界之間空白距離的高度所占像素點(diǎn)數(shù)以及單元格內(nèi)容與左右邊界之間空白距離的寬度所占的像素點(diǎn)數(shù)。
e.g小結(jié):cellspacing代表的是單元格與單元格之間的距離，cellpadding表示的是單元格內(nèi)容與邊框的距離；前者的理解像margin,后者像padding；巢(cell)--表格的內(nèi)容；巢補(bǔ)白(表格填充)(cellpadding)--代表巢外面的一個(gè)距離，用于隔開(kāi)巢與巢空間；巢空間(表格間距)(cellspacing)--代表表格邊框與巢補(bǔ)白的距離，也是巢補(bǔ)白之間的距離
拓展一：表格的行與列如何合并？colspan跨列合并，rowspan跨行合并
代碼展示：
<!DOCTYPE html>
<html>
????<head>
????????<meta charset="utf-8">
????????<title>colspan與rowspan的區(qū)別</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>說(shuō)點(diǎn)啥了,不知道</td>
????????????<td>說(shuō)點(diǎn)啥了,不知道</td>
????????????<td>說(shuō)點(diǎn)啥了,不知道</td>
????????</tr>
????</table>
????<table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
????????<caption>現(xiàn)在要展示一行二列,怎么辦？colspan跨列合并</caption>
????????<tr>
????????????<td>說(shuō)點(diǎn)啥了,不知道</td>
????????????<td colspan="2">說(shuō)點(diǎn)啥了,不知道</td>
????????????<!-- <td>說(shuō)點(diǎn)啥了,不知道</td> -->
????????</tr>
????</table>
????<!-- ========無(wú)情分割線========================================================== -->
????<table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
????????<caption>正常展示：二行二列</caption>
????????<tr>
????????????<td>說(shuō)點(diǎn)啥了,不知道</td>
????????????<td>說(shuō)點(diǎn)啥了,不知道</td>
????????</tr>
????????<tr>
????????????<td>說(shuō)點(diǎn)啥了,不知道</td>
????????????<td>說(shuō)點(diǎn)啥了,不知道</td>
????????</tr>
????</table>
????<table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
????????<caption>現(xiàn)在要展示一行二列,怎么辦?rowspan跨行合并</caption>
????????<tr>
????????????<td rowspan="2">說(shuō)點(diǎn)啥了,不知道</td>
????????????<td>說(shuō)點(diǎn)啥了,不知道</td>
????????</tr>
????????<tr>
????????????<!-- <td>說(shuō)點(diǎn)啥了,不知道</td> -->
????????????<td>說(shuō)點(diǎn)啥了,不知道</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瀏覽器中，系統(tǒng)默認(rèn)的表格邊框顏色grey，邊框間距為2等等
/* user agent stylesheet */
????????/* table {
????????????display: table;
????????????border-collapse: separate;
????????????border-spacing: 2px;
????????????border-color: grey;
????????} */
?????????
/*???????? border="1"默認(rèn)等于border="1px"
????????border-top-width: 1px;
????????border-right-width: 1px;
????????border-bottom-width: 1px;
????????border-left-width: 1px; */
?????????
/*??????? bordercolor返回或設(shè)置對(duì)象的邊框顏色
????????bordercolor:W3C - String
????????Specifies the color of the border of the element. Specify either a color name or RGB color code.
*/
到此這篇關(guān)于table中cesllspacing與cellpadding的區(qū)別詳解的文章就介紹到這了,更多相關(guān)table中cesllspacing與cellpadding內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，
- HTML頁(yè)面插入SVG的多種方式
- html網(wǎng)頁(yè)添加音樂(lè)視頻的實(shí)現(xiàn)示例
- 淺析html webpack plugin插件的使用教程
- HTML轉(zhuǎn)PDF的純客戶端和純服務(wù)端實(shí)現(xiàn)方案
- HTML6實(shí)現(xiàn)折疊菜單與手風(fēng)琴菜單的實(shí)例代碼
- html 仿百度百科導(dǎo)航下拉菜單功能實(shí)例代碼介紹
- Html與css基礎(chǔ)知識(shí)介紹(必看篇)
- Sql Server數(shù)據(jù)庫(kù)如何去掉內(nèi)容里面的Html標(biāo)簽
- css和html的四種結(jié)合方式介紹
- SQL Server中Table字典數(shù)據(jù)的查詢(xún)SQL示例代碼
HTML頁(yè)面插入SVG的多種方式
SVG是一種基于XML語(yǔ)法的圖像格式，接下來(lái)通過(guò)本文給大家介紹HTML頁(yè)面插入SVG的多種方式，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋...
html網(wǎng)頁(yè)添加音樂(lè)視頻的實(shí)現(xiàn)示例
文章主要介紹了html網(wǎng)頁(yè)添加音樂(lè)視頻的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧1.v...
淺析html webpack plugin插件的使用教程
用html-webpack-plugin插件來(lái)啟動(dòng)頁(yè)面 可將html頁(yè)面放入內(nèi)存 以提升頁(yè)面的加載速度
并且還能自動(dòng)設(shè)置index.html頁(yè)面中JS文件引入的路徑使用前提：項(xiàng)目中安裝了Webpack使用步...
HTML轉(zhuǎn)PDF的純客戶端和純服務(wù)端實(shí)現(xiàn)方案
文章主要介紹了HTML轉(zhuǎn)PDF的純客戶端和純服務(wù)端實(shí)現(xiàn)方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)...
-
HTML6實(shí)現(xiàn)折疊菜單與手風(fēng)琴菜單的實(shí)例代碼
文章主要介紹了HTML6實(shí)現(xiàn)折疊菜單與手風(fēng)琴菜單的實(shí)例代碼,需要的朋友可以參考下。頁(yè)面主體部分：<body><ul id="menu"> <li> <a href="#">一級(jí)菜單1</a> <ul> <li>二級(jí)...
html 仿百度百科導(dǎo)航下拉菜單功能實(shí)例代碼介紹
文章主要介紹了html 仿百度百科導(dǎo)航下拉菜單功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下。html 仿百度百科導(dǎo)航下拉菜單功能，具...
Html與css基礎(chǔ)知識(shí)介紹(必看篇)
下面小編就為大家?guī)?lái)一篇Html與css基礎(chǔ)(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧...
Sql Server數(shù)據(jù)庫(kù)如何去掉內(nèi)容里面的Html標(biāo)簽
文章主要介紹了Sql Server 去掉內(nèi)容里邊的Html標(biāo)簽的實(shí)現(xiàn)方法，代碼超簡(jiǎn)單，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下。...
css和html的四種結(jié)合方式介紹
文章主要介紹了css和html的四種結(jié)合方式,需要的朋友可以參考下（1）在每個(gè)HTML標(biāo)簽上面都有一個(gè)屬性 style，把css和HTML結(jié)合在一起 <div style="background-color:red;color...
SQL Server中Table字典數(shù)據(jù)的查詢(xún)SQL示例代碼
文章主要給大家介紹了關(guān)于SQL Server中Table字典數(shù)據(jù)的查詢(xún)SQL的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著...