HTML表格的美化修饰
HTML表格的美化修饰
不知道大家发现没有？这之前创建的表格都非常简陋、简单、难看。如何创建一个布局协调、调统一、美观、大方的表格？这就涉及到对表格的美化修饰。
本节单词记忆：属性 1.llpadding
网页学习网提示：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:
<HTML>
<HEAD>
<TITLE>表格的高度、宽度和边框</TITLE>
</HEAD>
<BODY>
<TABLE 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 表格的尺寸和边框
小经验：表格中border属性只能影响表格四周的边框宽度，而不能影响表格内单元格之间边框尺寸。过宽的边框会影响表格的整体美观，因此一般边框宽度设置不应超过5像素。
2.如何设置背景
(1) 表格背景
表格背景包括表格的背景颜和背景图像的设置，表格的背景颜属性bgcolor是针对整个表格的，表格的背景图像属性background也是针对整个表格的，背景图像会令表格
更加美观、更加活泼生动。
语法:
设置表格背景基本语法：
<TABLE bgcolor="整个表格的背景颜" background="整个表格的背景地址">
    ……
</TABLE>
(2) 行背景
不仅可以对表格整体设置背景，还可以对单独一行设置背景，行的bgcolor颜可以覆盖<
TABLE>的bgcolor或background电脑怎么刻盘属性。
语法:
设置行的背景基本语法：
<TR bgcolor="行的背景颜">……</TR>
(3) 单元格背景
不仅可以对表格中行设置背景，还可以对表格中每一个单元格设置背景，单元格的bgcolor颜可以覆盖行的bgcolor属性。
语法:
设置单元格的背景基本语法：
<TD bgcolor="单元格的背景颜">单元格内容</TD>
示例2:
<HTML>
<HEAD>
<TITLE>表格的美化</TITLE>
</HEAD>
<BODY>
<TABLE width="360" height="120" border="2" background="images/type_back.jpg" >
  <TR>
    <TD colspan="6"> </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（左对齐）就可以了，默认为“左对齐”。
修改示例2，设置“笔记本电脑”列和“办公设备、文具、耗材”列居中显示，代码如示例3所示。
示例3:
<HTML>
<HEAD>
<TITLE>表格的对齐方式</TITLE>
</HEAD>
<BODY>
<TABLE width="350" height="100" border="2" background="images/type_back.jpg" >
  <TR>
    <TD colspan="4"> </TD>
  </TR>
  <TR bgcolor="#EBEFFF">
    <TD colspan="2" align="center" >笔记本电脑</TD>
    <TD colspan="2" align="center" bgcolor="yellow" >办公设备、文具、耗材</TD>
  </TR>
  <TR bgcolor="#EBEFFF">
    <TD >惠普</TD>
    <TD >华硕</TD>
    <TD >打印机</TD>
    <TD >刻录盘</TD>
  </TR>
</TABLE>
</BODY>
</HTML>
示例3运行效果如图4所示。

图4 单元格的对齐方式
4.如何设置填充、间距属性
如图4所示，由于这张表格既没有设置高度，又没有设置宽度，也没有设置填充(cellpadding)和间距(cellspacing)属性，所以 非常难看。如果你既不想设置表格的高度，也不想设置表格的宽度，但还要使表格内框宽度(cellspacing)变宽，使文字与边框距离 (cellpadding)拉大，该怎么办？其实很简单，可以通过cellspacing和cellpadding属性进行调整实现。
下面我们就先了解一下cellspacing和cellpadding是何方神圣？请你参看图5，图5中的“内容”相当于图4中的“笔记本电脑”，其他部分类同。

图5 表格的填充和间距属性
内框宽度(cellspacing)和文字与边框的距离(cellpadding)均以像素为单位，下面示例4就演示了这两个属性的使用方法。
示例4:
<HTML>
<HEAD>
<TITLE>表格的内框宽度和填充属性</TITLE>
</HEAD>
<BODY>
<TABLE border="20"  cellpadding="30" cellspacing="40" 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>
示例4运行效果如图6所示。

图6 表格的填充和间距示例说明
图5所示的表格如此难看、拥挤，相信大家还记忆犹新！下面我们就运用刚才所学的cellspacing和cellpadding属性，对其进行改造和调整，使其达到美观、大方的效果。
示例5:
<HTML>
<HEAD>
<TITLE>表格的美化</TITLE>
</HEAD>
<BODY>
<TABLE border="1" background="images/type_back.jpg" cellspacing="5" cellpadding="10"  >
  <TR>
    <TD colspan="6"> </TD>
  </TR>
  <TR bgcolor="#EBEFFF">
    <TD colspan="3" align="center" >笔记本电脑</TD>
    <TD colspan="3" align="center" >办公设备、文具、耗材</TD>
  </TR>
  <TR bgcolor="#EBEFFF">
    <TD >IBM</TD>
    <TD >惠普</TD>
    <TD >华硕</TD>
    <TD >打印机</TD>
    <TD >刻录盘</TD>
    <TD >墨盒</TD>
  </TR>
</TABLE>
</BODY>
</HTML>
示例5运行效果如图6所示。

图6 表格的填充和间距示例
本节作业：
制作如下图网页。

 
注意事项：
1.首先分清楚此题是几行几列的表格，哪些单元格是合并的。
2.整个第一行是一张背景图片，可自选一张。
3.灵活使用cellspacing，cellpadding，bgcolor。
网页学习网提示：光看教程是无法让你掌握HTML知识，最好是完成作业后才进入下一次教程，动起手来吧！
点击下载第二章案例及作业资源 返回《HTML入门经典》教程列表
转载请注明本文地址:www.wangyexx/html/jc/501.html

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。