轻松学HTMLCSS之表格.pptx

,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2020/2/7,#,单击此处编辑母版标题样式,第,8,章 表格,表格是网页的一个重要容器元素，可包含文字和图像。表格使网页结构紧凑整齐，使网页内容通俗易懂。表格的使用方法灵活，但内容繁多。本章我们就来介绍表格的使用方法。,8.1,表格的构建,表格由,标签来定义。每个表格均有若干行，由,标签定义；每行被分割为若干单元格（即列），由,标签定义。下面给出一个表格的整体示意图，如图,8.1,所示：,8.1,表格的构建,表格的定义,语法规则如下所示：,8.1.1,表头单元格,表头单元格是指表格头部的单元格格式，通过,标签定义。使用,标签可以使此标签里的文本内容字体变粗，以形成表头的格式。,标签写在,标签里面，定义语法形式如下所示：,8.1.2,单元格数据标签,单元格数据标签,，也是列标签，用来设置表格的列。,标签用来添加文本内容，在,标签里面，与,标签并列出现。定义语法形式如下所示：,8.1.3,表格的标题,表格的标题是指表格的题目，显示在表格的最上面。通过,标签来定义，与表头不同的是，,标签设置的标题不被包围在边框里面，而表头设置的标题被包围在边框的里面，放在,标签中。定义语法形式如下所示：,8.2,表格外观,表格的外观变化越来越多样，增加了网页的可观性，引起读者极大的兴趣。表格的外观包括表格内容的颜色变换、对齐方式、表格的背景颜色等，下面我们就来详细介绍有关表格外观的设置。,8.2.1,宽度（,width,）和高度（,height,）,当单元格中的内容较多时，需要调整表格单元格的高度和宽度。通常使用,width,属性定义表格宽度，,height,属性定义表格的高度，定义语法结构如下所示：,8.2.2,背景颜色和图像,网页背景的设置也是网页设计过程中最为常见的网页元素。其中，网页背景不仅可以添加背景颜色，还可以添加背景图像。下面我们就分别来介绍在,HTML,和,CSS,中设置背景颜色和图像。,1.,在,HTML,中定义背景,网页可以添加背景颜色和图像，同样，表格也可以添加背景颜色和图像，使表格的外观更加美观。通过,标签和,标签进行定义，定义语法规则如下所示：,2.,在,CSS,中定义背景,在,CSS,中，定义背景的方法是现在较为流行的一种定义方式，使用,background-color,属性对背景颜色进行定义。定义语法如下：,8.2.3,间距、表格填充,表格的间距、填充影响着表格的外观形式，下面我们就来详细介绍间距、表格的填充设置，使得表格的外观更清晰明了、大方美观。,1.,间距（,cellspacing,）,间距是指表格的边框边距，通过,cellspacing,属性定义。形式如下图,8.2,中所示，箭头之间的距离就表示间距。,2.,表格填充（,cellpadding,）,表格填充是指单元格内容与单元格边框之间的距离，通过,cellpadding,属性进行定义。在,标签中定义，这样可以对整个表格的距离进行控制。定义语法形式如下所示：,8.2.4,表格行的对齐方式,表格里面有许多行，每个行都可以进行独立的设定。通过对行的独立设定，可以对一些特殊的内容进行修饰，从而达到独立的修饰效果。其中，包含水平对齐的设置和垂直对齐的设置，下面我们就来详细介绍。,1.,水平对齐（,align,）,水平对齐放在行里面，是指行里面的内容都进行水平对齐，通过,align,属性定义。定义语法规则如下所示：,2.,垂直对齐（,valign,）,垂直对齐放在行里面，是指行里面的内容都进行垂直对齐，通过,valign,属性进行定义。定义语法规则如下所示：,3.,在,CSS,中定义表格文本对齐,在,CSS,中，表格文本的对齐方式通常使用,text-align,和,vertical-valign,属性定义。定义水平对齐方式语法格式如下所示：,定义垂直对齐方式语法格式如下所示：,8.3,边框,边框是表格中很重要的一个部分，它可以排版网站，也可以美化网站。边框的使用也是非常广泛的，本节我们就来详细讲解边框的各种用法。,8.3.1,边框宽度,(border),边框宽度是指给表格的边框设置一个宽度，用来隔开表格和内容。通过,border,属性进行定义，放在,标签中，定义语法形式如下所示：,8.3.2,边框颜色（,bordercolor,）,边框颜色是上一节设置边框时所产生的宽度的颜色。通过,bordecolor,属性的设置，可以使表格的边框多元化。,bordercolor,属性写在,标签中，要在,border,属性存在的情况下才可以产生效果，写在,border,属性后面。定义语法形式如下所示：,8.3.2,边框颜色（,bordercolor,）,1,.,亮边框颜色（,bordercolorlight,）,亮边框是指左边框和上边框。亮边框颜色是指左边框和上边框的颜色，通过,bordercolorlight,属性进行定义,而下边框和右边框仍是系统默认颜色。定义语法形式如下所示：,8.3.2,边框颜色（,bordercolor,）,2.,暗边框颜色（,bordercolordark,）,暗边框是指右边框和下边框。暗边框颜色值指右边框和下边框的颜色，通过,bordercolordark,属性进行定义。定义语法规则如下所示：,8.3.3,边框显示,边框的显示效果多种多样，基本的定义语法如下所示：,8.4,跨多行、多列的表元,在同个表格里，并不一定每行每列都是一样的行数和列数。由于网页制作的需要，有可能行和列的数量一样，此时就需要用到跨多行和多列的表元，通过设定来使同个表格下的行数和列数可以自行调整。本节将详细讲述跨多行和多列的表元内容。,8.4.1,跨多列（,colspan,）,跨多列,colspan,属性，是指把一行中的几个列合并成一个列，实现一列跨过几列的显示效果。由于,colspan,属性用于列中，需写在,标签中，语法形式如下所示：,8.4.2,跨多行（,rowspan,）,跨多行,rowspan,属性，是指把几行中的几个咧合并成一个列，实现一列跨过几行的效果，也需在,标签中定义。定义语法形式如下所示：,8.5,表格行分组,表格行分组是指将表格分为表头、主体、尾注。当表格在比较复杂的网页中使用时，可以将表格分为三大部分。使用了表头、主体、尾注，再使用跨多行、跨多列时，需要注意，在三大部分中，属性不能跨过其他任意两大部分，这就局限了跨多行、跨多列的使用。,8.5.1,表头标签,表头是指表格中的标题部分，和页面中,head,部分定义上有相似之处。通过,标签来定义，此标签的使用，可以使网页中过长的表格在打印时，每页的最前面都可以显示表头标签,的内容。由于,标签是用来识别行的，故写在,标签的外面，定义语法形式如下所示：,8.5.2,主体标签,主体是指表格中的内容部分，和页面中,body,部分定义上有些相似。主体标签,用于识别行属性的主体部分。用法与表头相同，写在,之外，定义语法形式如下所示：,8.5.3,尾注标签,尾注时指表格中的脚注部分。尾注标签,用来识别行属于表格的尾注部分，可以让网页中过长的表格在打印时，每页的最后面都可以显示出尾注标签的内退。定义语法规则如下所示：,8.6,表格的嵌套,在网页制作过程中，常常需要使用多个表格进行嵌套，使得整个网页更加美观。在一个表格里嵌套多个表格，需要在,标签中进行嵌套，定义语法形式如下所示：,8.7,小结,本章学习了表格的相关知识。通过学习，可以了解到表格的语法、用法。表格看似简单，但却与整个网页的布局紧密相连。虽然表格已经被网页布局所淘汰，但表格在网页中的应用仍旧非常广泛。,