第二章表格与列表

第二章表格与列表本章目标了解表格的结构掌握表格相关的标签掌握单元格合并了解列表的分类掌握列表及列表项目的标签表格表格的结构一个完整的表格从<table>标签开始，结束于</table>。要表示表格的一行，应在<table></table>内部提供<tr></tr>。要表示某一行中的一个单元格，则应在<tr></tr>内部提供<td></td>。表格中的具体数据被包含在每个单元格中。表格的结构<table> <tr> <td>排名</td> <td>歌曲</td> <td>歌手</td> </tr> <tr> <td>1</td> <td>灰色的彩虹</td> <td>范玮琪</td> </tr> <tr> <td>2</td> <td>非常完美</td> <td>张韶涵</td> </tr> ……</table>表格的属性属性意义border设置表格边框的宽度，默认无边框。width设置表格的宽度，可用px像素单位，或%百分比。cellspacing设置表格中相邻单元格之间的距离。cellpadding设置表格中每个单元格的内容与单元格边界的距离。表格的属性<tableborder="1"width="280px"cellspacing="5px“cellpadding="12px">表格标题和标题单元格可以在<table></table>标签内第一行之前编写<caption></caption>标签，创建表格的标题，以描述整个表格的作用或意义。使用<th></th>标题单元格标签代替<td></td>普通数据单元格标签，这些特殊的单元格一般要求突出显示。通常，表格第一行的一系列单元格应视为列标题，而表格第一列的一系列单元格应视为行标题。表格标题和标题单元格<tableborder="1"width="80%"> <caption>XX公司八月份工资表</caption> <tr> <th>姓名</th> <th>基本工资</th> <th>岗位工资</th> <th>补贴</th> <th>应发工资</th> </tr> <tr> <th>洪金宝</th> <td>1000</td> <td>2000</td> <td>200</td> <td>3200</td> </tr> ……</table>单元格合并实现一些复杂的表格结构时，可能需要将相邻的几个单元格合并成为一个。使用<td></td>或<th></th>标签的colsapn及rowspan属性可以设置单元格合并。单元格合并<tableborder="1"width="100%"> <caption>XX公司八月份工资表</caption> <tr> <throwspan="2">部门</th> <throwspan="2">姓名</th> <thcolspan="2">工资</th> <thcolspan="2">补贴</th> <throwspan="2">应发工资</th> </tr> ...... <tr> <tdrowspan="2">开发部</td> <td>金洁</td><td>1000</td><td>1000</td> <td>200</td><td>200</td> <td>2400</td> </tr> </table>单元格的属性属性意义colspan单元格跨列合并后，占据的列数。rowspan单元格跨行合并后，占据的行数。align单元格内部的内容的水平对齐方式，值可为left,center,right,justify，在<td></td>标签内此属性默认为left，在<th></th>标签内默认为center。valign单元格内部的内容的垂直对齐方式，值可为top,middle,bottom,baseline，默认为middle。单元格对齐方式<tableborder="1"width="250px"> <tr> <tdrowspan="2"valign="top">单元格</td> <tdalign="center">单元格</td> <tdalign="right">单元格</td> </tr> <tr> <tdcolspan="2">单元格</td> </tr></table>列表一组逻辑上相关而且级别相同的段落，用于描述一个事物的不同方面或一件事情的几个步骤。使用列表来组织这些项目，可以使网页的结构更加清晰。有序列表无序列表有序列表使用<ol></ol>可以创建有序列表，它包含的列表项目使用<li></li>创建。<p>XX公司三亚之旅第一天行程</p><ol> <li>07:00之前在新大新广场前集合</li> <li>07:15乘坐机场大巴前往黄花机场</li> <li>08:30集体办理登机手续</li> <li>09:15乘机飞往三亚</li> <li>11:00抵达三亚机场</li> <li>11:30由地接大巴送到旅社</li> <li>12:30集体吃海鲜自助餐</li> <li>下午自由活动</li></ol>无序列表使用<ul></ul>可以创建无序列表，它包含的列表项目使用<li></li>创建。<p>海鲜自助餐重点推荐</p><ul> <li>口味大肉蟹</li> <li>盐焗濑尿虾</li> <li>蒜蓉清蒸小鲍</li> <li>辣椒炒海瓜子</li> <li>哈贝冬瓜汤</li></ul>总结使用<table></table>标签可以创建表格。使用<tr></tr>标签可以为表格创建行。使用<td></td>标签可以为表格的行创建数据单元格。使用<th></th>标签可以为表格的首行或首列创建标题单元格。表格的数据放置在单元格标签中。使用