- 1、本文档共9页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
HTML表格的美化修饰不知道大家发现没有?这之前创建的表格都非常简陋、简单、难看。如何创建一个布局协调、色调统一、美观、大方的表格?这就涉及到对表格的美化修饰。
网页学习网提示:html语言非常简单,不需要逻辑理解,而绝大部分朋友觉得它难以掌握,90%的原因在于英语单词不过关,所以每节记忆几个单词是非常有必要的。
一、什么是表格的美化修饰
表格的美化修饰就是从多方面对表格进行美化修饰,使表格看上去更漂亮、更美观、更合理。对表格进行美化修饰时,主要从以下几个方面进行:
● 表格的高度、宽度和边框。
● 表格、行、列的背景。
● 表格、行、列的对齐方式。
● 表格的填充、间距属性。
如图1所示就是经过美化修饰之后的表格。
图1 美化修饰过的表格
二、如何对表格进行美化修饰
1.如何设置表格的尺寸和边框
如果不指定表格的高度和宽度,浏览器就会根据表格内容的多少自动调整高度和宽度。如果不指定表格的边框的宽度(border属性),则浏览器将不显示表格边框。若我们既想设置表格的高度和宽度,又想设置表格边框的宽度,那么就得设置表格的高度、宽度和边框属性。
语法:
设置表格的宽度、高度和边框的基本语法:
TABLE width=表格宽度 height=表格高度 border=表格边框宽度??? ……/TABLE
其中,表格的宽度和高度可以用像素来表示,也可以用百分比(与浏览器当前窗口相比的大小比例)来表示。表格边框宽度只能用像素来表示。WANGYEXX.COM
例如:l-ABLE width=”200”height-”100”表示一个宽为200像素,高为100像素的表格。TABLE width=50% height=25%表示一个宽为当前浏览器窗口宽度的50%,高为当前浏览器窗口高度的25%的表格。
示例1:
HTMLHEADTITLE表格的高度、宽度和边框/TITLE/HEADBODYTABLE width=400 height=200 border=15? bordercolor=red? TR??? TD colspan=4 品牌商城/TD? /TR ? TR??? TD colspan=2 笔记本电脑/TD??? TD colspan=2 办公设备、文具、耗材/TD? /TR? TR??? TD 惠普/TD??? TD 华硕/TD??? TD 打印机/TD??? TD 刻录盘/TD? /TR/TABLE/BODY/HTML
示例1运行效果如图2所示。
图2 表格的尺寸和边框
2.如何设置背景
(1) 表格背景
表格背景包括表格的背景颜色和背景图像的设置,表格的背景颜色属性bgcolor是针对整个表格的,表格的背景图像属性background也是针对整个表格的,背景图像会令表格更加美观、更加活泼生动。
语法:
设置表格背景基本语法:
TABLE bgcolor=整个表格的背景颜色 background=整个表格的背景地址??? ……/TABLE
(2) 行背景色
不仅可以对表格整体设置背景,还可以对单独一行设置背景色,行的bgcolor颜色可以覆盖TABLE的bgcolor或background属性。
语法:
设置行的背景色基本语法:
TR bgcolor=行的背景颜色……/TR
(3) 单元格背景色
不仅可以对表格中行设置背景色,还可以对表格中每一个单元格设置背景色,单元格的bgcolor颜色可以覆盖行的bgcolor属性。
语法:
设置单元格的背景色基本语法:
TD?bgcolor=单元格的背景颜色单元格内容/TD
示例2:
HTMLHEADTITLE表格的美化/TITLE/HEADBODYTABLE width=360 height=120 border=2 background=images/type_back.jpg ? TR??? TD colspan=6nbsp;/TD? /TR? TR bgcolor=#EBEFFF??? TD colspan=3 笔记本电脑/TD??? TD colspan=3? bgcolor=yellow办公设备、文具、耗材/TD? /TR? TR bgcolor=#EBEFFF??? TD IBM/TD??? TD 惠普/TD??? TD 华硕/TD??? TD 打印机/TD??? TD 刻录盘/TD??? TD 墨盒/TD? /TR/TABLE/BODY/HTML
示例2运行效果如图3所示。
图3 背景色的设置
3.如何设置对齐方式
为了美观大方,表格中的数据一般需要设置对齐方式。设置表格、行或列的对齐方式,修改align属性为right(右对齐)、center(居中)或Ieft(左对齐)
您可能关注的文档
- html编译器使用.doc
- html标记必读.doc
- html标记的一般格式.doc
- Html标签大全 高仕豊.doc
- HTML标签及语法(一).doc
- html标签及属性大.doc
- html标签及属性大全.doc
- html标签特效代码大全.doc
- html标签中id和name的区别.doc
- html标签属性大全(完美版).doc
- 2025年休闲食品健康化转型下的市场拓展策略与渠道创新报告[001].docx
- 农村电商服务站品牌建设:2025年运营模式创新与品牌传播报告.docx
- 2025年互联网金融平台合规整改与金融科技监管的合规监督与可持续发展策略.docx
- 2025年短视频平台内容监管与平台社会责任关系研究报告.docx
- 农产品溯源体系在农产品质量安全监管中的信用体系构建与实施策略研究.docx
- 2025年工业互联网平台数据备份与恢复策略创新方案探讨.docx
- 2025年线上法律咨询服务平台法律咨询行业竞争策略研究.docx
- 农业产业集群农产品流通体系构建与发展机制报告.docx
- 智能制造领航者:2025年3D打印技术在规模生产中的应用效果分析报告[001].docx
- 农村金融服务创新与农村金融消费者权益保护法规实施效果分析报告.docx
文档评论(0)