第二章 表格和列表(理论)

表格和列表第二章本章单词table （表格，目录)border （边，边界，边框）caption （解说词，标题）cell （细胞，组成单元）width （宽度）align （对齐）vertical （垂直的）row （排，行）collumn （柱，列）item （一个物品，一个条款，条目，项目）预习检查3预习检查为表格设置()属性可以控制表格中相邻单元格的间距，设置()属性可以控制表格中单元格的内容与其边界的间隙。width cellspacingcellspacing widthcellspacing cellpaddingcellpadding cellspaing使用()标签为表格创建标题，使用()标签代替<td></td>标签可以创建标题单元格。<th></th> <caption></caption><caption></caption> <tr></tr><title></title> <th></th><caption></caption> <th></th>

预习检查为单元格标签设置()属性可实现跨行合并，设置()属性可实现跨列合并。rowCells colCellscellRow cellColrows colsrowspan colspan要显示乘314路公交车从汽车西站到五一广场途中经过的公交站点，并在每个公交站点名称前用数字表示途经的先后顺序，应使用()标签和它内部的()标签。<li></li> <list></list><list></list> <item></item><ul></ul> <li></li><ol></ol> <li></li>预习检查<ul></ul>标签显示时，它内部的列表项目前面默认显示的符号是()。阿拉伯数字英文字母实心圆点空心圆圈本章目标理解表格的结构掌握表格相关的标签掌握单元格合并理解列表的分类掌握两种列表及列表项目的标签网页中使用表格与表格相关的一组标签<table> <tr> <td>排名</td> <td>歌曲</td> <td>歌手</td> </tr> <tr> <td>1</td> <td>灰色的彩虹</td> <td>范玮琪</td> </tr> ……</table>演示例2-1table的属性属性意义border设置表格边框的宽度，默认无边框。width设置表格的宽度，可用px像素单位，或%百分比。cellspacing设置表格中相邻单元格之间的距离。cellpadding设置表格中每个单元格的内容与单元格边界的距离。<tableborder="1"width="280px"cellspacing="5px"cellpadding="12px">演示例2-2表格标题和标题单元格<tableborder="1"width="80%">

<caption>XX公司八月份工资表</caption> <tr>

<th>姓名</th> <th>基本工资</th> <th>岗位工资</th> <th>补贴</th> <th>应发工资</th> </tr> <tr>

<th>ximosu</th> <td>1000</td> <td>2000</td> <td>200</td> <td>3200</td> </tr> …… </table>演示例2-3单元格合并

<tr> <throwspan="2">部门</th> <throwspan="2">姓名</th> <thcolspan="2">工资</th> <thcolspan="2">补贴</th> <throwspan="2">应发工资</th></tr>

<tr> <th>基本工资</th> <th>岗位工资</th> <th>午餐补助</th> <th>高温补助</th></tr><tr> <throwspan="2">研发部</th> <th>ximosu</th> <td>1000</td> <td>2000</td> <td>200</td> <td>100</td> <td>3300</td></tr>演示例2-4th、td的属性

属性意义colspan单元格跨列合并后，占据的列数。rowspan单元格跨行合并后，占据的行数。align单元格内部的内容的水平对齐方式，值可为left、center、right、justify，在<td></td>标签内此属性默认为left，在<th></th>标签内默认为centervalign单元格内部的内容的垂直对齐方式，值可为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>演示例2-51、2、

小结1列表

一组逻辑上相关而且级别相同的段落，描述一个事物的不同方面或一件事情的几个步骤。使用列表来组织这些项目，可以使网页的结构更加清晰。有序列表，包含一组需要强调先后顺序的项目，如旅行社某天的日程；无序列表，包含一组不需强调先后顺序的项目，如课程体系包含的若干科目。有序列表使用<ol></ol>可以创建有序列表，它包含的列表项目使用<li></li>创建演示例2-6<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>创建。演示例2-7<p>海鲜自助餐重点推荐</p><ul> <li>口味大肉蟹</li> <li>盐焗濑尿虾</li> <li>蒜蓉清蒸小