收藏! 表格(table) 高级的使用方法 (html)

最新推荐文章于 2024-03-24 09:38:55 发布

给力地板油

最新推荐文章于 2024-03-24 09:38:55 发布

阅读量1k

点赞数

分类专栏：技术类文章标签： table html border c header url

技术类专栏收录该内容

107 篇文章 0 订阅

订阅专栏

表格进阶(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	Sweet

表格边框的色彩
<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>