HTML 07: 表格進階(TABLE ADVANCED)

文章目錄

• 顯示所有 4 個邊框 <table frame=box>
• 只顯示上邊框 <table frame=above>
• 只顯示下邊框 <table frame=below>
• 只顯示上、下邊框 <table frame=hsides>
• 只顯示左、右邊框 <table frame=vsides>
• 只顯示左邊框 <table frame=lhs>
• 只顯示右邊框 <table frame=rhs>
• 不顯示任何邊框 <table frame=void>
• 顯示所有分隔線 <table rules=all>
• 只顯示組(Groups)與組之間的分隔線 <table rules=groups>
• 只顯示行與行之間的分隔線 <table rules=rows>
• 只顯示列與列之間的分隔線 <table rules=cols>
• 不顯示任何分隔線 <table rules=none>

表格進階(TABLE ADVANCED)

 

 

表格的色彩

表元的背景色彩和背景圖象
<th bgcolor=#>
<th background="URL">

#=rrggbb 16 進位 RGB 數位, 或者是下列預定義色彩名稱：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua

<table border><tr><th bgcolor=ffaa00>Food</th>    <th bgcolor=Red>Drink</th>    <th rowspan=2 background="image.gif">Sweet</th><tr bgcolor=white><td>A</td><td>B</td></table>

Food	Drink	Sweet
A	B

表格邊框的色彩
<table bordercolor=#>

<table cellspacing=5 border=5 bodercolor=#ffaa00><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td>      </table>

Food	Drink	Sweet
A	B	C

表格邊框色彩的亮度控制
<table bordercolorlight=#>
<table bordercolordark=#>

<table cellspacing=5 border=5      bordercolorlight=White bordercolordark=Maroon><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td>      </table>

Food	Drink	Sweet
A	B	C

表格的分組顯示(Structured Table)

按行分組
<thead> ... </thead> - 表的題頭(Header)
<tbody> ... </tbody> - 表的本文(Body)
<tfoot> ... </tfoot> - 表的腳註(Footer)

<table border><thead>     <tr><th>Food</th><th>Drink</th><th>Sweet</th></thead><tbody>     <tr><td>A</td><td>B</td><td>C</td>     <tr><td>D</td><td>E</td><td>F</td></tbody></table>

 

Food	Drink	Sweet
A	B	C
D	E	F

按列分組
<colgroup align=#> #=left, right, center

<table border width=160><colgroup align=left><colgroup align=center><colgroup align=right>     <thead>          <tr><th>Food</th><th>Drink</th><th>Sweet</th>     </thead>     <tbody>          <tr><td>A</td><td>B</td><td>C</td>          <tr><td>D</td><td>E</td><td>F</td>     </tbody></table>

 

Food	Drink	Sweet
A	B	C
D	E	F

列的屬性控制
<col span=#> #=從左數起，具有指定屬性的列的列數
<col align=#> #=left, right, center

<table border width=160><colgroup>     <col align=center span=2><colgroup align=right>     <thead>          <tr><th>Food</th><th>Drink</th><th>Sweet</th>     </thead>     <tbody>          <tr><td>A</td><td>B</td><td>C</td>          <tr><td>D</td><td>E</td><td>F</td>     </tbody></table>

 

Food	Drink	Sweet
A	B	C
D	E	F

表格中邊框的顯示

顯示所有 4 個邊框 <table frame=box>

<table border frame=box><thead>     <tr><th>Food</th><th>Drink</th><th>Sweet</th></thead><tbody>     <tr><td>A</td><td>B</td><td>C</td>     <tr><td>D</td><td>E</td><td>F</td></tbody></table>

 

Food	Drink	Sweet
A	B	C
D	E	F

只顯示上邊框 <table frame=above>

 

Food	Drink	Sweet
A	B	C
D	E	F

只顯示下邊框 <table frame=below>

 

Food	Drink	Sweet
A	B	C
D	E	F

只顯示上、下邊框 <table frame=hsides>

 

Food	Drink	Sweet
A	B	C
D	E	F

只顯示左、右邊框 <table frame=vsides>

 

Food	Drink	Sweet
A	B	C
D	E	F

只顯示左邊框 <table frame=lhs>

 

Food	Drink	Sweet
A	B	C
D	E	F

只顯示右邊框 <table frame=rhs>

 

Food	Drink	Sweet
A	B	C
D	E	F

不顯示任何邊框 <table frame=void>

 

Food	Drink	Sweet
A	B	C
D	E	F

表格中分隔線(Rules)的顯示

顯示所有分隔線 <table rules=all>

<table border rules=all><colgroup><col align=center span=2><colgroup align=right>     <thead>          <tr><th>Food</th><th>Drink</th><th>Sweet</th>     </thead>     <tbody>          <tr><td>A</td><td>B</td><td>C</td>          <tr><td>D</td><td>E</td><td>F</td>     </tbody>     <tbody>          <tr><td rowspan=3 align=right>Total $-00.0</td>     </tbody></table>

 

Food	Drink	Sweet
A	B	C
D	E	F
Total $-00.0

只顯示組(Groups)與組之間的分隔線 <table rules=groups>

 

Food	Drink	Sweet
A	B	C
D	E	F
Total $-00.0

只顯示行與行之間的分隔線 <table rules=rows>

 

Food	Drink	Sweet
A	B	C
D	E	F
Total $-00.0

只顯示列與列之間的分隔線 <table rules=cols>

 

Food	Drink	Sweet
A	B	C
D	E	F
Total $-00.0

不顯示任何分隔線 <table rules=none>

 

Food	Drink	Sweet
A	B	C
D	E	F
Total $-00.0