第8章表格

第8章表格•没有CSS之前，表格是最流行的布局页面的方式。它表示一种布局页面的方法，而不仅仅只是指单元格组成的表格，不过那已经是很久以前的事情了。现在谈论Web设计的时候，再说到“表格”，那么它就是一个普通的由单元格组成的表格。8.1理解页面中的表格•表格看上去虽然只是一个一个的小格子组成的，但是，谈及在HTML中制作表格，远远不是看上去的那么直接。表格涉及的属性很多，因为人们在表述表格的时候，不是说“某某表格左上角的那个格子”，而是通过描述某一行和某一列来定位某个单元格的位置，这里就已经描述了3个属性了。8.2普通表格的应用这种表格常见于类似于课程表、出勤表、或者价目表这种形式的表格，被使用的频率很高。因此，如果只是针对于简单的文本内容，仅仅是希望这些内容横排或者竖排，那么表格是一个比较好的方法。8.2.1制作普通表格•表格属于结构性标签，使用table标签来进行创建。一个最简单的表格也需要具备表头、行、列的信息。所以它的代码是这样的。8.2.1制作普通表格•table•tr•thHead1/th•thHead2/th•/tr•tr•tdrow1,cell1/td•tdrow1,cell2/td•/tr•tr•tdrow2,cell1/td•tdrow2,cell2/td•/tr•/table8.2.1制作普通表格•这样看代码真的很难想象这个表格是什么样子，如果用表格的形式去表达这段代码，则下图8所示。8.2.1制作普通表格•当然，表格的代码也可能写成如下代码。•table•tr•thHead1/th•tdrow1，cell2/th•/tr•tr•thHead2/th•tdrow2,cell2/td•/tr•tr•thHead3/th•tdrow3,cell2/td•/tr•/table8.2.1制作普通表格•这是以列为表头的表格，其结果如下图所示。8.2.1制作普通表格•或者也可以写成如下代码，将第一组的tr标签内的对象全部定义为表头。此后每一组tr标签内的第一个标签定义为th标签，即之后的每一行的第一个单元格表示为表头。这样就是分别以行和列的第一个单元格作为表头。8.2.1制作普通表格•table•tr•thHead1/th•thHEAD1/th•/tr•tr•thHead2/th•tdrow1,cell2/td•/tr•tr•thHead3/th•tdrow23,cell2/td•/tr•/table8.2.2表格的基本属性•表格的基本属性就是指表格的行、列和单元格，但并不是每一个表格的单元格都是统一大小，所以这就需要设计者通过一些属性参数去修改表格的样子，让它们可以变得更多样性一些。1．行高HEIGHT属性•默认情况下，一个空白表格的单元格是平均分配的，所以如果需要自定义行高，可以使用height属性来设置每一行单元格的行高。可以使用CSS样式表先定义table，然后定义th或者tr。若想改变表格的表头行高，则样式表应该写为：•styletype=text/css•table{height:185px;•}•tableth{height:32px;•}•/style1．行高HEIGHT属性•当使用这个CSS时，结果如下图所示。2．宽度WIDTH属性•如果只是需要修改表格列的宽度，则只使用width属性就可以了。但是不同于行高的是，表格中的宽度是针对整个表格或者每一个单元格的，所以像下面这样的写法是错误的。•table{width:400px;•}•tableth{width:100px;•}3．单元格大小属性HEIGHT和WIDTH•单元格的大小其实就是由高和宽两个因素组成的。所以如果要准确定位一个单元格的具体大小，这两个因素是缺一不可的，必须要同时具备，这样才能定位每个单元格的大小。8.2.3合并单元格•合并同行单元格使用colsplan属性。在需要修改的那一行中，先删除多余的单元格，这是重要的一步，如果删错了单元格，很可能最后呈现的表格会面目全非。这之后再定义合并的单元格。合并同列的单元格使用rowspan属性，这里介绍一种合并单元格的方法。8.2.4表格标题•表格标题是一个表格的内容的总结，通常被居中显示在表格的上方。caption标签是用来定义表格的标题的，它必须紧随table标签之后，并且每个表格只能定义一个标题。其语法结构如下：•table•caption表格的名字/caption•…•caption表示标签添加的标题，默认情况下在表格上方居中的位置，它会根据不同表格的宽度来改变位置。8.2.5拆分表格•为了便于将表格定位给CSS样式表，有时候不希望代码中一直都是tr标签，可以使用thead、tfoot、tbody来拆分表格。thead定义了表格的首行，tfoot定义了表格的尾行，tbody定义了表格的主体部分。这里有意思的是，如果使用了其中一个，那么全部元素都要用上。而且它们的出现次序是thead、tbody、tfoot，如以下代码所示。8.2.5拆分表格•thead•tr•tdthead/td•/tr/theadt•tbody•tr•tdtbody/td•/tr•/tbody•tfoot•tr•tdtfoot/td•/tr•/tfoot8.2.6设置表格的列•虽然HTML页面中表格是按照一行一行这样的概念建立起来的，但是可以使用colgroup定义表格列的分组。这个标签常和其他2个标签配合用，一个是col标签，一个是span标签。col标签表示为表格中一个或多个列定义属性值，是仅包含属性的空元素，只能在表格或colgroup中使用此元素。8.3修饰单元格•当了解了表格的构建原理之后，进一步该讨论的就是如何使设计的表格更美观一些。表格是由一个一个的单元格组成，美化表格的要点就在于如何去美化这些单元格。谈到修饰，最好的方法还是使用样式表。设计者可以利用很多优秀的属性彻底改变表格的样式。8.3.1通过CSS修饰单元格的边框•修改边框可以使用border属性，其不仅仅可以修改边框的粗细，也能修改边框的颜色和样式。默认情况下，边框的值是0，即没有边框。边框颜色和文本颜色默认情况下是相同的。一个标准的边框定义在样式表中可以写成这样：•border:2pxsolidred;8.3.2合并相邻单元格•table标签制定的表格，会在所有的单元格之外，再框上一个“四边形”，而每一个单元格又是独立存在的。所以单元格和单元格之间总像是有一条缝隙，有一种方式可以消除这条缝隙，就是使用“边框挤压”的属性border-collapse，如下代码所示。•{border-collapse:collapse;}8.4编辑单元格中的内容•表格是由许多个单元格组成，而这些单元格中又可以放入多种类型的页面内容，诸如文本、图像或者超链接等，甚至可以再放入新的表格。这种表格的嵌套曾经是非常流行的布局页面的方法，只是这种方法太过繁琐。通过样式表来修饰表格中的内容就容易多了。8.4.1单元格中文本与单元格大小•单元格的大小会随着格内文本的长度自行缩放。虽然通过数值可以固定单元格的大小，但是如果文本的长度超过所设置的单元格长度，那么依然会根据文本的长度来做决定。使用table-layout属性可以限制单元格随文本长度而改变，如下代码所示。•{table-layout:fixed;}8.4.2修饰单元格中的内容•通过CSS定义单元格中的文本时，可以专门地指定某一行、某一列，或者是整个表格，比如文本颜色、背景、背景图片等。例如：•td{text-align:center;•font:.7em幼圆;•color:#334542;•background-color:#ddd;•}•样式表中可放入的属性有很多，也有一些是专门的属于表格的样式表，如下表所示，有兴趣的读者可以尝试一下效果。8.4.2修饰单元格中的内容•属性作用border所有四个边的属性设置在一个声明border-style设置元素所有边框的样式，或者单独地为各边设置边框样式border-color设置边框中可见部分的颜色，或为4个边分别设置颜色border-width为元素的所有边框设置宽度，或者单独地为各边框设置宽度border-bottom针对于下边框的所有属性设置到一个声明中border-bottom-color设置元素的下边框颜色border-bottom-style设置元素的下边框样式border-bottom-width设置元素的下边框宽度border-left针对于左边框的所有属性设置到一个声明中border-left-color设置元素的左边框颜色border-left-style设置元素的左边框样式border-left-width设置元素的左边框宽度border-right针对于右边框的所有属性设置到一个声明中border-right-color设置元素的右边框颜色border-right-style设置元素的右边框样式border-right-width设置元素的右边框宽度border-top针对于上边框的所有属性设置到一个声明中border-top-color设置元素的上边框颜色border-top-style设置元素的上边框样式border-top-width设置元素的上边框宽度border-collapse设置是否把表格边框合并为单一的边框border-spacing设置分隔单元格边框的距离。（仅用于separatedborders模型）caption-side设置表格标题的位置empty-cells设置是否显示表格中的空单元格。（仅用于separatedborders模型）table-layout设置显示单元、行和列的算法8.5案例：制作球赛积分表•足球是一项非常有魅力的比赛，每当大赛来临，都能吸引一大批狂热的球迷，每每看到大赛的时间表、积分表都显得特别有活力。下面的例子中将介绍如何用表格制作出一个鲜亮的球赛积分表。可以把它放在个人博客上或是个人网站内，借助它和其他球友们一起享受球迷的生活。8.6小结•本章介绍了表格的用法，可以发现，设置表格的方法不难。但是表格缺少一些固定的规律，编辑的方式多而灵活。由于不同浏览器支持的效果大不相同，所以，表格一直是比较难控制的一样东西。好在现在设计者不用再考虑用表格来布局页面了，虽然偶然也会使用，但是更多的时候，表格只是用来制作表格。