文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >专栏 >HTML4.0标准语法–表格

HTML4.0标准语法–表格

作者头像
Java架构师必看
发布于 2021-03-23 10:29:09
发布于 2021-03-23 10:29:09
6740
举报
文章被收录于专栏：Java架构师必看Java架构师必看

表格的色彩表元的背景色彩和背景图象#=rrggbb16进制RGB数码,或者是下列预定

强烈推介IDEA2020.2破解激活，IntelliJ IDEA 注册码，2020.2 IDEA 激活码

表格的色彩

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

#=rrggbb 16 进制 RGB 数码, 或者是下列预定义色彩名称：

Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,

Fuchsia, White, Green, Purple, Silver, Yellow, Aqua

代码语言：javascript
复制
<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=#>

代码语言：javascript
复制
<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=#>

代码语言：javascript
复制
<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)

代码语言：javascript
复制
<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

代码语言：javascript
复制
<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

代码语言：javascript
复制
<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>

代码语言：javascript
复制
<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>

代码语言：javascript
复制
<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

本文由来源 21aspnet，由 javajgs_com 整理编辑，其版权均为 21aspnet 所有，文章内容系作者个人观点，不代表 Java架构师必看 对观点赞同或支持。如需转载，请注明文章来源。

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
ide

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

ide
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
目录
  • 表元的背景色彩和背景图象 <th bgcolor=#> <th background="URL">
  • 表格边框的色彩 <table bordercolor=#>
  • 表格边框色彩的亮度控制 <table bordercolorlight=#> <table bordercolordark=#>
  •  表格的分组显示(Structured Table)
    • 按行分组 <thead> ... </thead> - 表的题头(Header) <tbody> ... </tbody> - 表的正文(Body) <tfoot> ... </tfoot> - 表的脚注(Footer)
    • 按列分组 <colgroup align=#> #=left, right, center
    • 列的属性控制 <col span=#> #=从左数起，具有指定属性的列的列数 <col align=#> #=left, right, center
  •  表格中边框的显示
    • 显示所有 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>
  •  表格中分隔线(Rules)的显示
    • 显示所有分隔线 <table rules=all>
    • 只显示组(Groups)与组之间的分隔线 <table rules=groups>
    • 只显示行与行之间的分隔线 <table rules=rows>
    • 只显示列与列之间的分隔线 <table rules=cols>
    • 不显示任何分隔线 <table rules=none>
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2026 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论