任务2.4 网页设计与制作案例教程（HTML+CSS+JavaScript）表 格.pptxVIP

任务2.4表格

任务介绍使用表格的方式排版

任务分析本任务是一行两列的效果，如何实现这种效果呢？每一列的文本如何编辑？文本下的背景颜色如何设置的？案例

1◎表格

表格标签table就是用来展示数据显示。tabletrtd/tdtd/tdtd/td/tr/tableHTML表格通过table标签来定义。简单的HTML表格由table元素以及一个或多个tr、th或td元素组成。tr元素定义表格行，th元素定义表头，td元素定义表格单元。1.表格的定义与属性

表格标签table有很多属性，最常用的属性。属性描述width/height表格的宽度（高度），值可以是数字或百分比，数字表示表格宽度（高度）所占的像素点数，百分比是表格的宽度（高度）占浏览器宽度（高度）的百分比align表格相对周围元素的对齐方式background表格的背景图片(关键字，16进制，rgb)bgcolor表格的背景颜色，不赞成使用，后期通过样式控制背景颜色border表格边框的宽度（以像素为单位）bordercolor表格边框颜色cellspacing单元格之间的间距cellpadding单元格内容与单元格边界之间的空白距离的大小table标签属性案例

tr标签属性tr大部分属性与table标记属性相同，用法类似。属性名属性含义height设置行高度bgcolor设置行的背景颜色background设置行的背景图像align设置一行内容的水平对齐方式valign设置一行内容的垂直对齐方式

数据标签td的常用属性属性描述属性描述width/height单元格的宽和高，接受绝对值（如80）及相对值（80%），不赞成使用，后期通过样式控制align单元格内容的水平对齐方式，可选值为：left、center、right等colspan规定单元格可横跨的列数valign单元格内容的垂直对齐方式，可选值为：top、middle、bottom等rowspan规定单元格可横跨的行数bgcolor单元格的背景颜色td标签属性案例

修改课表，对单元格进行拆分、合并，同时增加一个修饰条纹，效果如图所示。案例