《网页设计》课件-2-4表格与列表

表格与列表目录◎表格标签◎列表标签1表格标签1.表格的定义与属性table就是用来展示数据显示。HTML表格通过<table>标签来定义。简单的HTML表格由

table元素以及一个或多个

tr、th或td元素组成。tr元素定义表格行，th

元素定义表头，td元素定义表格单元。举例：<table><tr><td></td><td></td><td></td></tr></table>HTML表格也可能包括caption、thead、tbody以及tfoot等元素。<caption>标签定义表格的标题。<thead>标签定义表格的表头。该标签用于组合HTML表格的表头内容。<thead>元素应该与<tbody>

和<tfoot>元素结合起来使用。<tbody>标签用于对HTML表格中的主体内容进行分组。<tfoot>标签用于对HTML表格中的表注（页脚）内容进行分组。1表格标签1表格标签表格标签<table>有很多属性，最常用的属性。属性描述width/height表格的宽度（高度），值可以是数字或百分比，数字表示表格宽度（高度）所占的像素点数，百分比是表格的宽度（高度）占浏览器宽度（高度）的百分比align表格相对周围元素的对齐方式background表格的背景图片bgcolor表格的背景颜色，不赞成使用，后期通过样式控制背景颜色border表格边框的宽度（以像素为单位）bordercolor表格边框颜色cellspacing单元格之间的间距cellpadding单元格内容与单元格边界之间的空白距离的大小举例演示1表格标签当表格设置border时，可以表格的边框包括上边框、下边框、左边框、右边框。这四个边框都可以设置为显示或隐藏状态。frame的值描述frame的值描述box显示整个表格边框alove只显示表格的上边框void不显示表格边框below只显示表格的下边框hsides只显示表格的上下边框lhs只显示表格的左边框vsides只显示表格的左右边框rhs只显示表格的右边框举例演示举例演示【实例2-7】表格的使用。2.单元格的设置数据标签<td>的常用属性属性描述属性描述width/height单元格的宽和高，接受绝对值（如80）及相对值（80%），不赞成使用，后期通过样式控制align单元格内容的水平对齐方式，可选值为：left、center、right等colspan规定单元格可横跨的列数valign单元格内容的垂直对齐方式，可选值为：top、middle、bottom等rowspan规定单元格可横跨的行数bgcolor单元格的背景颜色举例演示【实例2-8】跨行或跨列的表格单元格。2列表标签1.无序列表无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于<ul>标签。每个列表项始于<li>。HTML支持有序、无序和定义列表。语法：<ultype=编号类型><li>第一项</li><li>第二项</li><li>第三项</li></ul>举例演示type决定列表的图标类型disc表示实心圆circle表示空心圆square表示小方块默认情况下为实心圆2.

有序列表有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li>标签。语法：<oltype=编号类型start=value><li>第一项</li><li>第二项</li><li>第三项</li></ol>举例演示type类型描述type=1表示列表项目用数字标号（1,2,3…）type=A表示列表项目用大写字母标号（A,B,C…）type=a表示列表项目用小写字母标号（a,b,c…）type=Ⅰ表示列表项目用大写罗马数字标号（Ⅰ,Ⅱ,Ⅲ…）type=ⅰ表示列表项目用小写罗马数字标号（ⅰ,ⅱ,ⅲ…）3.嵌套列表有序列表和无序列表的使用格式基本相同。举例：<ultype="circle"><li>北京</li><li>上海</li><oltype="1"start="6"reversed="reversed"> <li>浦东新区</li> <li>徐汇区</li> <li>长宁区</li> <li>普陀区</li></ol><li>广州</li><li>深圳</li></ul>举例演示4.定义列表使用<dl>标签定义了定义列表（definitionlist），定义列表多用于对术语或名词的描述，同时，定义列表项前面无任何项目符号。<dl>标签用于结合

<dt>

（定义列表中的项目）

<dd>

（描述列表中的项目）举例：<dl><dt>第1项</dt><dd>注释1<