第05章 网页表格设计

5.2 控制表格的大小和边框的宽度
5.2.1 设置表格的宽度和高度 5.2.2 设置表格边框的宽度
5.2.1 设置表格的宽度和高度
通常，表格及其单元格的大小会自动扩展，以适应其中 包含的数据。 （1）通过在<table>标签中指定width和height样式来 控制整个表格的大小。 （2）也可以在每个<td>标签里指定width和height样式 来控制每个单元格的大小。
5.3.3 控制表格单元格的上下对齐
除了可以在水平方向控制表格中的文本在水平方向的对 齐方式，还可以通过设置<td>或者<tr>标签的valign属 性在垂直方向控制表格文本的对齐方式。 （1）valign属性可以设置为“top”、“middle”，或者 “bottom”，分别表示竖直靠上、竖直居中和竖直靠下对 齐 ，默认是竖直居中对齐的。 （2）如果同一行中所有的单元格文本指定相同的对齐方式 时，并不需要为该行中的所有<td>标签分别指定valign 属性，而只是为该行的<tr>标签设置valign属性即可
第5章 网页表格设计
5.1 表格的基本结构 5.2 控制表格的大小和边框的宽度 5.3 设置表格及表格单元格的对齐方式 5.4 合并单元格 5.5 用cellpadding属性和cellspacing属性 设定距离 5.6 为表格添加视觉效果 5.7 表格的按行分组显示 高手私房菜
因为单元格中的文本默认是左对齐的，但是可以通过为 每一个<td>或者<th>标签设置align属性来使单元格中 的文本居中对齐或者右对齐。 同<table>标签的align属性一样，<td>标签的align 属性也有三种值：left、center和right，分别控制单元格 中的文本左对齐、居中对齐和右对齐。 另外，当我们需要同一行中的所有文本都需要用同一种 对齐方式显示时，我们只需要为该行的<tr>标签设置 align属性即可，不需要为同一行中的所有<td>标签设置 align属性设置值。
5.4.2 用rowspan属性上下合并单 元格
除了左右相邻的单元格可以合并外，上下相邻的单元格 也可以合并，这是通过为某一列的<td>标签指rowspan 属性及值来实现的。类似colspan，rowspan属性的值为 要上下合并单元格的数量。
5.5 用cellpadding属性和 cellspacing属性设定距离
通过在<table>标签中指定cellspacing、 cellpadding属性，可以分别控制相邻单元格之间的距离 及每一个单元格内文本等内容距离该单元格边线的距离。 （1）所谓内容到单元格边线距离，是指单元格内容周围与 单元格四边的的间隔量，我们可以认为这是单元格和其它 的内容缓冲间隔。 （2）所谓单元格间距，是指表格中单元格间的间隔量，单 元格间距好比两间屋子间墙壁的厚度。
5.6 为表格添加视觉效果2 设置表格和单元格的背景图像
5.6.1 设置表格和单元格的背景颜 色
设置表格的背景颜色是通过有关表格标签的bgcolor属 性来完成的，如果指定为table标签，则对表格整体 <table>应用背景颜色；如果指定为<tr>标签，则对所有 指定的一行应用背景颜色；如果指定为<th>或者<td>标 签，则对该单元格应用背景颜色。
5.2.2 设置表格边框的宽度
通过为table元素设置border属性可以为表格定义边框 粗细，默认情况下不定义table元素的border属性，那么 表格就不会带边框。
5.3 设置表格及表格单元格的对齐方 式
5.3.1 控制表格在网页中的对齐方式 5.3.2 控制表格单元格的水平对齐 5.3.3 控制表格单元格的上下对齐
5.1 表格的基本结构
建立一个基本的表格，必须包含一<table></table> 标签、一组<tr></tr>标签以及一组<td></td>标签， 这也是最简单的单元格表格。 （1）<table></table>标签的作用是定义一个表格。 （2）<tr></tr>标记的作用是定义表格中的一行。 （3）<td></td>标记的作用是定义一个单元格。
注意：在 HTML 4.01 中，table 元素的 "bgcolor" 属性 是不被赞成使用的。
5.6.2 设置表格和单元格的背景图 像
除了可以使用bgcolor属性为表格指定背景颜色，我们 还可以使用background属性为表格指定背景图像。如果 指定为table标签，则对表格整体<table>应用背景图像； 如果指定为<tr>标签，则对所有指定的一行应用背景图像 ；如果指定为<th>或者<td>标签，则对该单元格应用背 景图像。
5.7 表格的按行分组显示
在网页设计中，我们可以通过使用<table>、<tr>、 <td>标签构建结果最简单的表格，另外也可以通过使用 <thead>、<tbody>、<tfoot>为表格在结构上划分为 表头、主体内容、脚注。 （1）<thead>、<tbody>、<tfoot>只是使表格在结构 上更加清晰，浏览器显示时并不添加任何特别显示效。 （2）在呈现时，每个thead,tfoot和tbody元素必须包含 一个或多个行。并且，thead,tfoot和tbody元素必须包括 相同数量的列。 （3）方便添加样式。
高手私房菜
技巧1：禁止单元格内的文本自动换行 技巧2：用colspan 和rowspan 属性上下、 左右合并单元格
5.4 合并单元格
5.4.1 用colspan属性左右合并单元格 5.4.2 用rowspan属性上下合并单元格
5.4.1 用colspan属性左右合并单元 格
所谓左右单元格合并即为把原来相邻的两个或者多个单 元格合并成一个单元格。通过为<td>标签设置colspan属 性以实现该效果，其中colspan属性的值为要合并单元格 的数量。
5.3.1 控制表格在网页中的对齐方式
在默认情况下，表格在网页的左侧对齐，但许多人喜欢 将对齐方式改为网页居中对齐。使用table元素的align属 性，也可以轻松完成任务。 align属性可取值包括left、center和right, 分别表示 左侧对齐，居中对齐和靠右对齐。
5.3.2 控制表格单元格的水平对齐