详解HTML table标签

table即表格,表格是由行和列排列而成的一种结构。HTML表格由HTML table标签以及一个或多个tr、th或td标签组成：

HTML table标签用来定义表格，整个表格包含在<table>和</table>标签中；

tr标签用来定义表格中一个行，它是单元格的容器，每行可以包含有多个单元格，由<tr>和</tr>标签表示；

td标签和th标签用来定义单元格，所有单元格都在tr标签内，每个单元格由一对<td>和</td>标签或一对<th>和</th>标签表示，具体的表格内容放置在这一对td标签或th标签之中，其中th标签中的内容默认以粗体、居中的方式显示。其语法如下： 

<table>

    <tr>

        <th>1行1列的内容</th>

        <th>1行2列的内容</th>

        …

    </tr>

    <tr>

        <td>2行1列的内容</td>

        <td>2行2列的内容</td>

        …

    </tr>

    …

</table>

<table是<tr的上层标签

<tr必须在一个<table</table里面,它不能单独使用,相当于<table的属性标签.

<table标示一个表格,<tr标示这个表格中间的一个行，<td、<th标示行中的一个列,需要嵌套在<tr</tr中间。

HTML table标签中包含的元素：

<caption></caption>：表头信息。

<tr></tr> ：定义一个表格行；

<th></th> ：定义一个表格头；若是纯文字，默认会以粗体的样式表现。

<tbody></tbody> ：可以理解为表格的内容区域，在Chrome、FF浏览器通过DOM进行表格动态插入行的时候，要使用这个。如果不进行DOM操作，可不用添加。

<td></td> ：定义一个单元格；

table标签的属性：

1.border ：定义表格的边框宽度，默认为0，即无边框。实际上border标签属性不仅设置围绕表格边框的宽度，还为每个单元格添加宽度为1px的边框；实际开发中不建议使用border标签属性实现边框效果，建议通过为table、th和td设定border样式属性实现。

2.width标签属性：设定表格的宽度，不建议通过width标签属性设置表格宽度，建议向table标签添加width样式属性进行设置。

3.align标签属性：指定表格相对于周围标签的对齐方式，不建议通过align标签属性设置表格相对于周围标签的对齐方式，建议向table标签添加样式属性进行设置。

4.cellspacing 标签属性：设定单元格之间的间距（单位：px）。

不建议通过cellspacing标签属性设置单元格之间的间距，建议向table标签添加border-spacing样式属性进行设置。

5.cellpadding标签属性：设定单元边沿与单元内容之间的间距（单位：px）

不建议通过cellpadding标签属性设置单元边沿与单元内容之间的间距，建议向td或th标签添加padding样式属性来实现。

5.title ：表格的提示信息，当鼠标移到表格上方时，所提示的信息。

th、td 属性：

colspan : 表示横向合并单元格 ( )

rowspan ：表示纵向合并单元格 (  )

 

示例：

<table border=0 title="测试">

    <caption> 表格标题</caption>

    <tr>

        <th>姓名</th>

        <th>年龄</th>

    </tr>

    <tr>

        <td>张三</td>

        <td>22</td>

    </tr>

    <tr>

        <td><input type=text /></td>

        <td><input type=text /></td>

    </tr></table>

上述就是HTML table标签的全部内容，当然还有未涉及到的多半都是我们初级接触不到的内容。在本站的HTML教程中，对HTML的其他标签内容都有介绍，从标签的格式到标签的属性都作了详细的讲解，即使零基础的你也能随学随会。