Web前端技术开发（HTML5+CSS3+JavaScript）课件 第三单元 表格的应用.pptx

Web前端开发技术

第三单元表格的应用掌握表格的概念和使用设置表格标记属性插入表格及设置属性表格的行和单元格表格嵌套

3.1创建表格3.2表格的基本属性3.3跨行和跨列的操作3.4表格嵌套

创建表格1

3.1.1表格的基本构成表格的基本结构：表格的基本结构由行和列组成，顺序是先行后列，即先定义表格中有多少行，再定义每行上有多少列（或称单元格），形成标记间的嵌套关系。基本语法：

3.1.2设置表格的标题基本语法：语法说明：在HTML文件中，使用成对caption/caption标记给表格插入标题。

3.1.3表头一般表格会有列名称和数据这两部分，列名称作为表格的第一行，称为表头。基本语法：语法说明：在HTML文档中，th/th标记定义表头，放置在行标记tr中，与td标记一样定义单元格标记，但是该标记带有居中加粗的样式。

表格基本属性2

3.2.1设置表格边框样式表格table标记中可以通过border属性和bordercolor属性设置表格边框的样式。基本说明：语法说明：border属性用于设置表格边框的粗细。取=0的整数。当border属性设置为零时表示不显示边框，数值越大边框越粗；bordercolor属性设置表格边框的颜色。bordercolor属性只有在border属性的值不为零时才有效果。

3.2.2设置宽度和高度width属性和height属性分别设置表格的宽度和高度，也可以设置行和单元格宽度和高度，将这两个属性分别设置在标记table、tr和td中。基本语法：语法说明：表示宽度和高度的值一般有两种方法，第一种，用数值表示，正整数；第二种，用百分比来表示，相对于设置该属性所在元素的父元素的宽度和高度。注意：如果没有对width属性和height属性进行设置，表格宽度和高度会自适应表格内容的宽度和高度。

3.2.3设置对齐方式对齐方式：对齐方式分为水平方向对齐和垂直方向对齐水平对齐：align属性设置水平方向上的对齐，该属性有4个值可选。

3.2.3设置对齐方式垂直对齐：valign属性设置水平方向上的对齐，该属性有4个值可选。不同标记中的对齐方式：

3.2.4边距与填充表格中有两种留白，分别为边距(cellspacing)和填充(cellpadding)。基本语法：语法说明：cellspacing属性用于设置表格内外边框线的距离，该属性的默认值一般不为零；cellpadding属性设置表格单元格中内容与边框之间的间距，默认值为零。

3.2.5背景色设置在表格中设置背景颜色可以使用bgcolor属性，table、tr和td标记都可以设置bgcolor属性，分别表示给整个表格、表格中的一行、某个单元格设置背景色。基本语法：语法说明：表示颜色的三种方法已经在3.2.1中详细描述，在此不再累述。

跨行和跨列操作3

3.3.1跨列操作单元格跨列操作，通过设置单元格td标记中的colspan属性来实现。基本语法：语法说明：colspan属性定义横跨单元格的列数。

3.3.2跨行操作单元格跨行操作，通过设置单元格td标记中的rowspan属性来实现。基本语法：语法说明：rowspan属性定义竖跨单元格的行数。

表格嵌套4

2.4添加段落表格嵌套：表格中显示的内容可以是文本、图片等其他形式的网页元素，甚至可以是表格，形成表格嵌套。示例：

THANKYOUFORWATCHING