HTML Table 表格

HTML Table 表格

HTML Table 表格

﹤table﹥    建立一表格。
﹤caption﹥**標題**﹤/caption﹥
﹤tbody﹥    表格內容開始。
﹤th﹥﹤th/﹥表示表頭單元格
﹤tr﹥﹤/tr﹥ 代表的是一行。
﹤td﹥﹤/td﹥ 代表一列。
﹤/tbody﹥   表格內容完結。
﹤/table﹥   建立完成。
﹤table border="1"﹥邊框
﹤table rules="rows"﹥ 欄位內距距離
      rules=none 沒有線條。
      rules=groups 位於行組和列組之間的線條。
      rules=rows 位於行之間的線條。
      rules=cols 位於列之間的線條。
      rules=all 位於行和列之間的線條。

bgcolor="#00FF00

<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

cellspacing="20" 欄位間的距離

<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>

得出

**標題**

第一行 欄位 1	第一行 欄位 2
第二行 欄位 1	第二行 欄位 2

cellpadding ="20" 欄位內距距離

<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>

得出

**標題**

第一行 欄位 1	第一行 欄位 2
第二行 欄位 1	第二行 欄位 2

colspan="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>

得出

colspan="2" 橫 二合併為一

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

rowspan="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

text-align vertical-align

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

<table rules="rows">

欄位 1	欄位 2	欄位 3
欄位 1	欄位 2	欄位 3
欄位 1	欄位 2	欄位 4

<table rules="cols">

欄位 1	欄位 2	欄位 3
欄位 1	欄位 2	欄位 3
欄位 1	欄位 2	欄位 4

<table rules="all">

欄位 1	欄位 2	欄位 3
欄位 1	欄位 2	欄位 3
欄位 1	欄位 2	欄位 4

<table rules="none">

欄位 1	欄位 2	欄位 3
欄位 1	欄位 2	欄位 3
欄位 1	欄位 2	欄位 4

<style>.reference,table.tecspec { border-collapse: collapse; width: 90%; font-size: 20px; margin: 0 auto; } .reference th{ border: 1px solid #000080; width:100px; height:40px; } .reference td { border: 1px solid #000080; height:30px; text-align: center; vertical-align: middle;} .reference tr:nth-child(2n+2) { background-color: orange } </style> <table class="reference"><tbody><tr><th colspan="8">CSS .reference tr:nth-child(2n+2) {background-color: orange} </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>

00

<style>.reference,table.tecspec { border-collapse: collapse; width: 90%; font-size: 20px; margin: 0 auto; } .reference th{ border: 1px solid #000080; width:100px; height:40px; } .reference td { border: 1px solid #000080; height:30px; text-align: center; vertical-align: middle;} .reference tr:nth-child(3n+3) { background-color: orange } </style> <table class="reference"><tbody><tr><th colspan="8">CSS .reference tr:nth-child(3n+3) {background-color: orange} </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>

00

<style>.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; } .reference td { border: 1px solid #000080; height:30px; text-align: center; vertical-align: middle;} .reference tr:first-child{background: red} </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>

00

<style>.reference,table.tecspec {border-collapse: collapse; width: 80%; font-size: 20px; margin: 0 auto; } .reference th{ border: 1px solid #000080; width:100px; height:40px; } .reference td { border: 1px solid #000080; height:30px; text-align: center; vertical-align: middle;} .reference tr:last-child{background: red} </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>

00

<style>.reference,table.tecspec {border-collapse: collapse; width: 80%; font-size: 20px; margin: 0 auto; } .reference th{ border: 1px solid #000080; width:100px; height:40px; } .reference td { border: 1px solid #000080; height:30px; text-align: center; vertical-align: middle;} .reference tr:first-child {background: yellow} .reference td:first-child {background: yellow} </style> <table class="reference"><tbody><tr><th colspan="8">CSS .reference tr:first-child {background: yellow}<br>.reference td:first-child {background: yellow} </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>

00

#html table 表格