网页设计基础元素11.ppt

中国矿业大学 管理学院 网页设计基础 中国矿业大学管理学院 张召浦 Email: cumtzzp@163.com 中国矿业大学 管理学院 * Chapter 2 HTML 4.01 HTML文档 1 HTML基本语法 2 HTML 元素与实体 3 HTML 4.01 HTML4.01网页制作实例 4 中国矿业大学 管理学院 * §2.3.8 表格 HTML 4.01 /static/htmlgraph/ 的分析结果 红色代表和表格相关的标 签，可以看出这个网站中 使用最多的标签就是和表 格相关的标签。事实上， 表格往往是以前的网站进 行布局时最重要的容器。 中国矿业大学 管理学院 * §2.3.8 表格 HTML 4.01 标签 说 明 table 定义一个表格 th 定义一个表头数据 tr 定义表格的一行 td 定义表格的一个单元格 caption 为表格定义标题 colgroup 将列定义为具有相同样式的组 col 为表格中的一列或多列定义属性 thead 定义表头 tbody 定义表格主体 tfoot 定义表格的表尾 table相关的标签 中国矿业大学 管理学院 * §2.3.8 表格 HTML 4.01 中国矿业大学 管理学院 * §2.3.8 表格 HTML 4.01 表格使用table标签进行定义。表格被拆分成多个行 (使用tr标签)，每行被分成多个单元格(使用td标签) 。Td 代表 table data，代表数据单元格中的内容。单元格中可以包含文本、图像、列表、段落、表单、水平线，甚至是表格等，常常用作页面布局时的容器。 table的属性 align：不设置该属性，则表格居左显示 width：宽度，可以是百分比或象素值 border：不设置该属性，则表格无边框 background, bgcolor cellspacing, cellpadding bordercolor, bordercolordark, bordercolorlight summary：HTML表格的摘要 中国矿业大学 管理学院 * §2.3.8 表格 HTML 4.01 border, cellspacing, cellpadding 中国矿业大学 管理学院 * §2.3.8 表格 HTML 4.01 tr属性 align, valign：水平和竖直两个方向上的对齐设置； height：行的宽度是自动填充整个表格，故无width属性，只有行高属性； bgcolor, bordercolor, bordercolordark, bordercolorlight：没有background属性，故无法为某行设置背景图片； 注意：行是单元格的容器，故行属性的设置基本上都是应用于该行内的所有单元格的。 中国矿业大学 管理学院 * §2.3.8 表格 HTML 4.01 td属性 align, valign width, height background, bgcolor bordercolor, bordercolordark, bordercolorlight nowrap：单元格是否自动换行，布尔属性 colspan, rowspan：列和行的跨度，合并单元格时使用 注意：td也是一个容器；为了更好地显示单元格的边框，在单元格数据为空时，需要将单元格数据设置为nbsp;。 中国矿业大学 管理学院 * §2.3.8 表格 HTML 4.01 thead, tbody, tfoot tbody与thead和tfoot在表格中形成三个“块”，thead指明表格的题头部分，tfoot指明表格的脚注部分，而tbody则指明表格的主体部分 一个表格中只能有一个thead和tfoot 无论如何指定thead, tbody, tfoot的顺序，显示顺序都按照thead, tbody和tfoot的顺序排列 thead中通常使用th标签替代td标签 caption 指定HTML表格的标题 默认情况下，浏览器显示表格标题在表格的上方。可以通过align属性进行指定 中国矿业大学 管理学院 * §2.3.8 表格 HTML 4.01 table width=80% border=1 cellspacing=1 cellpadding=1 caption旅行费用报表/caption thead trth/thth餐费/thth住宿/thth交通/th/tr /thead tbody trth8月1日/thtd80/tdtd200/tdtd100/td/tr trth8月2日/thtd60/tdtd120/tdtd150/td/tr /tbody tfoot trth小计/thth