HTML5 排列页面内容（2）

三.表格标签
1.创建表格

标签	描述
table	表格标签
tr	行标签
td	单元格标签

语法

<table border="1">
	<tr>
		<td>单元格内文字</td>
		<td>单元格内文字</td>
	</tr>
	<tr>
		<td>单元格内文字</td>
		<td>单元格内文字</td>
	</tr>
</table>

为了显示表格的轮廓，通过border属性来设置表格边框的宽度

2.创建不规则表格
表格可以实现行列合并，只需要在td标签中加入colspan或rowspan属性。colspan表示跨越的列数，rowspan表示跨越的行数。
①.跨列
跨列是指单元格的横向合并，实现单元格在水平方向上跨多列。
语法

<table>
	<tr>
		<td colspan="所跨的列数">单元格内容</td>
	</tr>
</table>

示例

 <table border="1">
        <tr>
            <td colspan="2">单元格内文字</td>
            <td>单元格内文字</td>
        </tr>
        <tr>
            <td>单元格内文字</td>
            <td>单元格内文字</td>
            <td>单元格内文字</td>
        </tr>

②.跨行
单元格除了可以在水平方向上跨列，还可以在垂直方向上跨列，跨行是指单元格在垂直方向上合并
语法

<table>
	<tr>
		<td rowspan="所跨的列数">单元格内容</td>
	</tr>
</table>

示例

  <table border="1">
        <tr>
            <td rowspan="2">单元格内文字</td>
            <td>单元格内文字</td>
        </tr>
        <tr>
            <td>单元格内文字</td>
        </tr>
    </table>

③.跨行跨列

    <table border="1">
        <tr>
            <td rowspan="2">单元格内文字</td>
            <td>单元格内文字</td>
            <td>单元格内文字</td>
        </tr>
        <tr>
            <td colspan="2">单元格内文字</td>
        </tr>
    </table>