DW网页设计表格参考幻灯片.pptVIP

第 8 章 表格 ? 没有 CSS 之前，表格是最流行的布局页面的方式。它表示 一种布局页面的方法，而不仅仅只是指单元格组成的表格， 不过那已经是很久以前的事情了。现在谈论 Web 设计的时 候，再说到“表格”，那么它就是一个普通的由单元格组 成的表格。 1 2020/3/30 8.1 理解页面中的表格 ? 表格看上去虽然只是一个一个的小格子组成的，但是，谈 及在 HTML 中制作表格，远远不是看上去的那么直接。表 格涉及的属性很多，因为人们在表述表格的时候，不是说 “某某表格左上角的那个格子”，而是通过描述某一行和 某一列来定位某个单元格的位置，这里就已经描述了 3 个 属性了。 2 2020/3/30 8.2 普通表格的应用 这种表格常见于类似于课程表、出勤表、或者价目表这种形 式的表格，被使用的频率很高。因此，如果只是针对于简单 的文本内容，仅仅是希望这些内容横排或者竖排，那么表格 是一个比较好的方法。 3 2020/3/30 8.2.1 制作普通表格 ? 表格属于结构性标签，使用 table 标签来进行创建。一个 最简单的表格也需要具备表头、行、列的信息。所以它的 代码是这样的。 4 2020/3/30 8.2.1 制作普通表格 ? table ? tr ? thHead1/th ? thHead2/th ? /tr ? tr ? tdrow 1, cell 1/td ? tdrow 1, cell 2/td ? /tr ? tr ? tdrow 2, cell 1/td ? tdrow 2, cell 2/td ? /tr ? /table 5 2020/3/30 8.2.1 制作普通表格 ? 这样看代码真的很难想象这个表格是什么样子，如果用表 格的形式去表达这段代码，则下图 8 所示。 6 2020/3/30 8.2.1 制作普通表格 ? 当然，表格的代码也可能写成如下代码。 ? table ? tr ? thHead1/th ? tdrow1 ， cell2/th ? /tr ? tr ? thHead2/th ? tdrow 2, cell 2/td ? /tr ? tr ? thHead3/th ? tdrow 3, cell 2/td ? /tr ? /table 7 2020/3/30 8.2.1 制作普通表格 ? 这是以列为表头的表格，其结果如下图所示。 8 2020/3/30 8.2.1 制作普通表格 ? 或者也可以写成如下代码，将第一组的 tr 标签内的对象 全部定义为表头。此后每一组 tr 标签内的第一个标签定 义为 th 标签，即之后的每一行的第一个单元格表示为表 头。这样就是分别以行和列的第一个单元格作为表头。 9 2020/3/30 8.2.1 制作普通表格 ? table ? tr ? thHead1/th ? thHEAD1/th ? /tr ? tr ? thHead2/th ? tdrow 1, cell 2/td ? /tr ? tr ? thHead3/th ? tdrow23, cell 2/td ? /tr ? /table 10 2020/3/30 8.2.2 表格的基本属性 ? 表格的基本属性就是指表格的行、列和单元格，但并不是 每一个表格的单元格都是统一大小，所以这就需要设计者 通过一些属性参数去修改表格的样子，让它们可以变得更 多样性一些。 11 2020/3/30 1 ．行高 HEIGHT 属性 ? 默认情况下，一个空白表格的单元格是平均分配的，所以 如果需要自定义行高，可以使用 height 属性来设置每一行 单元格的行高。可以使用 CSS 样式表先定义 table ，然后定 义 th 或者 tr 。若想改变表格的表头行高，则样式表应该写 为： ? style type= ext/css ? table {height:185px; ? } ? table th {height:32px; ? } ? /style 12 2020/3/30 1 ．行高 HEIGHT 属性 ? 当使用这个 CSS 时，结果如下图所示。 13 2020/3/30 2 ．宽度 WIDTH 属性 ? 如果只是需要修改表格列的宽度，则只使用 width 属性就 可以了。但是不同于行高的是，表格中的宽度是针对整个 表格或者每一个单元格的，所以像下面这样的写法是错误 的。 ? table {width:400px; ? } ? table th {width:100px; ? } 14 2020/3/30 3 ．单元格大小属性 HEIGHT 和 WIDTH ? 单元格的大小其实就是由高和宽两个因素组成的。所以如 果要准确定位一个单元格的具体大小，这两个因素是缺一 不可的，必须