table 中 cellspacing 與 cellpadding 區別
- Guanhui轉載
- 2020-06-28 18:09:555422瀏覽
table是什麼？它是由一個個cell單元格構成的，在表格中，b6c5a531a458a2e790c1fd6421739d1c的個數取決於每行a34de1251f0d9fe1e645927f19a896e8中包裹的cell單元格數！此外，預設table表格在沒有加入css樣式080b747a20f9163200dd0a7d304ba388table tr td,th{border:1px solid #000;}之前,在瀏覽器中顯示是沒有表格線的；
html中常見table寫法:A.a34de1251f0d9fe1e645927f19a896e8…fd273fcf5bcad3dfdad3c41bd81ad3e5:表格的一行,有幾對tr表格就有幾行; B.b6c5a531a458a2e790c1fd6421739d1c…b90dd5946f0946207856a8a37f441edf :表格的一個單元格,一行中包含幾對b6c5a531a458a2e790c1fd6421739d1c...b90dd5946f0946207856a8a37f441edf,說明一行中就有幾列； C.b4d429308760b6c2d20d6300079ed38e…01c3ce868d2b3d9bce8da5c1b7e41e5b:表格的頭部的一個單元格,表格表頭,文字預設為粗體並且居中顯示；D.31007e9e308c478eec6f4ab3e98c9e18/*摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜尋引擎更好的讀懂表格內容，還可以使螢幕閱讀器更好的幫助特殊使用者讀取表格內容。 */ 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>
</tr>
</table>
</body>
</html>
從上面的程式碼執行展示結果來看：兩個表格只有cellpadding程式碼值不同，第一個表格中"我是快樂的cell表格"這幾字離它所在的儲存格為0,那是因為設定了cellpadding="0"的原因；第二個表格中的"我是快樂的cell表格"這幾個字離它所在的儲存格比較遠，那是因為cellpadding="20",也就是說"我是快樂的cell表格"離它所在的單元格的邊界的距離為20像素。簡單的說,cellpadding的值等於多少,那表格內的單元格從自身邊界開始向內保留多少空白,單元格里的元素永遠都不會進入那些空白裡。 ||注意 cellpadding屬性用來指定儲存格內容與儲存格邊界之間的空白距離的大小。此屬性的參數值也是數字，表示單元格內容與上下邊界之間空白距離的高度所佔像素點數以及單元格內容與左右邊界之間空白距離的寬度所佔的像素點數。
e.g小結:cellspacing代表的是單元格與單元格之間的距離，cellpadding表示的是單元格內容與邊框的距離；前者的理解像margin,後者像padding；巢(cell) --表格的內容；巢補白(表格填充)(cellpadding)--代表巢外面的一個距離，用於隔開巢與巢空間；巢空間(表格間距)(cellspacing)--代表表格邊框與巢補白的距離，也是巢補白之間的距離
拓展一：表格的行與列如何合併？ colspan跨列合併，rowspan跨行合併
程式碼展示：
<!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.
*/推薦教學：《CSS教學》
以上是table 中 cellspacing 與 cellpadding 區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！