JavaWeb中关于table标签

时间:2024-05-19 16:53:56

table标签介绍

HTML表格由table标签以及一个或多个tr、th或td标签组成:

table标签用来定义表格,整个表格包含在<table>和</table>标签中;

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

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

 

caption:设置表格的标题

JavaWeb中关于table标签

JavaWeb中关于table标签

 

border属性:

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

1.没有border时

JavaWeb中关于table标签

JavaWeb中关于table标签

2.<table border="10%"> 时

JavaWeb中关于table标签

JavaWeb中关于table标签

3.<table border="100%">时

JavaWeb中关于table标签

JavaWeb中关于table标签

width属性:设定表格的宽度

1.width="50%"时

JavaWeb中关于table标签

JavaWeb中关于table标签

2.width="100%"时

JavaWeb中关于table标签

JavaWeb中关于table标签

align属性:指定表格相对于周围标签的对齐方式

JavaWeb中关于table标签

1.align="right"

JavaWeb中关于table标签

2.align="center"

JavaWeb中关于table标签

cellspacing 标签属性:设定单元格之间的间距(单位:px)

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

 

1.未设置时

 

JavaWeb中关于table标签

2.cellspacing="0"时

JavaWeb中关于table标签

3.cellspacing="20"时

JavaWeb中关于table标签

cellpadding标签属性:设定单元边沿与单元内容之间的间距(单位:px)

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

 

1.cellpadding="20"时

JavaWeb中关于table标签

 

bgcolor标签属性

JavaWeb中关于table标签

不建议通过bgcolor标签属性设置表格背景颜色,建议向table标签添加background-color样式属性实现这一效果

 

1.bgcolor="red"时

JavaWeb中关于table标签

JavaWeb中关于table标签

border-collapse样式属性:设置表格的边框是否被合并为一个单一的边框

JavaWeb中关于table标签

1.style="border-collapse:collapse;" 时

设置前

JavaWeb中关于table标签

设置后

JavaWeb中关于table标签

JavaWeb中关于table标签

关于th和td的属性

1.设置文字颜色(用style)

JavaWeb中关于table标签

JavaWeb中关于table标签

2.colspan(所占的列数)

colspan="3"时

JavaWeb中关于table标签

JavaWeb中关于table标签

 

3.rowspan(所占的行数)

rowspan="3"时

JavaWeb中关于table标签

JavaWeb中关于table标签