HTML表格的美化修饰.docxVIP

HTML表格的美化修饰 不知道大家发现没有？这之前创建的表格都非常简陋、 简单、难看。如何创建一 个布局协调、色调统一、美观、大方的表格？这就涉及到对表格的美化修饰。 本节单词记忆：属性 l.cells pad ng 2.cell padd ing 网页学习网提示：html语言非常简单，不需要逻辑理解，而绝大部分朋友觉得 它难以掌握，90%勺原因在于英语单词不过关，所以每节记忆几个单词是非常有 必要的。 、什么是表格的美化修饰 表格的美化修饰就是从多方面对表格进行美化修饰，使表格看上去更漂亮、更美 观、更合理。对表格进行美化修饰时，主要从以下几个方面进行： 表格的高度、宽度和边框。 表格、行、列的背景。 表格、行、列的对齐方式。 表格的填充、间距属性。 如图1所示就是经过美化修饰之后的表格。 如划 whtfi Q - ■] i： : , ■? 4 * 、二* 时莎nil.不心n _ . 3 M ME aw I im n ?晋丨举悄? tTH粒丨斟!P4 1 im n ?晋丨举悄? tTH粒丨斟!P4 1 J *孑对 ?FAjt 连皓的宽損 图1美化修饰过的表格 、如何对表格进行美化修饰 如何设置表格的尺寸和边框 如果不指定表格的高度和宽度，浏览器就会根据表格内容的多少自动调整高度和 宽度。如果不指定表格的边框的宽度（border属性），则浏览器将不显示表格边 框。若我们既想设置表格的高度和宽度，又想设置表格边框的宽度，那么就得设 置表格的高度、宽度和边框属性。 语法: 设置表格的宽度、高度和边框的基本语法： TABLE width= 表格宽度 height= 表格高度 border= 表格边框宽度 /TABLE 其中，表格的宽度和高度可以用像素来表示， 也可以用百分比 口相比的大小比例）来表示。表格边框宽度只能用像素来表示。 与浏览器当前窗 WANGYEXX.COM 例如： l- ABLE width=”200”height -”100”表示一个宽为 100像素的表格。vTABLE width=50% height=25%S示一个宽为当前浏览器窗口 宽度的 50%，高为当前 浏览器窗口高度的 25%的表格。 200 像素，高为 示例 1: HTML HEAD vTITLE^格的高度、宽度和边框/TITLE /HEAD BODY TABLE width=400 height=200 border=15 bordercolor=red TR TD colspan=4 /TR TR TD colspan=2 TD colspan=2 品牌商城 /TD 笔记本电脑 /TD 办公设备、文具、耗材 /TD /TR TR TD 惠普 /TD TD 华硕 /TD TD 打印机 /TD TD 刻录盘v/TD /TR /TABLE /BODY /HTML 示例 1 运行效果如图 2 所示。 ■Si牌粛域 i笔记本电临 沁设4文具、料;材 障普!辛咳 § L d 1 i 图2表格的尺寸和边框 小经验：表格中border属性只能影响表格四周的边框宽度，而不能影响表格内 单兀格之间边框尺寸。过宽的边框会影响表格的整体美观，因此一般边框宽度设 置不应超过5像素。 如何设置背景 表格背景 表格背景包括表格的背景颜色和背景图像的设置，表格的背景颜色属性bgcolor 是针对整个表格的，表格的背景图像属性 background也是针对整个表格的，背 景图像会令表格 更加美观、更加活泼生动。 语法: 设置表格背景基本语法: VTABLE bgcolor=整个表格的背景颜色background=整个表格的背景地址 /TABLE 行背景色 不仅可以对表格整体设置背景，还可以对单独一行设置背景色，行的 bgcolor 颜色可以覆盖vTABLE的 bgcolor或background属性。 语法: 设置行的背景色基本语法: VTR bgcolor=行的背景颜色,,/TR 单元格背景色 不仅可以对表格中行设置背景色，还可以对表格中每一个单元格设置背景色， 单 元格的bgcolor颜色可以覆盖行的bgcolor属性。 语法: 设置单元格的背景色基本语法: VTD bgcolor=单元格的背景颜色 单元格内容v/TD 示例2: HTML HEAD vTITLE^格的美化 v/TITLE /HEAD BODY TABLE width=360 height=120 border=2 backgro un d=images/t yp e_back.j pg TR TD cols pan=6 n bs p; v/TD /TR TR bgcolor=#EBEFFF TD cols pan=3 笔记本电脑 v/TD TD cols pan=3 bgcolor=