HTML5 列表和表格

无序列表

• 列表中各个元素在逻辑上没有先后顺序，没有级别之分
• 无序列表中，列表项之间属于并列关系
• 每个列表项独占一行
• 无序列表是使用最广泛的列表
• 无序列表语法：

<ul>无序列表开始
	<li></li>每一个列表项
</ul>无序列表结束

有序列表

• 列表中各个元素在逻辑上有先后顺序
• 有序列表中，列表项之间属于并列关系
• 每个列表项独占一行
• 有序列表语法：

<ol>有序列表开始
	<li></li>每一个列表项
</ol>有序列表结束

自定义列表

• 自定义列表是两个层次的列表，由三种标签构成
• 基本语法：

<dl></dl>表示自定义列表的开始和结束
<dt></dt>表示列表标题的开始和结束
<dd></dd>表示每个列表现

///
<dl>
	<dt>东北三省</dt>
	<dd>辽宁</dd>
	<dd>吉林</dd>
	<dd>黑龙江</dd>
	
	<dt>西南三省</dt>
	<dd>云南</dd>
	<dd>贵州</dd>
	<dd>四川</dd>
</dl>

东北三省

辽宁

吉林

黑龙江

西南三省

云南

贵州

四川

表格

创建表格

• table标签用来定义表格
• tr标签表示表格中的一行
• th标签表示表头单元格，文本加粗、居中
• td标签表示表格中的一个单元格，文本左对齐
• 表格的单元格中可以放入任何元素

<table border="1">
	<tr>
		<th>表头</th>
		<td>表格一</td>
		<td>表格二</td>
	</tr>
</table>

表格合并

• colspan：横向合并单元格，属性值为正整数，表示该单元格横向合并的列数，保留要合并的第一个单元格，删除其他单元格
• 语法：

<table border = "1">
    <tr><th colspan="3">合并表格</th></tr>
    <tr><td>表格1</td><td>表格2</td><td>表格3</td></tr>
</table>

• rowspan：纵向合并单元格，属性值为正整数，表示该单元格纵向合并的列数
• 语法：

<table border = "1">
    <tr><th colspan="3">合并表格</th></tr>
    <tr><td rowspan="3">表格1</td><td>表格2</td><td>表格3</td></tr>
    <tr><td>表格1</td><td>表格2</td></tr>
    <tr><td>表格1</td><td>表格2</td></tr>
</table>

其他

• caption标签：给表格添加标题，用来制定表格的标题或者说明；是table的子元素，必须放在table中使用

表格规范的写法应该包含以下三部分内容，主要结合CSS、JavaScript来使用

• thead标签：表示表格的表头
• tfoot标签：表示表格的页脚
• tbody标签：表示表格的主体

<table border = "1">
    <thead style="background: blue">
        <tr><th colspan="3">合并表格</th></tr>
    </thead>
    <tbody style="background: red">
        <tr><td>表格1</td><td>表格2</td><td>表格3</td></tr>
        <tr><td>表格1</td><td>表格2</td><td>表格3</td></tr>
        <tr><td>表格1</td><td>表格2</td><td>表格3</td></tr>
    </tbody>
    <tfoot>
        <tr><td colspan="3">备注：</td></tr>
    </tfoot>
</table>

• colgroup标签：用来组合列，它的span属性可以设置组合列的数目；它可以包含一个子元素col；colgroup元素为table元素的子元素，必须放在caption元素之前

<table border = "1">
    <colgroup span = "1" style="width: 100px"></colgroup>
    <colgroup span = "2" style="width: 200px"></colgroup>
    <colgroup span = "1" style="width: 150px"></colgroup>
    <tr><th colspan="4">合并表格</th></tr>
    <tr><td>表格1</td><td>表格2</td><td>表格3</td><td>表格4</td></tr>
    <tr><td>表格1</td><td>表格2</td><td>表格3</td><td>表格4</td></tr>
    <tr><td>表格1</td><td>表格2</td><td>表格3</td><td>表格4</td></tr>
</table>

• col标签：用来设定列的属性，它也可以使用span属性；一般作为colgroup元素的子元素配合使用

    <table border = "1">
        <colgroup span = "1" style="width: 100px">
            <col style="background: red">
        </colgroup>
        <colgroup span = "2" style="width: 200px">
            <col style="background: aqua">
            <col style="background: chocolate">
        </colgroup>
        <colgroup span = "1" style="width: 250px;">
            <col style="background: green;">
        </colgroup>
        <tr><td>表格1</td><td>表格2</td><td>表格3</td><td>表格4</td></tr>
        <tr><td>表格1</td><td>表格2</td><td>表格3</td><td>表格4</td></tr>
        <tr><td>表格1</td><td>表格2</td><td>表格3</td><td>表格4</td></tr>
    </table>