偶數與奇數規則 CSS :nth-child(even) :nth-child(odd)

偶數與奇數規則 CSS :nth-child(even) :nth-child(odd)

一種提高易於閱讀大型表格的方法是每，排以色調交替譬如，下面的 table 顯示淺灰色背景的 偶數排，以及白底的奇數排，這規則在此非常簡單。
table:nth-child(even) {background: #CCC}
table:nth-child(odd) {background: #FFF}

<style> table tr:first-child {background: red} table tr:last-child {background: yellow} table td {width:80px} </style> <table border="1"><tbody> <tr><th colspan="8"> CSS table tr:first-child {background: red} </th></tr> <tr><td>Month </td><td>芒果 </td><td>火龙果 </td><td>燈 </td><td>奇異果 </td><td>芒果 </td><td>哈密瓜 </td><td>香蕉 </td></tr> <tr> <td>Jan </td><td>14 </td><td>13 </td><td>14 </td><td>13 </td><td>14 </td><td>11 </td><td>11 </td></tr> <tr> <td>Feb </td><td>13 </td><td>15 </td><td>12 </td><td>15 </td><td>15 </td><td>12 </td><td>14 </td></tr> <tr> <td>Mar </td><td>16 </td><td>15 </td><td>14 </td><td>17 </td><td>16 </td><td>15 </td><td>14 </td></tr> <tr> <td>Apr </td><td>17 </td><td>16 </td><td>17 </td><td>17 </td><td>17 </td><td>15 </td><td>15 </td></tr> <tr> <td>May </td><td>21 </td><td>20 </td><td>20 </td><td>21 </td><td>22 </td><td>20 </td><td>21 </td></tr> <tr> <td>Jun </td><td>24 </td><td>23 </td><td>25 </td><td>24 </td><td>25 </td><td>23 </td><td>25 </td></tr> <tr> <td>Jul </td><td>29 </td><td>28 </td><td>26 </td><td>26 </td><td>27 </td><td>26 </td><td>25 </td></tr> <tr> <td>Aug </td><td>29 </td><td>28 </td><td>27 </td><td>28 </td><td>28 </td><td>27 </td><td>26 </td></tr> <tr> <td>Sep </td><td>24 </td><td>23 </td><td>23 </td><td>26 </td><td>24 </td><td>24 </td><td>24 </td></tr> <tr> <td>Oct </td><td>20 </td><td>22 </td><td>20 </td><td>22 </td><td>20 </td><td>19 </td><td>20 </td></tr> <tr> <td>Nov </td><td>18 </td><td>17 </td><td>16 </td><td>17 </td><td>16 </td><td>15 </td><td>14 </td></tr> <tr> <td>Dec </td><td>15 </td><td>13 </td><td>13 </td><td>14 </td><td>13 </td><td>10 </td><td>13 </td></tr> <tr><th colspan="8"> table tr:last-child {background: yellow} </th></tr> </tbody></table>

00

<style> table.reference,table.tecspec { border-collapse: collapse; width: 80%; font-size: 20px; margin: 0 auto; } table.reference th{ border: 1px solid #000080; width:100px; height:40px; } table.reference td { border: 1px solid #000080; height:30px; text-align: center; vertical-align: middle;} table.reference tr:nth-child(2n+2) { background-color: orange } </style> <table class="reference"><tbody> <tr><th colspan="8"> CSS table.reference tr:nth-child(2n+2) {background-color: orange} </th></tr> <tr><td>Month </td><td>芒果 </td><td>火龙果 </td><td>燈 </td><td>奇異果 </td><td>芒果 </td><td>哈密瓜 </td><td>香蕉 </td></tr> <tr> <td>Jan </td><td>14 </td><td>13 </td><td>14 </td><td>13 </td><td>14 </td><td>11 </td><td>11 </td></tr> <tr> <td>Feb </td><td>13 </td><td>15 </td><td>12 </td><td>15 </td><td>15 </td><td>12 </td><td>14 </td></tr> <tr> <td>Mar </td><td>16 </td><td>15 </td><td>14 </td><td>17 </td><td>16 </td><td>15 </td><td>14 </td></tr> <tr> <td>Apr </td><td>17 </td><td>16 </td><td>17 </td><td>17 </td><td>17 </td><td>15 </td><td>15 </td></tr> <tr> <td>May </td><td>21 </td><td>20 </td><td>20 </td><td>21 </td><td>22 </td><td>20 </td><td>21 </td></tr> <tr> <td>Jun </td><td>24 </td><td>23 </td><td>25 </td><td>24 </td><td>25 </td><td>23 </td><td>25 </td></tr> <tr> <td>Jul </td><td>29 </td><td>28 </td><td>26 </td><td>26 </td><td>27 </td><td>26 </td><td>25 </td></tr> <tr> <td>Aug </td><td>29 </td><td>28 </td><td>27 </td><td>28 </td><td>28 </td><td>27 </td><td>26 </td></tr> <tr> <td>Sep </td><td>24 </td><td>23 </td><td>23 </td><td>26 </td><td>24 </td><td>24 </td><td>24 </td></tr> <tr> <td>Oct </td><td>20 </td><td>22 </td><td>20 </td><td>22 </td><td>20 </td><td>19 </td><td>20 </td></tr> <tr> <td>Nov </td><td>18 </td><td>17 </td><td>16 </td><td>17 </td><td>16 </td><td>15 </td><td>14 </td></tr> <tr> <td>Dec </td><td>15 </td><td>13 </td><td>13 </td><td>14 </td><td>13 </td><td>10 </td><td>13 </td></tr> </tbody></table> <style> table.reference,table.tecspec { border-collapse: collapse; width: 80%; font-size: 20px; margin: 0 auto; } table.reference th{ border: 1px solid #000080; width:100px; height:40px; } table.reference td { border: 1px solid #000080; height:30px; text-align: center; vertical-align: middle;} table.reference tr:nth-child(3n+2) { background-color: orange } </style> <table class="reference"><tbody> <tr><th colspan="8"> CSS table.reference tr:nth-child(3n+2) {background-color: orange} </th></tr> <tr><td>Month </td><td>芒果 </td><td>火龙果 </td><td>燈 </td><td>奇異果 </td><td>芒果 </td><td>哈密瓜 </td><td>香蕉 </td></tr> <tr> <td>Jan </td><td>14 </td><td>13 </td><td>14 </td><td>13 </td><td>14 </td><td>11 </td><td>11 </td></tr> <tr> <td>Feb </td><td>13 </td><td>15 </td><td>12 </td><td>15 </td><td>15 </td><td>12 </td><td>14 </td></tr> <tr> <td>Mar </td><td>16 </td><td>15 </td><td>14 </td><td>17 </td><td>16 </td><td>15 </td><td>14 </td></tr> <tr> <td>Apr </td><td>17 </td><td>16 </td><td>17 </td><td>17 </td><td>17 </td><td>15 </td><td>15 </td></tr> <tr> <td>May </td><td>21 </td><td>20 </td><td>20 </td><td>21 </td><td>22 </td><td>20 </td><td>21 </td></tr> <tr> <td>Jun </td><td>24 </td><td>23 </td><td>25 </td><td>24 </td><td>25 </td><td>23 </td><td>25 </td></tr> <tr> <td>Jul </td><td>29 </td><td>28 </td><td>26 </td><td>26 </td><td>27 </td><td>26 </td><td>25 </td></tr> <tr> <td>Aug </td><td>29 </td><td>28 </td><td>27 </td><td>28 </td><td>28 </td><td>27 </td><td>26 </td></tr> <tr> <td>Sep </td><td>24 </td><td>23 </td><td>23 </td><td>26 </td><td>24 </td><td>24 </td><td>24 </td></tr> <tr> <td>Oct </td><td>20 </td><td>22 </td><td>20 </td><td>22 </td><td>20 </td><td>19 </td><td>20 </td></tr> <tr> <td>Nov </td><td>18 </td><td>17 </td><td>16 </td><td>17 </td><td>16 </td><td>15 </td><td>14 </td></tr> <tr> <td>Dec </td><td>15 </td><td>13 </td><td>13 </td><td>14 </td><td>13 </td><td>10 </td><td>13 </td></tr> </tbody></table>

<style> table.reference,table.tecspec { border-collapse: collapse; width: 80%; font-size: 20px; margin: 0 auto; } table.reference th{ border: 1px solid #000080; width:100px; height:40px; } table.reference td { border: 1px solid #000080; height:30px; text-align: center; vertical-align: middle;} table.reference tr:first-child{background: red} table.reference tr:nth-child(2n+3) { background-color: orange } </style> <table class="reference"><tbody> <tr><th colspan="8"> CSS table.reference tr:first-child {background: red}<br> 第一行為紅色 </th></tr> <tr><td>Month </td><td>芒果 </td><td>火龙果 </td><td>燈 </td><td>奇異果 </td><td>芒果 </td><td>哈密瓜 </td><td>香蕉 </td></tr> <tr> <td>Jan </td><td>14 </td><td>13 </td><td>14 </td><td>13 </td><td>14 </td><td>11 </td><td>11 </td></tr> <tr> <td>Feb </td><td>13 </td><td>15 </td><td>12 </td><td>15 </td><td>15 </td><td>12 </td><td>14 </td></tr> <tr> <td>Mar </td><td>16 </td><td>15 </td><td>14 </td><td>17 </td><td>16 </td><td>15 </td><td>14 </td></tr> <tr> <td>Apr </td><td>17 </td><td>16 </td><td>17 </td><td>17 </td><td>17 </td><td>15 </td><td>15 </td></tr> <tr> <td>May </td><td>21 </td><td>20 </td><td>20 </td><td>21 </td><td>22 </td><td>20 </td><td>21 </td></tr> <tr> <td>Jun </td><td>24 </td><td>23 </td><td>25 </td><td>24 </td><td>25 </td><td>23 </td><td>25 </td></tr> <tr> <td>Jul </td><td>29 </td><td>28 </td><td>26 </td><td>26 </td><td>27 </td><td>26 </td><td>25 </td></tr> <tr> <td>Aug </td><td>29 </td><td>28 </td><td>27 </td><td>28 </td><td>28 </td><td>27 </td><td>26 </td></tr> <tr> <td>Sep </td><td>24 </td><td>23 </td><td>23 </td><td>26 </td><td>24 </td><td>24 </td><td>24 </td></tr> <tr> <td>Oct </td><td>20 </td><td>22 </td><td>20 </td><td>22 </td><td>20 </td><td>19 </td><td>20 </td></tr> <tr> <td>Nov </td><td>18 </td><td>17 </td><td>16 </td><td>17 </td><td>16 </td><td>15 </td><td>14 </td></tr> <tr> <td>Dec </td><td>15 </td><td>13 </td><td>13 </td><td>14 </td><td>13 </td><td>10 </td><td>13 </td></tr> </tbody></table> <style> table.reference,table.tecspec { border-collapse: collapse; width: 80%; font-size: 20px; margin: 0 auto; } table.reference th{ border: 1px solid #000080; width:100px; height:40px; } table.reference td { border: 1px solid #000080; height:30px; text-align: center; vertical-align: middle;} table.reference tr:last-child{background: red} table.reference tr:nth-child(2n+3) { background-color: orange } </style> <table class="reference"><tbody> <tr><th colspan="8"> CSS table.reference tr:last-child {background: red}<br> 最尾行為紅色 </th></tr> <tr><td>Month </td><td>芒果 </td><td>火龙果 </td><td>燈 </td><td>奇異果 </td><td>芒果 </td><td>哈密瓜 </td><td>香蕉 </td></tr> <tr> <td>Jan </td><td>14 </td><td>13 </td><td>14 </td><td>13 </td><td>14 </td><td>11 </td><td>11 </td></tr> <tr> <td>Feb </td><td>13 </td><td>15 </td><td>12 </td><td>15 </td><td>15 </td><td>12 </td><td>14 </td></tr> <tr> <td>Mar </td><td>16 </td><td>15 </td><td>14 </td><td>17 </td><td>16 </td><td>15 </td><td>14 </td></tr> <tr> <td>Apr </td><td>17 </td><td>16 </td><td>17 </td><td>17 </td><td>17 </td><td>15 </td><td>15 </td></tr> <tr> <td>May </td><td>21 </td><td>20 </td><td>20 </td><td>21 </td><td>22 </td><td>20 </td><td>21 </td></tr> <tr> <td>Jun </td><td>24 </td><td>23 </td><td>25 </td><td>24 </td><td>25 </td><td>23 </td><td>25 </td></tr> <tr> <td>Jul </td><td>29 </td><td>28 </td><td>26 </td><td>26 </td><td>27 </td><td>26 </td><td>25 </td></tr> <tr> <td>Aug </td><td>29 </td><td>28 </td><td>27 </td><td>28 </td><td>28 </td><td>27 </td><td>26 </td></tr> <tr> <td>Sep </td><td>24 </td><td>23 </td><td>23 </td><td>26 </td><td>24 </td><td>24 </td><td>24 </td></tr> <tr> <td>Oct </td><td>20 </td><td>22 </td><td>20 </td><td>22 </td><td>20 </td><td>19 </td><td>20 </td></tr> <tr> <td>Nov </td><td>18 </td><td>17 </td><td>16 </td><td>17 </td><td>16 </td><td>15 </td><td>14 </td></tr> <tr> <td>Dec </td><td>15 </td><td>13 </td><td>13 </td><td>14 </td><td>13 </td><td>10 </td><td>13 </td></tr> </tbody></table>

<style> table.reference,table.tecspec { border-collapse: collapse; width: 80%; font-size: 20px; margin: 0 auto; } table.reference th{ border: 1px solid #000080; width:100px; height:40px; } table.reference td { border: 1px solid #000080; height:30px; text-align: center; vertical-align: middle;} col:first-child {background: #FF0} col:nth-child(2n+3) {background: #CCC} </style> <table class="reference"> <col><col><col><col><col><col><col><col> <tbody> <tr><td colspan="8"> col:first-child {background: #FF0}<br> col:nth-child(2n+3) {background: #CCC} </td></tr> <tr><td>Month </td><td>芒果 </td><td>火龙果 </td><td>燈 </td><td>奇異果 </td><td>芒果 </td><td>哈密瓜 </td><td>香蕉 </td></tr><tr> <td>Jan </td><td>14 </td><td>13 </td><td>14 </td><td>13 </td><td>14 </td><td>11 </td><td>11 </td></tr> <tr> <td>Feb </td><td>13 </td><td>15 </td><td>12 </td><td>15 </td><td>15 </td><td>12 </td><td>14 </td></tr> <tr> <td>Mar </td><td>16 </td><td>15 </td><td>14 </td><td>17 </td><td>16 </td><td>15 </td><td>14 </td></tr> <tr> <td>Apr </td><td>17 </td><td>16 </td><td>17 </td><td>17 </td><td>17 </td><td>15 </td><td>15 </td></tr> <tr> <td>May </td><td>21 </td><td>20 </td><td>20 </td><td>21 </td><td>22 </td><td>20 </td><td>21 </td></tr> <tr> <td>Jun </td><td>24 </td><td>23 </td><td>25 </td><td>24 </td><td>25 </td><td>23 </td><td>25 </td></tr> <tr> <td>Jul </td><td>29 </td><td>28 </td><td>26 </td><td>26 </td><td>27 </td><td>26 </td><td>25 </td></tr> <tr> <td>Aug </td><td>29 </td><td>28 </td><td>27 </td><td>28 </td><td>28 </td><td>27 </td><td>26 </td></tr> <tr> <td>Sep </td><td>24 </td><td>23 </td><td>23 </td><td>26 </td><td>24 </td><td>24 </td><td>24 </td></tr> <tr> <td>Oct </td><td>20 </td><td>22 </td><td>20 </td><td>22 </td><td>20 </td><td>19 </td><td>20 </td></tr> <tr> <td>Nov </td><td>18 </td><td>17 </td><td>16 </td><td>17 </td><td>16 </td><td>15 </td><td>14 </td></tr> <tr> <td>Dec </td><td>15 </td><td>13 </td><td>13 </td><td>14 </td><td>13 </td><td>10 </td><td>13 </td></tr> </tbody></table> <style> table.reference,table.tecspec { border-collapse: collapse; width: 80%; font-size: 20px; margin: 0 auto; } table.reference th{ border: 1px solid #000080; width:100px; height:40px; } table.reference td { border: 1px solid #000080; height:30px; text-align: center; vertical-align: middle;} table.reference tr:nth-child(-n+5) { background-color: orange } table.reference tr:nth-child(n+8) { background-color: red } </style> <table class="reference"><tbody> <tr><th colspan="8"> table.reference tr:nth-child(-n+5){ background-color: orange }<br> table.reference tr:nth-child(n+8) { background-color: red }<br> </th></tr> <tr><td>Month </td><td>芒果 </td><td>火龙果 </td><td>燈 </td><td>奇異果 </td><td>芒果 </td><td>哈密瓜 </td><td>香蕉 </td></tr> <tr> <td>Jan </td><td>14 </td><td>13 </td><td>14 </td><td>13 </td><td>14 </td><td>11 </td><td>11 </td></tr> <tr> <td>Feb </td><td>13 </td><td>15 </td><td>12 </td><td>15 </td><td>15 </td><td>12 </td><td>14 </td></tr> <tr> <td>Mar </td><td>16 </td><td>15 </td><td>14 </td><td>17 </td><td>16 </td><td>15 </td><td>14 </td></tr> <tr> <td>Apr </td><td>17 </td><td>16 </td><td>17 </td><td>17 </td><td>17 </td><td>15 </td><td>15 </td></tr> <tr> <td>May </td><td>21 </td><td>20 </td><td>20 </td><td>21 </td><td>22 </td><td>20 </td><td>21 </td></tr> <tr> <td>Jun </td><td>24 </td><td>23 </td><td>25 </td><td>24 </td><td>25 </td><td>23 </td><td>25 </td></tr> <tr> <td>Jul </td><td>29 </td><td>28 </td><td>26 </td><td>26 </td><td>27 </td><td>26 </td><td>25 </td></tr> <tr> <td>Aug </td><td>29 </td><td>28 </td><td>27 </td><td>28 </td><td>28 </td><td>27 </td><td>26 </td></tr> <tr> <td>Sep </td><td>24 </td><td>23 </td><td>23 </td><td>26 </td><td>24 </td><td>24 </td><td>24 </td></tr> <tr> <td>Oct </td><td>20 </td><td>22 </td><td>20 </td><td>22 </td><td>20 </td><td>19 </td><td>20 </td></tr> <tr> <td>Nov </td><td>18 </td><td>17 </td><td>16 </td><td>17 </td><td>16 </td><td>15 </td><td>14 </td></tr> <tr> <td>Dec </td><td>15 </td><td>13 </td><td>13 </td><td>14 </td><td>13 </td><td>10 </td><td>13 </td></tr> </tbody></table>

Edit

標簽 table , CSS 樣式表

table rules="all/none/rows/cols/groups"
表格(TABLE)--RULES(內部框線)

值	描述
none	沒有線條。
groups	位於行組和列組之間的線條。
rows	位於行之間的線條。
cols	位於列之間的線條。
all	位於行和列之間的線條。

<table border="1" rules="all" width="80%"> <caption>rules="all</caption><tbody> <tr><td>第一行 欄位 1</td><td>第一行 欄位 2</td></tr> <tr bgcolor="#00FF00"><td>第二行 欄位 1</td><td>第二行 欄位 2</td></tr> </tbody> </table>

rules="all" 第一行 欄位 1 第一行 欄位 2 第二行 欄位 1 第二行 欄位 2

<table border="1" rules="none" width="80%"> <caption>rules="none"<caption><tbody> <tr><td>第一行 欄位 1</td><td>第一行 欄位 2</td></tr> <tr><td>第二行 欄位 1</td><td>第二行 欄位 2</td></tr> </tbody> </table>

rules="none" 第一行 欄位 1 第一行 欄位 2 第二行 欄位 1 第二行 欄位 2

<table border="1" rules="rows" width="80%"> <caption>rules="rows"</caption><tbody> <tr><td>第一行 欄位 1</td><td>第一行 欄位 2</td></tr> <tr><td>第二行 欄位 1</td><td>第二行 欄位 2</td></tr> </tbody> </table>

rules="rows"** 第一行 欄位 1 第一行 欄位 2 第二行 欄位 1 第二行 欄位 2

<table border="1" rules="cols" width="80%"> <caption>rules="cols"</caption><tbody> <tr><td>第一行 欄位 1</td><td>第一行 欄位 2</td></tr> <tr><td>第二行 欄位 1</td><td>第二行 欄位 2</td></tr> </tbody> </table>

rules="cols" 第一行 欄位 1 第一行 欄位 2 第二行 欄位 1 第二行 欄位 2

<table border="1" rules="groups" width="80%"> <caption>rules="cols"</caption><tbody> <tr><td>第一行 欄位 1</td><td>第一行 欄位 2</td></tr> <tr><td>第二行 欄位 1</td><td>第二行 欄位 2</td></tr> </tbody> </table>

rules="groups" 第一行 欄位 1 第一行 欄位 2 第二行 欄位 1 第二行 欄位 2

<table border="1" rules="groups" style="width: 80%;"> <colgroup ></colgroup> <tbody> <tr><td>第1行 1</td><td>第1行 2</td><td>第1行 3</td><td>第1行 4</td></tr> <tr><td>第2行 1</td><td>第2行 2</td><td>第2行 3</td><td>第2行 4</td></tr> <tr><td>第3行 1</td><td>第3行 2</td><td>第3行 3</td><td>第3行 4</td></tr> <tr><td>第4行 1</td><td>第4行 2</td><td>第4行 3</td><td>第4行 4</td></tr> </tbody></table>

第1行 1 第1行 2 第1行 3 第1行 4 第2行 1 第2行 2 第2行 3 第2行 4 第3行 1 第3行 2 第3行 3 第3行 4 第4行 1 第4行 2 第4行 3 第4行 4

<table border="2" rules="GROUPS" style="width: 80%"> <thead> <tr><td>頭 1</td><td>頭 2</td><td>頭 3</td><td>頭 4</td></tr> </thead> <tbody> <tr><td>第2行 1</td><td>第2行 2</td><td>第2行 3</td><td>第2行 4</td></tr> <tr><td>第3行 1</td><td>第3行 2</td><td>第3行 3</td><td>第3行 4</td></tr> </tbody> <tfoot> <tr><td>尾 1</td><td>尾 2</td><td>尾 3</td><td>尾 4</td></tr> </tfoot> </table>

頭 1 頭 2 頭 3 頭 4 第2行 1 第2行 2 第2行 3 第2行 4 第3行 1 第3行 2 第3行 3 第3行 4 尾 1 尾 2 尾 3 尾 4

<table border="2" rules="GROUPS" style="width: 80%"> <thead> <tr><th>頭 1</th><th>頭 2</th><th>頭 3</th><th>頭 4</th></tr> </thead> <tbody> <tr><td>第2行 1</td><td>第2行 2</td><td>第2行 3</td><td>第2行 4</td></tr> <tr><td>第3行 1</td><td>第3行 2</td><td>第3行 3</td><td>第3行 4</td></tr> </tbody> <tfoot> <tr><td>尾 1</td><td>尾 2</td><td>尾 3</td><td>尾 4</td></tr> </tfoot> </table>

頭 1 頭 2 頭 3 頭 4 第2行 1 第2行 2 第2行 3 第2行 4 第3行 1 第3行 2 第3行 3 第3行 4 尾 1 尾 2 尾 3 尾 4

HTML Table 表格

HTML Table 表格

HTML Table 表格 ，網頁設計不可或缺的元素就是表格（Table），通常表格用來做版面的排版，而表格的用法包含了幾個重要的標籤，表格分別是  <table> 、<tr>、 <td> 這幾標籤組合起來才是個完整的表格。

<table>      標籤建立一表格。
<tbody>     標籤表格內容開始。
<tr></tr>    標籤代表的是一行。
<td></td>   標籤則代表一列。
</tbody>    標籤表格內容完結。
</table>     標籤建立完成。

HTML Table rowspan 屬性的功能是用來合併多個列（row），rowspan 可以將表格的兩行合併為一行，也可以一次合併多行，類似 excel 垂直合併儲存格的效果，有了 rowspan 可以讓 HTML 表格有無限的變化。與 colspan 一樣的是 rowspan 也只能用在 HTML 表格的 td 標籤內，用在其他地方沒有效果，所有主流的瀏覽器均支援 HTML Table rowspan 屬性的效果。

HTML Table colspan 屬性的功能是用來讓表格欄位（td）橫跨多列（columns），類似 excel 併儲存格 的效果，colspan 僅能用在 Table 的 td 標籤內，用於其他的標籤內無效。colspan 屬性是 HTML 表格的基本屬性，所有主流的瀏覽器都支援這個屬性的效果，與 colspan 相對應的為 rowspan 屬性。

HTML Table cellspacing 屬性的功能是用來設定表格內 欄位間的距離。

HTML table cellpadding 屬性可用來設計表格欄位內 '文字' '圖像' '元素' 與邊框間的距離，我們可以透過 cellpadding 讓文字或圖片跟表格邊框之間產生一個距離，創造出較為美觀的表格與內容呈現效果。

<table border="1"> <caption>**標題**</caption> <tbody> <tr><td>第一行 欄位 1</td><td>第一行 欄位 2 </td></tr> <tr bgcolor="#00FF00"><td>第二行 欄位 1</td><td>第二行 欄位 2 </td></tr> </tbody> </table>

**標題** 第一行 欄位 1 第一行 欄位 2 第二行 欄位 1 第二行 欄位 2

<table border="10" cellspacing="20" width="80%" > <caption>**標題**</caption> <tbody> <tr><td>第一行 欄位 1</td><td>第一行 欄位 2</td></tr> <tr><td>第二行 欄位 1</td><td>第二行 欄位 2</td></tr> </tbody></table> </td></tr> </tbody></table>

**標題** 第一行 欄位 1 第一行 欄位 2 第二行 欄位 1 第二行 欄位 2

<table border="2" style="width: 80%;"> <caption>colspan="2" 橫 二合併為一</caption> <tbody> <tr><td colspan="2" align="center" valign="middle"> 橫 二合併為一</td></tr> <tr><td>第二行 欄位 1</td><td>第二行 欄位 2</td></tr> </tbody></table> </td></tr> </tbody></table>

colspan="2" 橫 二合併為一 橫 二合併為一 第二行 欄位 1 第二行 欄位 2

<table border="2" style="width: 80%;"> <caption>rowspan="2" 直 二合併為一</caption> <tbody> <tr><td rowspan="2">直 二合併為一 </td><td>第一行 欄位 1</td></tr> <tr><td> 第二行 欄位 1</td></tr> </tbody> </table>

rowspan="2" 直 二合併為一 直 二合併為一 第一行 欄位 1 第二行 欄位 1

範例加入 colspan="4" 的設定， 張此個欄位四合併為一，如果設定為3是三合併為一..........
               rowspan="4"的設定 ，合併多個列。

合併多欄位為一行 colspan="4" height="100px" width="100%"
合併多個列 rowspan="4"
	text-align:left vertical-align:top	text-align:center vertical-align:top	text-align:right vertical-align:top
	text-align:left vertical-align:middle	text-align: center vertical-align:middle	text-align:right vertical-align:middle
	text-align:left vertical-align:bottom	text-align: center vertical-align:bottom	text-align:right vertical-align:bottom