XHTML 列表与表格

Posted 2020-08-02

列表与表格

列表作用

列表用于显示具有同一特征的有序/无序的数据

列表至少存在一个列表项

有序列表

用于显示具有同一特征的有序数据

<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>

列合并

<h2 align="center">尺码对照表</h2>
<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>

本文出自 “擎凇离雨痴木月” 博客，谢绝转载！