新人学习笔记之（表格标签）

一、表格标签的作用

1.表格主要用于显示、展示数据，因为它可以让数据显示的非常规整，可读性非常好。特别是后台显示数据的时候，能够熟练地运用表格就显得十分重要

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

二、表格的基本用法

1.<table></table>是用来定义表格的标签

<table border="1" align="center" cellpadding="10" cellspacing="0" width="" height="">
</table>

2.<tr></tr>用于定义表格中的行，必须嵌套在<table></table>中

<table border="1" align="center" cellpadding="10" cellspacing="0" width="" height="">
    <tr>
    </tr>
</table>

3.<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>中

<table border="1" align="center" cellpadding="10" cellspacing="0" width="" height="">
        <tr>
            <td>***</td>
            <td>男</td>
            <td>20</td>
        </tr>
    </table>

4.字母td指表格数据，即数据单元格的内容

三、表头单元格标签

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

2.<th></th>表示表格的表头部分（table head）的缩写

<table border="1" align="center" cellpadding="10" cellspacing="0" width="" height="">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </table>

3.表头单元格也是单元格，常用于表格第一行，突出重要性，表头单元格里的文字会加粗居中显示

四、表格属性

1.表格标签这部分属性实际开发不常用，后面通过css来设置

2.

属性名	属性值	描述
align	left、 center、 right	规定表格相对周围环境的对齐方式
border	1或**	规定表格单元格是否有用边框默认为** 表示没有边框
cellpadding	像素值	表格里的内容与边框之间的距离，默认 为1
cellspacing	像素值	规定单元格之间的空白
width	像素值或 百分比	规定表格的宽度

<table border="1" align="center" cellpadding="10" cellspacing="0" width="" height="">
</table>

五、表格的结构标签

1.<thead></thead>:用于定义表格头部。<thead>内部必须有<tr>标签。一般是位于第一行。

2.<tbody></tbody>:用于定义表格的主体，主要用于放数据本体。

六、合并单元格

1.合并单元格方式：

（1）跨行合并：rowspan=“合并单元格个数”

<table border="1" align="center" cellpadding="10" cellspacing="0" width="" height="">
    <tr>
        <td rowspan="3">***</td>
    </tr>
</table>

 （2）跨列合并：colspan=“合并单元格个数”

<table border="1" align="center" cellpadding="10" cellspacing="0" width="" height="">
    <tr>
        <td colspan="3">***</td>
    </tr>
</table>

2.合并单元格三部曲

（1）先确定跨行还是跨列合并

（2）找到目标单元格，写上合并方式=合并的单元格数量。比如：<td rowspan="2"></td>

（3）删除多于单元格（必须删除，不然会多出来，达不到效果）