html中列表、表格、合并单元格

列表：

分为无序列表、有序列表、自定义列表

无序列表：

	  <ul> <!-- ul标签中只能容纳li标签，li标签里面可以容纳其他标签 -->
    	<li>列表项1</li>
    	<li>列表项2</li>
    	<li>列表项3</li>
    	...
      </ul>

有序列表：

	<ol> <!-- 使用ol有序列表后，li每项会自动在前面加上序号，ol标签中只能容纳li标签，li标签里面可以容纳其他标签-->
      <li>中国</li>
      <li>美国</li>
      <li>英国</li>
    </ol>

自定义列表：

	<dl>
      <dt>分类1</dt>
      <dd>分类1第1项</dd>
      <dd>分类1第2项</dd>
      ...
      <dt>分类2</dt>
      <dd>分类2第1项</dd>
      <dd>分类2第2项</dd>
      ...
    </dl>

表格table：

表格主要是显示数据的，不适合做布局，但是很久以前的网站有用它做布局。

	<table> <!-- table标签实际就是一个四方块框框，里面有单元格才会显示出表格的样子 -->
      <caption>信息表</caption> <!-- 表格标题 -->
      <thead> <!-- 定义表格的头部 -->
      	  <tr> <!-- 定义行 -->
        		<th>姓名</th> <!-- 定义表头，表头文本有加粗居中效果 -->
       	 		<th>年龄</th>
        		<th>性别</th>
      		</tr>
      </thead>
      <tbody> <!-- 定义表格的主体 -->
          <tr> <!-- 定义行 -->
        		<td>小明</td> <!-- 定义单元格，表格里面没有列-->
        		<td>18</td>
        		<td>男</td>
      		</tr>
        	<tr>
        		<td>小红</td>
        		<td>17</td>
        		<td>女</td>
      		</tr>
      </tbody>
      <tfoot><!-- 定义表格底部 -->
      	<tr>
        		<td>信息来源</td>
        		<td>虚构数据</td>
      		</tr>
      </tfoot>
    </table>

表格属性：

合并单元格：

跨行合并：rowspan (把相邻的几行合并为一行) 跨列合并：colspan（把相邻的几列合并为一列）

	<table border="1" cellpadding="0" cellspacing='0'>
    		<tr>
    			<td>1</td>
    			<td colspan='2'>2&nbsp;3</td><!-- 合并n列，这行的列数减少n-1 -->
    		</tr>
    		<tr>
    			<td rowspan='2'>4<br/>7</td><!-- 合并n行，这列的行数减少n-1 -->
    			<td>5</td>
    			<td>6</td>
    		</tr>
    		<tr>
    			<td>8</td>
    			<td>9</td>
    		</tr>
    </table>

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者 删除。
笔者：苦海