XHTML 列表与表格
列表与表格
列表作用
列表用于显示具有同一特征的有序/无序的数据
列表至少存在一个列表项
有序列表
用于显示具有同一特征的有序数据
<ol type="列表类型" start="起始编号">
<li>...</li>
</ol>
type属性的值
-1，数字
-a，小写字母
-A，大写字母
-i，小写罗马数字
-I，大写罗马数字
start值一直为数字
无序列表
用于显示具有同一特征的无序数据
<ul type="列表类型">
<li>...</li>
</ul>
type属性的值
-disc，实心圆（默认）
-circle，空心圆
-square，实心矩形
定义列表
用于显示定义
<dl>
<dt></dt><dd></dd>
</dl>
dt用于定义列表中的项目
dd用于描述列表中的项目
<dl> <dt>电脑</dt><dd>组装机性价比高</dd> <dt>笔记本</dt><dd>轻薄为主</dd> </dl>
表格
表格通常用来组织结构化信息
表格的数据保存在单元格里
<table>
<tr>
<td></td>
</tr>
</table>
表格属性
width，设置表格宽度
height，设置表格高度
bgcolor，设置表格背景颜色
background，设置表格背景图像
border，设置表格边框宽度
bordercolor，设置表格边框颜色
cellpadding，设置内边距
cellspacing，设置外边距
align，设置表格对齐方式（left|center|right）
行属性
align，设置水平对齐方式
bgcolor，设置背景颜色
valign，设置垂直对齐方式
单元格属性
align，设置水平对齐方式
bgcolor，设置背景颜色
valign，设置垂直对齐方式（top|middle|bottom）
rowspan，设置行合并
colspan，设置列合并
复杂表格
表格可以划分为3个部分：表头、表主体和表尾
-表格行分组：<thead></thead>
-表格主体分组：<tbody></tbody>
-表尾行分组：<tfoot></tfoot>
例：
<table border="1" width="300"> <thead align="center"> <tr> <td>姓名</td> <td>年龄</td> </tr> </thead> <tbody align="right"> <tr> <td>kinrey</td> <td>18</td> </tr> <tr> <td>marry</td> <td>19</td> </tr> </tbody> </table>
行合并
<table width="450" border="1" cellpadding="5" cellspacing="0"> <tr> <td rowspan="3">男<br/><br/>鞋</td> <td>脚长（mm）</td> <td>245</td> <td>250</td> </tr> <tr> <td>中国码</td> <td>38</td> <td>39</td> </tr> <tr> <td>脚围（mm）</td> <td>232</td> <td>235</td> </tr> </table>
列合并
<h3 align="center">尺码对照表</h3> <table width="450" border="1" cellpadding="5" cellspacing="0" align="center"> <tr> <td colspan="4" align="center">中国标准男鞋尺码对照表</td> </tr> <tr> <td>尺码</td> <td>38</td> <td>39</td> <td>39</td> </tr> <tr> <td>脚长（mm）</td> <td>232</td> <td>235</td> <td>235</td> </tr> </table>