HTML表格的美化修饰.docVIP

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（左对齐）