专注Java教育14年 全国咨询/投诉热线:400-8080-105
动力节点LOGO图
始于2009,口口相传的Java黄埔军校
首页 hot资讯 详解HTML table标签

详解HTML table标签

更新时间:2021-03-24 17:25:49 来源:动力节点 浏览748次

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的其他标签内容都有介绍,从标签的格式到标签的属性都作了详细的讲解,即使零基础的你也能随学随会。

提交申请后,顾问老师会电话与您沟通安排学习

免费课程推荐 >>
技术文档推荐 >>