《HTML5与CSS3网页设计》_《HTML5与CSS3网页设计》_HTML5 与CSS5 网页设计（第二版）第十章.pptVIP

第10章表格10.1结构化表格10.2单元格跨行或跨列10.3表格属性10.4使用CSS美化表格10.5综合实例返回10.1结构化表格10.1.1表格的基本标记表格由行、列和单元格3部分组成，一般通过3个标记来创建，分别是表格标记table、行标记tr和单元格标记td。行列交汇形成单元格，是输入信息的地方。表格的各种属性都要在表格的开始标记table和表格的结束标记/table之间才有效。其基本语法格式为:tab1etrtd单元格中的文字/tdtd单元格中的文字/td....../tr下一页返回10.1结构化表格trtd单元格中的文字/tdtd单元格中的文字/td....../tr/tab1etable和/table分别表示表格的开始和结束;tr和/tr则分别表示行的开始和结束，在表格中包含几组tr……/tr，就表示该表格为几行;td和/td表示单元格的起始和结束。其运行效果如图10-1所示。这是一个4行5列的表格，horde:属性是表格的边框线宽度，这里定义为1，如果设置为0，则在用浏览器进行浏览时不会显示出边框线。上一页下一页返回10.1结构化表格10.1.2标题单元格th表格中还有一种特殊的单元格，称为表头，也就是标题单元格。表头一般位于表格的第一行或第一列，用th和/th标记来表示，即tablehead。它是td单元格的一种变体，实质上仍是一种单元格。在一般情况下，浏览器会以粗体和居中的样式显示th标记中的内容。其基本语法如下tab1etrth表格的表头/thth表格的表头/th……上一页下一页返回10.1结构化表格/trtrtd单元格中的文字/tdtd单元格中的文字/td/tr/tab1e其运行效果如图10-2所示。与图10-1的运行效果相比，我们可以看到，本例中表头th标记的文字都为粗体并居中显示。上一页下一页返回10.1结构化表格10.1.3表格标题captioncaption标记用来设置表格标题。表格标题虽然不会显示在表格的框线范围之内，但仍应看作是表格的组成部分，它位于整个表格的第一行，如同在表格上方加一个没有边框的行，用来存放表格标题。其基本语法为:tab1ecaption表格标题/captiontr……/tr/tab1e上一页下一页返回10.1结构化表格其运行效果如图10-3所示。10.1.4thead、tbody、tfoot从表格结构的角度来看，可以把表格按行进行分组，称为“行组”。不同的行组具有不同的意义。行组分为3类:表头、主体和脚注。三者对应的HTML标记依次为thead,tbody和tfoot。设置thead,tbody和tfoot这样的行组标记，可以更准确地表达网页的内容，搜索引擎或者其他系统可以更好地理解网页内容，另一个重要因素是，使用CSS可以更方便地按照结构进行表格样式的设定。上一页返回10.2单元格跨行或跨列单元格跨行或跨列是指一个单元格在垂直或水平方向占据多行或多列，简单来说，就是将垂直或水平方向的多个单元格合并成一个单元格，即合并单元格。单元格跨行由单元格的rowspan属性实现，跨列由colspan属性实现。1.单元格跨行一rowspanrowspan的作用是指定单元格纵向跨越的行数。其基本语法为tdrowspan=”单元格跨行数”代码中加粗部分所做的操作就是单元格的跨行，其运行效果如图10-5所示。2.单元格跨列一colspan单元格跨列由colspan属性进行定义。其基本语法为下一页返回10.2单元格跨行或跨列tdcolspan=”单元格跨列数”单元格跨列数就是这个单元格所跨列的个数。其运行效果如图10-6所示，可以看到“主食”、“新品”以及“8折优惠”单元格都实现了跨列操作。上一页返回10.3表格属性在创建表格之后，我们还需要对表格的各方面属性进行调整，表格的基本属性见表10-1。上表中列举的属性，我们在前面章节中多少都有接触到，应该不会陌生。按照内容(HTML)与样式(CSS)分离的原则，设置表格的大小、背景、颜色、边框、间距、对齐方式等属性的工作应该交由CSS样式表来完成，因此不推荐在HTML中使用上述属性来对表格样式进行调整。返回10.4使用CSS美化表格在上一节中说到，要设置表格的样式应该在CSS中完成。常用的设置表格样式的属性包括:(1)width:设置表格或单元格的宽度。