首页 > 代码库 > HTML学习笔记3—表格
HTML学习笔记3—表格
一、格式:
<table>
<caption>表格的标题</caption>
<tr>
<th>标题栏</th>
<th>标题栏</th>
<th>标题栏</th>
</tr>
<tr>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
</tr>
<tr>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
</tr>
<tr>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
</tr>
</table>
<table></table>用来声明表格开始与结束
<tr>…</tr>用来设置表格的行
<th>…</th>用来设置标题栏位
<td>…</td>用来设置表格的列
二、表格的属性
1.<table>标签下的属性
属性名称 属性值 说明
border 像素 设置表格的外边线
cellspacing 像素/百分比 设置存储格框线宽度
cellpadding 像素/百分比 设置数据与框线的距离
width 像素/百分比 设置表格宽度
height 像素/百分比 设置表格高度
align left 表格左对齐(默认)
center 表格往中靠
right 表格网右靠
bgcolor 英文/十六进制 表格的背景颜色
background URL 表格的背景图片
bordercolor 英文/十六进制 边框的颜色
bordercolorlight 同上 边框的亮色
bordercolordark 同上 边框的暗色
2.<tr><th><td>标签下的常用属性
属性名称 属性值 说明
width 像素/百分比 设置宽度
height 像素/百分比 设置高度
bgcolor 英文/十六 数据栏的颜色设置
align(水平) left 数据靠左对齐
center 数据居中对齐
right 数据靠右对齐
valign(垂直) top 数据靠上对齐
middle 数据居中对齐
bottom 数据靠下对齐
nowrap 不在单元格中换行
3.合并单元格
属性名称 属性值 说明
colspan 数字 向两边扩展栏位
rowspan 数字 向下扩展栏位
如:<th colspan="2">合并当前单元格和右边的单元格
<td rowspan="5">合并当前单元格和当前单元格下面的四个单元格
4.<caption>标签下的常用属性
属性名称 属性值 说明
align top 标题在表格上方
bottom 标题在表格下方
本文出自 “Raffaele” 博客,请务必保留此出处http://raffaele.blog.51cto.com/6508076/1553943
HTML学习笔记3—表格