第二节HTML5表格与列表标签

1表格与列表Part◎表格标签◎列表标签1表格标签1.表格的定义与属性table就是用来展示数据显示。举例：tabletrtd/tdtd/tdtd/td/tr/tableHTML表格通过table标签来定义。简单的HTML表格由table元素以及一个或多个tr、th或td元素组成。tr元素定义表格行，th元素定义表头，td元素定义表格单元。举例演示【实例2-7】表格的使用。基本的表格结构HTML表格也可能包括caption、thead、tbody以及tfoot等元素。1表格标签tfoot标签用于对HTML表格中的表注（页脚）内容进行分组。caption标签定义表格的标题。thead标签定义表格的表头。该标签用于组合HTML表格的表头内容。thead元素应该与tbody和tfoot元素结合起来使用。tbody标签用于对HTML表格中的主体内容进行分组。举例演示【实例2-7】表格的使用。表格标题表格标签table有很多属性，最常用的属性。属性描述width/height表格的宽度（高度），值可以是数字或百分比，数字表示表格宽度（高度）所占的像素点数，百分比是表格的宽度（高度）占浏览器宽度（高度）的百分比align表格相对周围元素的对齐方式background表格的背景图片bgcolor表格的背景颜色，不赞成使用，后期通过样式控制背景颜色border表格边框的宽度（以像素为单位）bordercolor表格边框颜色cellspacing单元格之间的间距cellpadding单元格内容与单元格边界之间的空白距离的大小举例演示【实例2-7】表格的使用。表格属性当表格设置border时，可以表格的边框包括上边框、下边框、左边框、右边框。这四个边框都可以设置为显示或隐藏状态。frame的值描述frame的值描述box显示整个表格边框alove只显示表格的上边框void不显示表格边框below只显示表格的下边框hsides只显示表格的上下边框lhs只显示表格的左边框vsides只显示表格的左右边框rhs只显示表格的右边框举例演示【实例2-7】表格的使用。border应用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第一项/lili第二项/lili第三项/li/ul举例演示type决定列表的图标类型disc表示实心圆circle表示空心圆square表示小方块默认情况下为实心圆2列表标签1.无序列表无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于ul标签。每个列表项始于li。HTML支持有序、无序和定义列表。语法：ultype=编号类型li第一项/lili第二项/lili第三项/li/ultype决定列表的图标类型disc表示实心圆circle表示空心圆square表示小方块默认情况下为实心圆举例演示【实例2-8】列表的使用。无序列表2.有序列表有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于ol标签。每个列表项始于li标签。语法：oltype=编号类型start=valueli第一项/lili第二项/lili第三项/li/ol举例演示type类型描述type=1表示列表项目用数字标号（1,2,3…）type=A表示列表项目用大写字母标号（A,B,C…）type=a表示列表项目用小写字母标号（a,b,c…）type=Ⅰ表示列表项目用大写罗马数字标号（Ⅰ,Ⅱ,Ⅲ…）type=ⅰ表示列表项目用小写罗马数字标号（ⅰ,ⅱ,ⅲ…）举例演示【实例2-8】列表的使用。有序列表3.嵌套列表有序列表和无序列表的使用格式基本相同。举例：ultype=circleli北京/lili上海/lioltype=1start=6reversed=reversedli浦东新区/lili徐汇区/lili长宁区/lili普陀区/li/olli广州/lili深圳/li/ul4.定义列表使用dl标签定义了定义列表（definitionlist），定义列表多用于对术语或名词的描述，同时，定义列表项前面无任何项目符号。举例：dldt第1项/dtdd注释1/dddt第2项/dtdd注释2/dddt第3项/dtdd注释3/dd/dldd（描述列表中的项目）dl标签用于结合dtdd实现dt（定义列表中的项目）举例演示【实例2-10】定义列表的使用。