第8章 表格制作

8.2.1 制作普通表格
• • • • • • • • • • • • • • • • 表格属于结构性标签，使用的是<table>标签。一个最简单的表格也必须具备表 头和行、列信息。它的代码如下所示： <table > <tr> <th>Head1</th> <th>Head2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> … </table>
8.2.3 合并单元格
• 合并同一行的单元格时，要用到 colsplan 属性。 在需要修改的行中，先删除多余的单元格——注 意，这是非常重要的一步，如果删错了单元格， 很可能表格最后会变得面目全非——然后，再定 义需要合并的单元格。 • 合并同一排的单元格时，要用到 rowspan 属性。 书中的代码8-2即为合并单元格的一个范例，这里 不再叙述。
第8章 表格
• 在CSS出现之前，表格是最流行的页面布局方式。那时， 表格指的是一种页面布局方法，而不仅仅指单纯的表 格。但现在，谈论Web设计时再提到“表格”，指的就 是单纯的由单元格组成的表格了。 • 虽然现在表格的使用率大不如以前，但却仍是页面设 计中不可或缺的一个元素。在一些服务性网站中，经 常要使用表格传递信息和方便用户下载，如电信公司 的话费单等。本章的主要知识点有： –制作表格 –修饰表格的单元格 –拆分与合并表格 –使用CSS样式表来表现表格 –表格的实际应用
•
8.6 小结
• 本章介绍了表格的用法，可以发现，设置表格的方法不难，但是表格 缺少一些固定的规律，编辑的方式多而灵活，由于不同浏览器支持的 效果大不相同，所以，表格一直是比较难控制的一样东西，好在现在 设计者不用再考虑用表格来布局页面了，虽然偶然也会使用，但是更 多的时候，表格只是用来制作表格。这一章，主要的知识点有， 构建表格的方式。 控制表格的行高宽度，以及单元格。 使用<caption>设置表格的标题。 为了更方便应用CSS，将表格拆分为表头、表尾和表体。 合并单元格，改变单元格边框样式。 控制表格的列。 编辑修饰单元格中的内容。 通过实例学习如何综合运用CSS样式表来表现一个表格。 表格的用途很广，页面中最常见的内容之一。
8.2.2 表格的基本属性
• 表格的基本属性是指表格的行、列和单元格，但 并不是每个表格的单元格大小都是统一的，所以 需要设计者通过一些属性参数来修改表格的样子， 让它们可以更更多样化。这些属性参数包括行高、 宽度等。 • 1．行高height属性 • 2．宽度width属性 • 3．单元格大小属性height和width
• • •
8.4 编辑单元格中的内容
• 表格是由许多个单元格组成，而这些单元格中又 可以放入多种类型的页面内容，诸如文本、图像 或者超链接等，甚至可以再放入新的表格。这种 表格的嵌套曾经是非常流行的布局页面的方法， 只是这种方法太过繁琐。通过样式表来修饰表格 中的内容就容易多了。
8.4.1 单元格中文本与单元格大小
8.2.4 表格的标题
• <caption>标签是用来给表格添加标题的。这个标 签需要置于<table>标签中，具体写法如下：
<table> <caption>表格的名字</caption> …
• <caption>表示标签添加的标题，默认情况下将位 于表格上方居中的位置，且会根据表格的宽度自 行调整位置。
8.3 修饰单元格
• 在了解了表格的构建原理后，进一步需要了解的 就是如何使设计的表格更美观一些。 • 表格是由一个个单元格组成的，美化表格的要点 就在于美化这些单元格，而最好的方法还是使用 样式表。 • 设计者可以通过设置一些属性来彻底改变表格的 样式。rder属性，它不仅仅能修改边框的粗细，还 能修改边框的颜色和样式。在默认情况下，边框的值为0，即没有 边框。边框的颜色和文本的颜色在默认情况下是相同的。 一个标准的边框定义在样式表中可以写成这样： border:2px solid red; 这里定义了边框的各项属性：宽度是2px，红色，实线。 在表格中如何应用多样化的边框样式，可参见书中的代码8-4，这 里不再叙述，图8.9为应用不同边框样式后的表格。
• •
•
8.4.2 修饰单元格中的内容
• • • • • • • 通过CSS定义单元格中的文本时，可以专门地指定给一组行，某一列，或者是整个表格，比如文本 颜色、背景、背景图片等。例如： td { text-align:center; font:.7em 幼圆; color:#334542; background-color:#ddd; } 样式表中可放入的属性有很多，也有一些是专门的属于表格的样式表，如表8.1所示，有兴趣的读 者可以尝试一下效果。
8.2.6 设置表格的列
• 虽然HTML页面中表格是按照一行一行这样的概念建立起来的。但 可以使用<colgroup>定义表格列的分组。这个标签常和其他2个标 签配合使用，一个是<col>标签，一个是<span>标签。<col>标签 表示为表格中一个或多个列定义属性值，是仅包含属性的空元素， 只能在表格或 colgroup 中使用此元素。如图8.7是使用 <colgroup>和<col>定义表格的列，图8.8是使用<colgroup>和 <span>定义表格的列。
• 单元格的大小会随着格内文本的长度自行缩放。虽然通过数值可以固定单 元格的大小，但是如果文本的长度超过所设置的单元格长度，那么依然会 根据文本的长度来做决定。使用“table-layout”属性可以限制单元格随 文本长度而改变，如下代码所示。 {table-layout : fixed;} 这样带来的好处是浏览器可以更快地渲染出你的表格。因为当浏览器解析 到表格的第一行时，就能确定所有单元格的大小。使用时，需要在代码中 给出确定的长度数值，如第一行的td或者th，如代码8-6所示为如何限制 单元格的大小。 【本节示例参考：资料光盘\第8章\8-6 限制单元格大小.html】。
8.1 理解页面中的表格
• 表格看上去虽然只是一个个的小格，但是，在HTML中制作 表格，表格涉及的属性很多。人们在表述表格的时候，不 能简单地说“某某表格左上角的那个格子”，而是必须通 过指定具体的行和列来定位某个单元格。
8.2 普通表格的应用
• 普通表格的使用频率很高，如课程表、出勤表、 价目表等。对于某些内容，如果只是简单的文本 信息，而且仅仅希望这些信息横排或竖排，那么 表格是一种比较好的解决方法。
• • • • • • • • •
8.2.5 拆分表格
• 为了便于给表格应用CSS样式表，有时候不希望代 码中一直都是<tr>标签，这时，可以使用thead、 tfoot、tbody来拆分表格。 • thead定义了表格的首行。 • tfoot定义了表格的尾行。 • 这里有意思的是，三个中无论你想使用哪一个， 最终全部元素都要被用上。而且它们出现的次序 是thead、tfoot、tbody。
8.5 案例：制作球赛积分表
• 足球是种非常让人疯狂的体育运动。每当大赛来临，都会涌现一大批狂热 的球迷。接下来我们将介绍使用表格制作球赛积分表的实例。制作完毕的 球赛积分表如图8.12所示，代码则参见书中的代码8-7。 你可以把这个球赛积分表放在你的博客或是网站上，借助它和其他球迷朋 友们一起享受球迷的快乐生活。
•
•
8.3.2 合并相邻单元格
• <table>标签制定的表格，会在所有的单元格之外，再框上一个 “四边形”，而每一个单元格又是独立存在的。所以单元格和单 元格之间总像是有一条缝隙，有一种方式可以消除这条缝隙，即 使用“边框挤压”的属性，如下代码所示。 { border-collapse: collapse;} 如果将它运用于表格中，如代码8-5所示。结果如图8.10所示。 【本节示例参考：资料光盘\第8章\8-5 合并单元格之间的边 框.html】。