HTML之表格与表单

表格

一.表格的格式

<table>		//定义表格
	<tr>	//行标签，必须放在<table></table>标签中
		<th></th>	//单元格标签，表示列标题，文字自动加粗并居中，必须放在<tr></tr>标签中
		<td></td>	//<td></td>：单元格标签，必须放在<tr></tr>标签中
	</tr>
</table>

二.表格标签

1.table标签 ：定义一个表格

属性	作用
border	边框
cellspacing	单元格之间的距离
cellpadding	单元格内容和边框线之间的距离
width	表格高度
height	表格高度

2.tr行标签：必须放在table标签中

属性	作用
align	水平对齐方式(left、center、right)
valign	垂直对齐方式(top,middle,mottom)
bgcolor	行的背景色

3.th单元格标签：表示列标题，文字自动加粗并居中，必须放在tr标签中

属性	作用
width	列宽

4.td单元格标签：必须放在tr标签中

属性	作用
width	列宽

5.结构标签：
       在HTML中表格是作为一个整体来解析的，运用表格结构标签，解析一部分就显示一部分，不用等表格全部加载完再显示，可以优化使用体验；而且使表格结构明显易懂

<thead></thead>：表头部（放表格的标题之类）
<tbody></tbody>：表主体（放表格主体数据）
<tfoot></tfoot>：表脚注（放表格脚注）

       注意：结构标签会影响跨行
       thead、tfoot、tbody元素是对表格进行分组，分别代表表格标题、表格的页脚、表格的主体部分，因为已经进行了分组，所以组和组之间是不可以跨行操作的

表格示例：

<table border="2">
        <thead>
            <tr bgcolor = "yellow">
                <th width="40">姓名</th>
                <th width="40">年龄</th>
                <th width="40">性别</th>
                <th width="40">民族</th>
                <th width="40" colspan="2">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr align="center">
                <td>郭越</td>
                <td>18</td>
                <td>男</td>
                <td>汉族</td>
                <td>
                    <a href="#">删除</a>
                </td>
                <td>
                    <a href="#">修改</a>
                </td>
            </tr>
            <tr align="center">
                <td>郭越</td>
                <td>18</td>
                <td>男</td>
                <td>汉族</td>
                <td>
                    <a href="#">删除</a>
                </td>
                <td>
                    <a href="#">修改</a>
                </td>
             </tr>
            <tr align="center">
                <td>郭越</td>
                <td>18</td>
                <td>男</td>
                <td>汉族</td>
                <td>
                    <a href="#">删除</a>
                </td>
                <td>
                    <a href="#">修改</a>
                </td>
            </tr>
       </tbody>
</table>

效果展示：

6、合并单元格：

单元格跨列：colspan="列数"
   
单元格跨行：rowspan="行数"

注意：在使用时与结构标签不要冲突
表格示例：

<table border="2">
        <tr>
            <th