《网页设计制作》课件——项目6.pptxVIP

《网页设计制作》项目6

6.1表格标签6.2CSS美化表格6.3表单标签6.4CSS美化表单目录

6.1表格标签什么是表格？

6.1表格标签如何创建表格？说到表格，其实大家并不陌生课程表网上购物查票

6.1表格标签table/tabletr/trtd/td定义一个表格定义表格中的一行，嵌套在table/table中定义表格中的单元格，嵌套在tr/tr中创建table表格，离不开以下3对标签:

6.1表格标签table标签的属性属性描述常用属性值border设置表格的边框（默认border=0为无边框）像素值cellspacing设置单元格与单元格边框之间的空白间距像素值（默认为2像素）cellpadding设置单元格内容与单元格边框之间的空白间距像素值（默认为1像素）width设置表格的宽度像素值height设置表格的高度像素值align设置表格在网页中的水平对齐方式left、center、rightbgcolor设置表格的背景颜色预定义的颜色值、十六进制#RGB、rgb(r,g,b)background设置表格的背景图像url地址

6.1表格标签table标签属性在实体表格中的表现如下图所示：widthheightbordercellspacingcellspaddingtable标签的属性

6.1表格标签table标签属性在实体表格中的表现如下图所示：table标签的属性align=centerbgcolor=CCCCCC

6.1表格标签table标签属性在实体表格中的表现如下图所示：table标签的属性background

6.1表格标签tr标签的属性属性描述常用属性值height设置行高度像素值align设置一行内容的水平对齐方式left、center、rightvalign设置一行内容的垂直对齐方式top、middle、bottombgcolor设置行背景颜色预定义的颜色值、十六进制#RGB、rgb(r,g,b)background设置行背景图像url地址

6.1表格标签学习tr的属性时需要注意以下几点：tr标签无宽度属性width，其宽度取决于表格标签table。虽然可以对tr标签应用background属性，但是在tr标签中此属性兼容问题严重。对tr标签应用valign属性，用于设置一行内容的垂直对齐方式。ABCtr标签的属性

6.1表格标签td标签的属性属性名含义常用属性值width设置单元格的宽度像素值height设置单元格的高度像素值align设置单元格内容的水平对齐方式left、center、rightvalign设置单元格内容的垂直对齐方式top、middle、bottombgcolor设置单元格的背景颜色预定义的颜色值、十六进制#RGB、rgb(r,g,b)background设置单元格的背景图像url地址colspan设置单元格横跨的列数（用于合并水平方向的单元格）正整数rowspan设置单元格竖跨的行数（用于合并竖直方向的单元格）正整数

6.1表格标签学习td的属性时需要注意以下几点：在td标签的属性中，重点掌握colspan和rolspan，其他的属性了解即可，不建议使用，均可用CSS样式属性替代。当对某一个td标签应用height属性设置高度时，该行中的所有单元格均会以设置的高度显示。当对某一个td标签应用width属性设置宽度时，该列中的所有单元格均会以设置的宽度显示。ABCtd标签的属性

6.1表格标签th标签的属性知识概述th/th标签用来设置表头，其文本默认加粗居中显示。表头表头

6.1表格标签6.2CSS美化表格6.3表单标签6.4CSS美化表单目录

6.2CSS控制表格样式CSS控制表格边框除了表格标签自带的属性外，还可用CSS的边框、宽高、颜色等来控制表格样式。日历的边框border日历的单元格边距paddingheightwidth

CSS控制表格边框CSS代码如下所示：table{ width:280px; height:280px; border:1pxsolid#F00;/*设置table的边框*/}td,th{border:1pxsolid#F00;}/*为单元格单独设置边框*/6.2CSS控制表格样式

CSS控制表格边框学习CSS控制表格边框时需要注意以下几点：border-collapse属性的属性值除了collapse（合并）之外，还可以为separate（分离），默认为separate。行标签tr无border样式属性，本书不再做具体的演示，初学者可以自己测试加深理解。当表格的border-collapse属性设置为collapse时，HT