下载掌阅APP，畅读海量书库
立即打开
表格就像一个小的世界，一个有机的整体。在这个整体中，组织了很多数据，包括文字、图片等，为了更好地表现表格的组织能力，本节学习表格的整体控制，相信读者会对表格刮目相看的。
和前面学习的HTML元素一样，表格标签<table></table>有着丰富多样的属性，对这些属性作一定的设置，可以改变整个表格的表现。在D:\web\目录下创建网页文件，命名为table4.htm。先学习表格的width和height属性，用于控制表格的宽度和高度，单位默认为像素，也可以用百分比来表示。
表格的宽度和高度的值一般采用数值，即使用像素为默认单位，这样可以固定表格的整体大小。只有在表格需要自动适应大小时，才考虑使用百分比作为宽度和高度的单位。为了更具体地表现两种方法的区别与作用，编写table4.htm代码如代码7.3所示。
代码7.3 表格整体设置：table4.htm
代码7.3中，笔者制作了两个表格，方便读者进行对比。两个表格的高度属性即height都为50像素，第一个表格的宽度属性width为300像素，第二个表格的宽度属性width为100%。在浏览器地址栏输入http://localhost/table4.htm，浏览效果如图7.11所示。
图7.11 表格整体设置
从table4.htm中，很明显地可以看到第一个表格的宽度是固定的，第二个表格的宽度随着浏览器的宽度而改变，始终保持浏览器宽度的100%。读者可以调整浏览器的宽度观察其异同，以体会在不同场合如何合理设置表格的宽度和高度。
类似于文字段落，表格也有水平对齐属性，并且也是align属性。读者经过一段时间的学习，应该发现HTML元素的很多属性是相同的，其作用也类似。表格的align属性也有left、center和right这3个值，分别代表左对齐、居中对齐和右对齐。修改table4.htm，编写代码如代码7.4所示。
代码7.4 表格整体对齐设置：table4.htm
笔者把第一个表格居中对齐，第二个表格的宽度也固定为300像素且右对齐。在浏览器地址栏输入http://localhost/table4.htm，浏览效果如图7.12所示。
图7.12 表格整体对齐设置
在表格布局中，为了适应所有浏览者，经常用到表格居中对齐。
边框是HTML元素的一个比较重要的属性，例如，前面学习过的图片边框。表格通过border属性设置其边框的粗细，单位默认为像素。与其他HTML元素不同，表格不仅可以设置边框粗细，还可以设置边框的颜色、样式等。
表格的bordercolor属性用于设置边框的单一颜色。默认情况下，表格的边框是立体浮雕状的，有高亮区和暗调区，可通过bordercolorlight属性设置高亮区颜色，而bordercolordark属性设置暗调区颜色。在D:\web\目录下创建网页文件，命名为table_border.htm，编写代码如代码7.5所示。
代码7.5 表格边框设置：table_border.htm
设置表格边框粗细为2像素。在浏览器地址栏输入http://localhost/table_border.htm，浏览效果如图7.13所示。
图7.13 表格边框样式设置
从图7.13可看出，所有的单元格都有边框显示。在很多应用中，只需要表格外边框，不需要单元格之间的边框，可以设置rules属性解决。表格的rules属性常用的值有cols、rows和none。在D:\web\目录下创建网页文件，命名为table_border2.htm，编写代码如代码7.6所示。
代码7.6 表格边框设置：table_border2.htm
通过3个表格取rules属性的3个值，可以比较表格边框的作用范围。在浏览器地址栏输入http://localhost/table_border2.htm，浏览效果如图7.14所示。
图7.14 表格边框范围设置
在后面CSS的学习中，对边框将有更加丰富的样式设计。
说明 ：表格的rules属性默认值为all，即显示所有边框。
间距的概念在页面整体设置中学习过，表格中的单元格同样有间距设置。可以把表格中的单元格看做一个个的小盒子，而单元格中填充的数据（文字、图片等）看做小盒子里存放的物品。表格的间距设置分为cellspacing属性和cellpadding属性，cellspacing属性代表小盒子与小盒子之间的间距，cellpadding属性代表小盒子与所存物品之间的间距。换句话讲，cellspacing属性代表表格中单元格的外边距，cellpadding属性代表表格中单元格的内边距，也叫填充。其关系如图7.15所示。
图7.15 表格的间距类型展示
利用间距的设置，可以灵活地控制表格外观。在D:\web\目录下创建网页文件，命名为table_cell.htm，编写代码如代码7.7所示。
代码7.7 表格间距设置：table_cell.htm
边距值的默认单位也是像素，代码7.7中3个表格分别使用了3种极端情况的间距。在表格布局网页时，为了消除间距带来的影响，习惯上设置cellspacing属性和cellpadding属性都为0。在浏览器地址栏输入http://localhost/table_cell.htm，浏览效果如图7.16所示。
结合表格的间距和边框的知识，可以制作不同效果的表格，读者自己可以发挥自己的创意。这里举个小例子。在D:\web\目录下创建网页文件，命名为table_border3.htm，编写代码如代码7.8所示。
图7.16 表格间距设置
代码7.8 表格综合制作：table_border3.htm
在浏览器地址栏输入http://localhost/table_border3.htm，浏览效果如图7.17所示。
图7.17 表格综合制作
类似于页面整体<body>标签，表格同样有背景色和背景图片的设置。表格的bgcolor属性用于设置背景色，background属性用于设置背景图片的路径。除了表格整体可以设置外，单元格也可以设置背景颜色和背景图片，并且优先于表格整体的背景显示。
注意 ：表格的行也可以单独设置背景颜色。
在D:\web\目录下创建img目录，并在img目录下放入两个不同的jpg格式的图片文件，分别命名为bg.jpg和bg2.jpg。在D:\web\目录下创建网页文件，命名为table_bg.htm，编写代码如代码7.9所示。
代码7.9 表格背景设置：table_bg.htm
在浏览器地址栏输入http://localhost/table_bg.htm，浏览效果如图7.18所示。
图7.18 表格背景设置