首页 > 代码库 > 2.3 表格的美化修饰

2.3 表格的美化修饰

2024-07-08 20:12:00   224人阅读

不知道大家发现没有？这之前创建的表格都非常简陋、简单、难看。如何创建一个布局协调、色调统一、美观、大方的表格？这就涉及到对表格的美化修饰。

本节单词记忆：属性 1.cellspacing 2.cellpadding

网页学习网提示：html语言非常简单，不需要逻辑理解，而绝大部分朋友觉得它难以掌握，90%的原因在于英语单词不过关，所以每节记忆几个单词是非常有必要的。

一、什么是表格的美化修饰

表格的美化修饰就是从多方面对表格进行美化修饰，使表格看上去更漂亮、更美观、更合理。对表格进行美化修饰时，主要从以下几个方面进行：

● 表格的高度、宽度和边框。

● 表格、行、列的背景。

● 表格、行、列的对齐方式。

● 表格的填充、间距属性。

如图1所示就是经过美化修饰之后的表格。

图1 美化修饰后的表格
图1 美化修饰过的表格

二、如何对表格进行美化修饰

1.如何设置表格的尺寸和边框

如果不指定表格的高度和宽度，浏览器就会根据表格内容的多少自动调整高度和宽度。如果不指定表格的边框的宽度(border属性)，则浏览器将不显示表格边框。若我们既想设置表格的高度和宽度，又想设置表格边框的宽度，那么就得设置表格的高度、宽度和边框属性。

语法:

设置表格的宽度、高度和边框的基本语法：

<TABLE width="表格宽度" height="表格高度" border="表格边框宽度">
    ……
</TABLE>

其中，表格的宽度和高度可以用像素来表示，也可以用百分比（与浏览器当前窗口相比的大小比例）来表示。表格边框宽度只能用像素来表示。

例如：<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所示。

图1 表格的尺寸和边框
图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">&nbsp;</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 背景色的设置

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">&nbsp;</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 表格的填充和间距属性
图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 表格的填充和间距示例说明
图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">&nbsp;</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 表格的填充和间距示例
图6 表格的填充和间距示例

本节作业：

制作如下图网页。

html基础 表格的美化 作业
 

注意事项：

1.首先分清楚此题是几行几列的表格，哪些单元格是合并的。

2.整个第一行是一张背景图片，可自选一张。

3.灵活使用cellspacing，cellpadding，bgcolor。

网页学习网提示：光看教程是无法让你掌握HTML知识，最好是完成作业后才进入下一次教程，动起手来吧！

点击下载第二章案例及作业资源 返回《HTML入门经典》教程列表

编辑：网页学习网
本文地址:http://www.lodidance.com/html/jc/501.html


联系
我们