实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<h2>这是一个嵌套列表实例</h2>
<table border="1">
<tr>
<th>嵌套列表1</th>
<th>嵌套列表2</th>
</tr>
<tr>
<td>
<ul>
<li>苹果</li>
<li>西瓜
<ul>
<li>黑美人</li>
<li>无籽瓜</li>
<li>沙瓜</li>
</ul>
</li>
<li>芒果</li>
</ul>
</td>
<td>
<ul>
<li>苹果</li>
<li>西瓜
<ul>
<li>黑美人</li>
<li>无籽瓜</li>
<li>沙瓜
<ul>
<li>中国瓜</li>
<li>进口瓜</li>
</ul>
</li>
</ul>
</li>
<li>芒果</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
运行效果：
这一节我们来学习一下，不同列表的符号，利用type 属性的值改变输出的结果。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<h2>不同类型的有序列表</h2>
<table border="1">
<tr>
<th>数字列表</th>
<th>字母列表</th>
<th>小写字母列表</th>
</tr>
<tr>
<td>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>芒果</li>
</ol>
</td>
<td>
<ol type="A">
<li>苹果</li>
<li>香蕉</li>
<li>芒果</li>
</ol>
</td>
<td>
<ol type="a">
<li>苹果</li>
<li>香蕉</li>
<li>芒果</li>
</ol>
</td>
</tr>
<tr>
<th>罗马字母列表</th>
<th>小写罗马字母列表</th>
<th>改变起始值</th>
</tr>
<tr>
<td>
<ol type="I">
<li>苹果</li>
<li>香蕉</li>
<li>芒果</li>
</ol>
</td>
<td>
<ol type="i">
<li>苹果</li>
<li>香蕉</li>
<li>芒果</li>
</ol>
</td>
<td align="center">
start="值"<br />
例如：<br/>
start="50"
</td>
</tr>
</table>
</body>
</html>
运行效果：
从这个实例中看出，我们用一个两行三列的表格，来演示不同类型的有序列表。
type="A" 表示输出大写字母
type="a" 表示输出小写字母
type="I" 表示输罗马字母
type="i" 表示输出小写罗马字母
start="50" 表示输出50开始的序号
在编辑html网页中，有时候我们要对列表的符号进行修改，这时我们就要用列表的tyep 属性来定义它。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<h4>disc 项目符号列表：</h4>
<ul type="disc">
<li>苹果</li>
<li>香蕉</li>
<li>芒果</li>
</ul>
<h4>circle 项目符号列表：</h4>
<ul type="circle">
<li>苹果</li>
<li>香蕉</li>
<li>芒果</li>
</ul>
<h4>square 项目符号列表：</h4>
<ul type="square">
<li>苹果</li>
<li>香蕉</li>
<li>芒果</li>
</ul>
</body>
</html>
运行效果：
从这个实例中看出，我们用<ul>标签定义三个无序列表，并且用type属性改变了列表的符号显示。
type="disc" 显示实心黑色小圆点
type="circle" 显示空心小圆点
type="square" 显示实心黑色小方点
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<h2>这是一个自定义列表</h2>
<dl>
<dt>水果类</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dd>芒果</dd>
<dt>蔬菜类</dt>
<dd>白菜</dd>
<dd>芹菜</dd>
<dd>生菜</dd>
</dl>
</body>
</html>
运行效果：
从这个实例中看出，我们用<dl >标签对列表进行自定义，用<dt>标签定义列表项目，<dd>标签定义列表项目，但此项目会自动进行缩进处理。
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
这一节我们来学习有序列表，
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
<style>
p{
color:red;
}
</style>
</head>
<html>
<body>
<h2>这是一个有序列表</h2>
<p>默认有序列表</p>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>雪梨</li>
</ol>
<p>改变有序列表序号</p>
<ol start="50">
<li>苹果</li>
<li>香蕉</li>
<li>雪梨</li>
</ol>
</body>
</html>
运行效果：
从这个实例中看出，我们利用<ol>标签创建两个有序列表，默认输出是数字序号1、2、3，但我们可以改变它的序号，我们用start 属性来改变它的序号，在第二个列表中，我们使用了start="50",表示这个序号从50开始算起。
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等
在编辑html网页的时候，经常会遇到文本列表，这一节我们就来学习html的列表输出。请看下面的实例
实例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h2>这是一个无序列表</h2>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
</body>
</html>
运行效果：
从这个实例中我们看出，我们用<ul>标签创建一个无序列表，<li>标签定义列表值。
<ul>标签：创建无序列表，默认以黑色小圆点输出。
<li>标签定义列表值
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
这一节我们学习如何对表格的边框进行控制，我们用框架属性frame 来进行定义，下面我们来做一下实例。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
<style>
p{
color:red;
}
</style>
</head>
<html>
<body>
<h2>这是一个表格框架属性</h2>
<p>全边框frame=box</p>
<table frame="box">
<tr>
<td>全边框</td>
<td>全边框</td>
</tr>
<tr>
<td>全边框</td>
<td>全边框</td>
</tr>
</table>
<p>上边框frame=above</p>
<table frame="above">
<tr>
<td>上边框</td>
<td>上边框</td>
</tr>
<tr>
<td>上边框</td>
<td>上边框</td>
</tr>
</table>
<p>下边框frame=below</p>
<table frame="below">
<tr>
<td>下边框</td>
<td>下边框</td>
</tr>
<tr>
<td>下边框</td>
<td>下边框</td>
</tr>
</table>
<p>上下边框frame=hsides</p>
<table frame="hsides">
<tr>
<td>上下边框</td>
<td>上下边框</td>
</tr>
<tr>
<td>上下边框</td>
<td>上下边框</td>
</tr>
</table>
<p>左右边框frame=vsides</p>
<table frame="vsides">
<tr>
<td>左右边框</td>
<td>左右边框</td>
</tr>
<tr>
<td>左右边框</td>
<td>左右边框</td>
</tr>
</table>
</body>
<html>
运行效果：
从这个实例中看出，我们frame属性对表格的边框进行控制。
frame="box" 设置表格的全边框
frame="above" 设置表格的上边框
frame="below" 设置表格的下边框
frame="hsides" 设置表格的上下边框
frame="vsides" 设置表格的左右边框
| 表格 | 描述 |
|---|---|
| <table> | 定义表格 |
| <caption> | 定义表格标题。 |
| <th> | 定义表格的表头。 |
| <tr> | 定义表格的行。 |
| <td> | 定义表格单元。 |
| <thead> | 定义表格的页眉。 |
| <tbody> | 定义表格的主体。 |
| <tfoot> | 定义表格的页脚。 |
| <col> | 定义用于表格列的属性。 |
| <colgroup> | 定义表格列的组。 |
在我们编辑html网页的时候，需要对表格和文本进行对齐，这一节我们就来学习表格的对齐方式。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
<style>
pre{
font-size:20px;
color:red;
}
</style>
</head>
<html>
<body>
<h2>这是一个表格的对齐方式实例</h2>
<table border="1" width="400">
<tr>
<th align="center">水果项目</th>
<th align="right">一月</th>
<th align="right">二月</th>
</tr>
<tr>
<td align="center">苹果</td>
<td align="right">300kg</td>
<td align="right">258kg</td>
</tr>
<td align="center">香蕉</td>
<td align="right">480kg</td>
<td align="right">649kg</td>
</tr>
<td align="center">芒果</td>
<td align="right">461kg</td>
<td align="right">374kg</td>
</tr>
<th align="center">总计</th>
<th align="right">1161kg</th>
<th align="right">1361kg</th>
</tr>
</table>
<pre>
align="left" 左对齐
align="center" 居中对齐
align="right" 右对齐
</pre>
<body>
</html>
运行效果：
从这个实例中可以看出，我们对表格的数据进行对齐设置，水果项目为居中对齐，数量为右对齐。
表格的默认对齐方式：单元格标题为居中对齐，单元格文本为左对齐。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<h3>添加单元格颜色和图像</h3>
<table border="1" width="200px" height="100px">
<tr>
<td>背景颜色</td>
<td width="60%" align="center" bgcolor="red">红色</td>
</tr>
<tr>
<td>背景图像</td>
<td width="60%" align="center" background="img/sum.jpeg">图像</td>
</tr>
</table>
</body>
</html>
运行效果：
从这个实例中看出，我们对单元格进行背景颜色的设置和图像的设置，并且对单元格进行宽度的设置和文本的居中 。
border="值" 设置表格的边框
width="值" 设置表格的宽度
height="值" 设置表格的高度
align="方式" 设置表格的对齐方式。
在编辑html网页的时候，我们需要对表格进行美化，那我们如何来对表格进行背景颜色和图像的设置，这一节我们就来学习一下。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<h2>这是一个为表格添加背景颜色和图像的实例</h2>
<p>添加背景颜色</p>
<table border="1" width="150" height="100" bgcolor="red" cellpadding="15">
<tr>
<td>背景</td>
<td>颜色</td>
</tr>
<tr>
<td>bgcolor</td>
<td>red</td>
</tr>
</table>
<p>添加背景图像</p>
<table border="1" width="150" height="100"
background="img/sum.jpeg" cellpadding="15">
<tr>
<td>背景</td>
<td>图像</td>
</tr>
<tr>
<td>background</td>
<td>img/sum.jpeg</td>
</tr>
</table>
</body>
</html>
运行效果：
从这两个表格可以看出，第一表格我们为它的前景添加了红色，第二个表格我们为它的背景添加了图像。
bgcolor="颜色" 为表格设置背景颜色
background="路径" 为表格设置背景图像
cellpadding="值" 为表格设置边距
评论