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