table中cesllspacing與cellpadding的區別

時間 2020-03-21

標籤 table cesllspacing cellpadding 區別简体版

原文原文鏈接

table是什麼？它是由一個個cell單元格構成的，在表格中，<td>的個數取決於每行<tr>中包裹的cell單元格個數！此外，默認table表格在沒有添加css樣式<style type="text/css">table tr td,th{border:1px solid #000;}以前,在瀏覽器中顯示是沒有表格線的；css

html中常見table寫法:A.<tr>…</tr>:表格的一行,有幾對tr表格就有幾行； B.<td>…</td>:表格的一個單元格,一行中包含幾對<td>...</td>,說明一行中就有幾列； C.<th>…</th>:表格的頭部的一個單元格,表格表頭,文本默認爲粗體而且居中顯示；D.<table summary="表格簡介文本">/*摘要的內容是不會在瀏覽器中顯示出來的。它的做用是增長表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內容，還能夠使屏幕閱讀器更好的幫助特殊用戶讀取表格內容。*/ E.caption標籤,爲表格添加標題和摘要,標題用以描述表格內容，標題的顯示位置：表格上方html

1 <table border="" cellspacing="" cellpadding="">
2     <tr><th>Header</th></tr>
3     <tr><td>Data</td></tr>
4 </table>

1 <table border="" cellspacing="" cellpadding="" summary="">
2         <caption></caption>
3         <tr><th>今天星期五/th></tr>
4         <tr><td>today is Friday</td></tr>
5 </table>

言歸正傳，cellpadding 和cellspacing區別，先看下面一組表格圖片與cellspacing代碼的對比：chrome

 1 <!DOCTYPE HTML>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>table中cellspacing的區別</title>
 6         <style type="text/css">
 7             table{
 8                 margin-bottom: 50px;
 9             }
10             .ceshi{
11                 border-spacing: 20px;
12                 /*Specifies the distance between the borders of adjoining cells in a table. */
13             }
14         </style>
15     </head>
16     <table width="600" cellspacing="0" bordercolor="#333" border="1">
17         <caption>第一個單元格</caption>
18         <tr>
19             <td>測試1</td>
20             <td>測試2</td>
21             <td>測試3</td>
22         </tr>
23     </table>
24     <table width="600" cellspacing="20" bordercolor="#333" border="1">
25         <caption>第二個單元格</caption>
26         <tr>
27             <td>測試1</td>
28             <td>測試2</td>
29             <td>測試3</td>
30         </tr>
31     </table>
32     <table width="600" bordercolor="#333" border="1" class="ceshi">
33         <caption>第三個單元格</caption>
34         <tr>
35             <td>測試1</td>
36             <td>測試2</td>
37             <td>測試3</td>
38         </tr>
39     </table>
40 </html>

比較代碼，最上面的兩個表格只有cellspacing的設置不一樣，一個爲」0「，一個爲」20「，顯示的結果就是第一個表格的每一個單元格之間的距離爲0，第二個表格的每一個單元格之間的距離爲20；延伸下：第二個表格與第三個表格一致，可是第三個表格沒有設置cellspacing，咱們發現這個border-spacing: 20px;與cellspacing="20" 的結果同樣同樣的，e.g小結：cellspacing屬性用來指定表格各單元格之間的空隙。此屬性的參數值是數字，表示單元格間隙所佔的像素點數。瀏覽器

 1 <!DOCTYPE HTML>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>tabl表格中cellpadding的區別</title>
 6         <style type="text/css">
 7             table{
 8                 margin-bottom: 50px;
 9             }
10         </style>
11     </head>
12     <body>
13         <table width="600px" border="1" bordercolor="#ccc" cellpadding="0">
14             <tr>
15                 <th>我是快樂的cell表格</th>
16                 <th>我是快樂的cell表格</th>
17                 <th>我是快樂的cell表格</th>
18             </tr>
19         </table>
20         <table width="600px" border="1" bordercolor="#ccc" cellpadding="20">
21             <tr>
22                 <th>我是快樂的cell表格</th>
23                 <th>我是快樂的cell表格</th>
24                 <th>我是快樂的cell表格</th>
25             </tr>
26         </table>
27     </body>
28 </html>

從上面的代碼運行展現結果來看：兩個表格只有cellpadding代碼值不一樣，第一個表格中"我是快樂的cell表格"這幾個字離它所在的單元格爲0,那是由於設置了cellpadding="0"的緣由；第二個表格中的"我是快樂的cell表格"這幾個字離它所在的單元格比較遠，那是由於cellpadding="20",也就是說"我是快樂的cell表格"離它所在的單元格的邊界的距離爲20像素。簡單的說,cellpadding的值等於多少,那表格內的單元格從自身邊界開始向內保留多少空白,單元格里的元素永遠都不會進入那些空白裏。||注意 cellpadding屬性用來指定單元格內容與單元格邊界之間的空白距離的大小。此屬性的參數值也是數字，表示單元格內容與上下邊界之間空白距離的高度所佔像素點數以及單元格內容與左右邊界之間空白距離的寬度所佔的像素點數。測試

e.g小結:cellspacing表明的是單元格與單元格之間的距離，cellpadding表示的是單元格內容與邊框的距離；前者的理解像margin,後者像padding；巢(cell)--表格的內容；巢補白(表格填充)(cellpadding)--表明巢外面的一個距離，用於隔開巢與巢空間；巢空間(表格間距)(cellspacing)--表明表格邊框與巢補白的距離，也是巢補白之間的距離搜索引擎

拓展一：表格的行與列如何合併？colspan跨列合併，rowspan跨行合併spa

代碼展現：3d

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>colspan與rowspan的區別</title>
 6         <style type="text/css">
 7             table{
 8                 margin: 0 auto;
 9                 margin-bottom: 50px;
10                 text-align: center;
11             }
12         </style>
13     </head>
14     <body>
15     <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
16         <caption>正常展現：一行三列</caption>
17         <tr>
18             <td>說點啥了,不知道</td>
19             <td>說點啥了,不知道</td>
20             <td>說點啥了,不知道</td>
21         </tr>
22     </table>
23     <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
24         <caption>如今要展現一行二列,怎麼辦？colspan跨列合併</caption>
25         <tr>
26             <td>說點啥了,不知道</td>
27             <td colspan="2">說點啥了,不知道</td>
28             <!-- <td>說點啥了,不知道</td> -->
29         </tr>
30     </table>
31     <!-- ========無情分割線========================================================== -->
32     <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
33         <caption>正常展現：二行二列</caption>
34         <tr>
35             <td>說點啥了,不知道</td>
36             <td>說點啥了,不知道</td>
37         </tr>
38         <tr>
39             <td>說點啥了,不知道</td>
40             <td>說點啥了,不知道</td>
41         </tr>
42     </table>
43     <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
44         <caption>如今要展現一行二列,怎麼辦?rowspan跨行合併</caption>
45         <tr>
46             <td rowspan="2">說點啥了,不知道</td>
47             <td>說點啥了,不知道</td>
48         </tr>
49         <tr>
50             <!-- <td>說點啥了,不知道</td> -->
51             <td>說點啥了,不知道</td>
52         </tr>
53     </table>
54     </body>
55 </html>

拓展二：如何合併表格邊框？border-collapse: collapse;code

 1     <!-- 合併表格單元格 -->
 2     <style type="text/css">
 3         table{
 4             border-collapse: collapse;
 5             /* border-collapse: separate; */
 6             /*Indicates whether the row and cell borders of a table are joined in a single border or detached as in standard HTML. */
 7         }
 8     </style>
 9     <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
10         <tbody>
11             <tr>
12                 <td>單元格1</td>
13                 <td>單元格2</td>
14                 <td>單元格3</td>
15             </tr>
16         </tbody>
17     </table>

最後chrome瀏覽器中，系統默認的表格邊框顏色grey，邊框間距爲2等等htm

 1 /* user agent stylesheet */
 2         /* table {
 3             display: table;
 4             border-collapse: separate;
 5             border-spacing: 2px;
 6             border-color: grey;
 7         } */
 8         
 9 /*         border="1"默認等於border="1px"
10         border-top-width: 1px;
11         border-right-width: 1px;
12         border-bottom-width: 1px;
13         border-left-width: 1px; */
14         
15 /*        bordercolor返回或設置對象的邊框顏色
16         bordercolor:W3C - String 
17         Specifies the color of the border of the element. Specify either a color name or RGB color code. 
18 */

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。