2024年-DW网页设计-第章表格学习课件

第8章表格没有CSS之前，表格是最流行的布局页面的方式。它表示一种布局页面的方法，而不仅仅只是指单元格组成的表格，不过那已经是很久以前的事情了。现在谈论Web设计的时候，再说到“表格”，那么它就是一个普通的由单元格组成的表格。12024/5/158.1理解页面中的表格表格看上去虽然只是一个一个的小格子组成的，但是，谈及在HTML中制作表格，远远不是看上去的那么直接。表格涉及的属性很多，因为人们在表述表格的时候，不是说“某某表格左上角的那个格子”，而是通过描述某一行和某一列来定位某个单元格的位置，这里就已经描述了3个属性了。22024/5/158.2普通表格的应用这种表格常见于类似于课程表、出勤表、或者价目表这种形式的表格，被使用的频率很高。因此，如果只是针对于简单的文本内容，仅仅是希望这些内容横排或者竖排，那么表格是一个比较好的方法。32024/5/158.2.1制作普通表格表格属于结构性标签，使用<table>标签来进行创建。一个最简单的表格也需要具备表头、行、列的信息。所以它的代码是这样的。42024/5/158.2.1制作普通表格<table><tr><th>Head1</th><th>Head2</th></tr><tr><td>row1,cell1</td><td>row1,cell2</td></tr><tr><td>row2,cell1</td><td>row2,cell2</td></tr></table>52024/5/158.2.1制作普通表格这样看代码真的很难想象这个表格是什么样子，如果用表格的形式去表达这段代码，则下图8所示。62024/5/158.2.1制作普通表格当然，表格的代码也可能写成如下代码。<table><tr><th>Head1</th><td>row1，cell2</th></tr><tr><th>Head2</th><td>row2,cell2</td></tr><tr><th>Head3</th><td>row3,cell2</td></tr></table>72024/5/158.2.1制作普通表格这是以列为表头的表格，其结果如下图所示。82024/5/158.2.1制作普通表格或者也可以写成如下代码，将第一组的<tr>标签内的对象全部定义为表头。此后每一组<tr>标签内的第一个标签定义为<th>标签，即之后的每一行的第一个单元格表示为表头。这样就是分别以行和列的第一个单元格作为表头。92024/5/158.2.1制作普通表格<table><tr><th>Head1</th><th>HEAD1</th></tr><tr><th>Head2</th><td>row1,cell2</td></tr><tr><th>Head3</th><td>row23,cell2</td></tr></table>102024/5/158.2.2表格的基本属性表格的基本属性就是指表格的行、列和单元格，但并不是每一个表格的单元格都是统一大小，所以这就需要设计者通过一些属性参数去修改表格的样子，让它们可以变得更多样性一些。112024/5/151．行高HEIGHT属性默认情况下，一个空白表格的单元格是平均分配的，所以如果需要自定义行高，可以使用height属性来设置每一行单元格的行高。可以使用CSS样式表先定义table，然后定义th或者tr。若想改变表格的表头行高，则样式表应该写为：<styletype="text/css">table{height:185px;}tableth{height:32px;}</style>122024/5/151．行高HEIGHT属性当使用这个CSS时，结果如下图所示。132024/5/152．宽度WIDTH属性如果只是需要修改表格列的宽度，则只使用width属性就可以了。但是不同于行高的是，表格中的宽度是针对整个表格或者每一个单元格的，所以像下面这样的写法是错误的。table{width:400px;}tableth{width:100px;}142024/5/153．单元格大小属性HEIGHT和WIDTH单元格的大小其实就是由高和宽两个因素组成的。所以如果要准确定位一个单元格的具体大小，这两个因素是缺一不可的，必须要同时具备，这样才能定位每个单元格的大小。152024/5/158.2.3合并单元格合并同行单元格使用colsplan属性。在需要修改的那一行中，先删除多余的单元格，这是重要的一步，如果删错了单元格，很可能最后呈现的表格会面目全非。这之后再定义合并的单元格。合并同列的单元格使用rowspan属性，这里介绍一种合并单元格的方法。162024/5/158.2.4表格标题表格标题是一个表格的内容的总结，通常被居中显示在表格的上方。<caption>标签是用来定义表格的标题的，它必须紧随<table>标签之后，并且每个表格只能定义一个标题。其语法结构如下：<table><caption>表格的名字</caption>…<caption>表示标签添加的标题，默认情况下在表格上方居中的位置，它会根据不同表格的宽度来改变位置。172024/5/158.2.5拆分表格为了便于将表格定位给CSS样式表，有时候不希望代码中一直都是<tr>标签，可以使用thead、tfoot、tbody来拆分表格。thead定义了表格的首行，tfoot定义了表格的尾行，tbody定义了表格的主体部分。这里有意思的是，如果使用了其中一个，那么全部元素都要用上。而且它们的出现次序是thead、tbody、tfoot，如以下代码所示。182024/5/158.2.5拆分表格<thead>

<tr><td>thead</td>

</tr>

</theadt><tbody>

<tr><td>tbody</td></tr></tbody><tfoot>

<tr><td>tfoot</td></tr></tfoot>192024/5/158.2.6设置表格的列虽然HTML页面中表格是按照一行一行这样的概念建立起来的，但是可以使用<colgroup>定义表格列的分组。这个标签常和其他2个标签配合用，一个是<col>标签，一个是<span>标签。<col>标签表示为表格中一个或多个列定义属性值，是仅包含属性的空元素，只能在表格或colgroup中使用此元素。202024/5/158.3修饰单元格当了解了表格的构建原理之后，进一步该讨论的就是如何使设计的表格更美观一些。表格是由一个一个的单元格组成，美化表格的要点就在于如何去美化这些单元格。谈到修饰，最好的方法还是使用样式表。设计者可以利用很多优秀的属性彻底改变表格的样式。212024/5/158.3.1通过CSS修饰单元格的边框修改边框可以使用border属性，其不仅仅可以修改边框的粗细，也能修改边框的颜色和样式。默认情况下，边框的值是0，即没有边框。边框颜色和文本颜色默认情况下是相同的。一个标准的边框定义在样式表中可以写成这样：border:2pxsolidred;222024/5/158.3.2合并相邻单元格<table>标签制定的表格，会在所有的单元格之外，再框上一个“四边形”，而每一个单元格又是独立存在的。所以单元格和单元格之间总像是有一条缝隙，有一种方式可以消除这条缝隙，就是使用“边框挤压”的属性border-collapse，如下代码所示。

{

border-collapse:collapse;}232024/5/158.4编辑单元格中的内容表格是由许多个单元格组成，而这些单元格中又可以放入多种类型的页面内容，诸如文本、图像或者超链接等，甚至可以再放入新的表格。这种表格的嵌套曾经是非常流行的布局页面的方法，只是这种方法太过繁琐。通过样式表来修饰表格中的内容就容易多了。242024/5/158.4.1单元格中文本与单元格大小单元格的大小会随着格内文本的长度自行缩放。虽然通过数值可以固定单元格的大小，但是如果文本的长度超过所设置的单元格长度，那么依然会根据文本的长度来做决定。使用table-layout属性可以限制单元格随文本长度而改变，如下代码所示。{table-layout:fixed;}252024/5/158.4.2修饰单元格中的内容通过CSS定义单元格中的文本时，可以专门地指定某一行、某一列，或者是整个表格，比如文本颜色、背景、背景图片等。例如：td{text-align:center;font:.7em幼圆;color:#334542;background-color:#ddd;}样式表中可放入的属性有很多，也有一些是专门的属于表格的样式表，如下表所示，有兴趣的读者可以尝试一下效果。262024/5/158.4.2修饰单元格中的内容

272024/5/158.5案例：制作球赛积分表足球是一项非常有魅力的比赛，每当大赛来临，都能吸引一大批狂热的球迷，每每看到大赛的时间表、积分表都显得特别有活力。下面的例子中将介绍如何用表格制作出一