表格标签和列表标签

表格标签

表格标签的主要作用

表格主要用于显示、展示数据，它可以让数据显示的非常规整，可读性更好，后台显示数据的时候，表格能够把繁杂的数据表现的有条理。

表格不是用于布局页面的，而是用来展示数据的。

表格的基本语法

<table>
    <tr>
        <td>单元格内的文字</td>
        ...
    </tr>
    ...
</table>

1. <table></table>是用于定义表格的标签
2. <tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。
3. <td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>中。

<table>
    <tr>
	<td>学号</td>
	<td>姓名</td>
	<td>成绩</td>
    </tr>
   ...
</table>

效果如下：

表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里的文本内容加粗居中显示。

<th>标签表示HTML表格的表头部分。

<table>
    <tr>
	<th>学号</th>
	<th>姓名</th>
	<th>成绩</th>
    </tr>
    ...	
</table>

效果如图：

表格属性

表格属性在实际开发中并不常用，在后面的css样式可以设置更方便更美观。在学习过程中了解一下。

表格结构标签

由于表格可能会很长，为了更好的表达，可以将表格分割成表格头部和表格主体两大部分。

在表格标签中，分别用<thead>标签表示表格的头部区域，<tbody>标签表示表格的主体区域。

注意：<thead>表示的是表格的整个头部区域，<th>作用于头部某一个单元格。

<thead>内部必须包含<tr>标签，一般是位于第一行。

<thead>标签与<tbody>标签必须放在<table>标签的范围内。

合并单元格

在某些情况下，可以把多个单元格合并为一个单元格，目前只用学会最简单的合并单元格就可以了。

• 合并单元格的方式

1. 跨行合并：rowspan="合并单元格的个数"
2. 跨列合并：colspan="合并单元格的个数"
   

合并单元格需要写在目标单元格：

1. 跨行：最上侧单元格为目标单元格，写合并代码；
2. 跨列：最左侧单元格为目标单元格，写合并代码。

<table border="1">
    <tr>
	<td colspan="3">学生成绩表</td>
    </tr>
    <tr>
	<th>学号</th>
	<th>姓名</th>
	<th>成绩</th>
    </tr>
    ...		
</table>

效果如图：

列表标签

在一开始学习表格标签的时候已经知道了，表格标签是用于显示数据的，而列表标签是用来布局的。

列表最大的特点就是整齐、整洁、有序，它作为自由会更自由和方便。

HTML专门提供了一个列表元素。使用这个元素，浏览器会知道这个文本是一个列表，就能用最佳方式来显示。

根据使用情景的不同，列表可以分为三大类：无序列表、有序列表和自定义列表。

创建一个列表，需要把每个列表项放在单独的<li>标签中，每个列表项用一对<li></li>标记包围。

有序列表

如果使用一个<ol>元素包围列表项，则这些列表项将作为一个有序列表显示。

无序列表

如果使用一个<ul>元素包围列表项，则这些列表项将作为一个无序列表显示。

注意：<ol>元素与<ul>元素中只能嵌套<li></li>，输入其它标签或者文字都是不允许的。

<li></li>之间可以容纳所有元素。

无序列表在实际开发中搭配css样式会经常被用到。

自定义列表

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

在HTML标签中，<dl>标签用于定义描述列表或定义列表，该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。

基本语法：

<dl>
    <dt>关注我们</dt>
    <dd>新浪微博</dd>
    <dd>微信公众号</dd>
</dl>

运行效果如图：

自定义列表配合css样式也会经常在开发工作中用到。

注意：

1. <dl></dl>里面只能包含<dt>和<dd>标签；
2. <dt>和<dd>标签个数没有限制，一般是一个<dt>标签对应多个<dd>标签。