JAVAWeb html表格
表格的基本结构
一、标记
1、基本格式
<table 属性1=“属性值1” 属性2=“属性值2”......>表格内容</table>
<table>
<tr>
<td>单元格1</td>
<td>单元格1</td>
</tr>
</table>
2、table标记的属性
(1)、width属性
(2)、height属性
(3)、border属性
表示表格外边框的长度
(4)、align属性:表格显示的位置
a、left居左
b、center居中
c、right居右
**默认值left**
(5)、cellspacing属性
单元格之间的间距,默认为2px,单位像素
<table cellspacing="">
</table>
(6)、cellpadding属性
单元格内容与单元格边框的显示距离,单位像素
<table cellpadding="">
</table>
(7)、frame属性
a、作用
b、属性
(8)、rules属性
a、作用
控制是否显示以及如何显示单元格之间的分割线
b、属性
1)none(默认值):表示无分割线
2)all表示包括所有分割线
3)rows:表示仅有行分割线
4)clos:表示仅有列分割线
5)groups:表示仅在行组和列组之间有分割线
3、caption属性
(1)、什么时候使用
如果表哥需要使用标题,那么可以使用caption标记
(2)、如何正确使用
caption属性的插入位置,直接位于table属性之后,tr表格行之前
(3)、align属性
a、top:标题放在表格上部
b、bottom:标题放在表格下部
c、left:标题放在表格左部
d、right:标题放在表格右部
<table cellspacing="1" with="80" align="center" border="0">
<caption>华府</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td>小明</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>小明</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>小明</td>
<td>男</td>
<td>20</td>
</tr>
<tbody>
<tfoot align="center" bgcolor="">
<tr>
<td colspan="3">一共三人</td>
</tr>
</table>
华府
小花 | 男 | 20 |
小花 | 男 | 20 |
小花 | 男 | 20 |
姓名 | 性别 | 年龄 |
一共三人 |
4、tr标记
定义表格的一行,对于每一个表格行,都是由一对<tr>....</tr>标记表示,每一行<tr>标记内可以嵌套多个<td>或者<th>标记。
5、th与td区别
1)<td>和<th>都是单元格的标记,其必须嵌套在<tr>标签内,成对出现
2)<th>标记通常位于首行或者首列,<th>中的文字默认会被加粗,<td>不会
3)<td>是数据标记,表示该单元格的具体数据
4)两者标记的属性是一样的
6、thead、tbody、tfoot的使用
为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用TBODY可以优化显示。如果表格很长,用tbody分段,可以一部分一部分地显示,不用等整个表格都下载完成
TBODY包含行的内容下载完优先显示,不必等待表格结束.另外,还需要注意一个地方。表格行本来是从上向下显示的。但是,应用了thead/tbody/tfoot以后,就“从头到脚”显示,不管你的行代码顺序如何。也就是说如果thead写在了tbody的后面,html显示时,还是以先thead后tbody显示。
thead 表格的头 用来放标题之类的东西
tbody 表格的身体 放数据本体
tfoot 表格的脚 放表格的脚注之类