表格
在网页中表格是一种经常使用到得设计结构，就像表格的内容中可以包含任何的数据，如文字、图像、表单、超链接、表格等等，所有在HTML中可以使用的数据，都可以被设置在表格中，所以有关表格设置的标记与属性也特别多。
通过本章节对表格的学习，需要掌握：1如何设置不同样式的表格；2如何设置不规则表格；3如何运用表格进行页面布局。
表格的基本格式
格式:
<table>
<tr>…
<th>… </th>
<th>… </th>
<th>… </th>
</tr>
<tr>
<td>… </td>
<td>… </td>
<td>… </td>
</tr>
</table>
功能: <table>…</table>用来声明表格开始与结束.
<tr>…</tr>用来设置表格的行.
<th>…</th>用来设置表头栏.
<td>…</td>用来设置数据栏.
标签下的属性
属性名称 属性值 说明
border 像素 设置表格的边框
cellspacing 像素 绝对值，单元格之间的距离
百分比 相对值，单元格之间的距离
cellpadding 像素 绝对值，单元格内容与边框之间的距离
百分比 相对值, 单元格内容与边框之间的距离
width 像素 绝对值,像素表示表格宽度
百分比 相对值,百分比表表格宽度
height 像素 绝对值,像素表示表格高度
百分比 相对值,百分比表示表格高度
align left 表格居左(默认)
center 表格居中
right 表格居右
bgcolor 英文/十六 表格的背景颜色
background URL 表格的背景图片
bordercolor 英文/十六 边框的颜色
bordercolorlight 同上 边框的亮色（IE支持）
bordercolordark 同上 边框的暗色
标签下的常用属性
属性名称 属性值 说明
width 像素 绝对设置,以像素值设置宽 百分比 相对设置,以百分比设置宽
height 像素 绝对设置,以像素值设置高
百分比 相对设置,以百分比设置宽
bgcolor 英文/十六 数据栏的颜色设置
align(水平方向) left 数据靠左
center 数据靠中
right 数据靠右
valign(垂直方向) top 数据靠上
middle 数据靠中
bottom 数据靠下
nowrap 无 在单元格中换行
表格的标题设置和表头设置
（1）表格的标题：
<table>
<caption>….</caption>
</table>
<caption>下的属性值有:
属性名称 属性值 说明
align top 标题在表格上方
bottom 标题在表格下方
（2）表头设置<th>
结构化格式：
<table>
<thead>……</thead> --------表头区
<tbody>……</tbody> --------表体区
………………………
<tfoot>……</tfoot> --------表尾区
</table>
表格的边框设置
属性名称 属性值 说明
border 像素 设置表格的边框
cellspacing 像素 绝对值，单元格之间的距离
百分比 相对值，单元格之间的距离
cellpadding 像素 绝对值，单元格内容与边框之间的距离
百分比 相对值, 单元格内容与边框之间的距离
属性名称 属性值 说明
bordercolorlight 英文/十六 边框的亮色（IE支持）
bordercolordark 英文/十六 边框的暗色（IE支持）
属性名称 属性值 说明
frame void 不要显现表格的边线
该属性必须在border的属性值不为0的状态下! |
above 只要显现出表格的上边线
below 只显现出表格的下边线
hsides 只显示表格的上下边线
vsides 只显现表格的左右边线
lhs 只显现表格的左边线
rhs 只显现表格的右边线 border/box 会显现出表格的所有边线
rules rows 只显示出横行的格框线
cols 只显示出直行的格框线
all 显示全部格框线
groups 表示列组合水平部分
none 不显示任何格框线
表格的对其方式
（1）表格的对其方式
属性名称 属性值 说明
align left 表格居左(默认)
center 表格居中
right 表格居右
（2）单元格内容的对其方式
表格大小、背景颜色、背景图案的设置
属性名称 属性值 说明
width 像素 绝对值,像素表示表格宽度
百分比 相对值,百分比表表格宽度
height 像素 绝对值,像素表示表格高度
百分比 相对值,百分比表示表格高度
bgcolor 英文/十六 表格的背景颜色
background URL 表格的背景图片
合并单元格
属性名称 属性值 说明
colspan 数字 向两边扩展栏位
rowspan 数字 向下扩展栏位
嵌套表格的应用
框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架
框架的基本结构
格式：
<frameset>
<frame>
<frame>
<frame>
</frameset>
功能说明:<frameset>用来设置多窗框结构的声明
<frameset>下的属性：
属性名称 属性值 说明
cols 像素 设置直排的多窗框环境
百分比 同上
rows 像素 设置横排的多窗框环境
百分比 同上
属性格式：
<frameset cols=”120,80,120”>
<frameset cols=”20%,40%,20%”>
<frameset cols=”40%,*,*”>
<frameset rows=”120,80,120”>
<frameset rows=”20%,40%,20%”>
<frameset rows=”20%,*,*”>
<frame>下的属性：
属性名称 属性值 说明
src URL 链接的页面
name 自定义 框架名称
noresize true 允许浏览器自行改变框架大小
false 不允许
scrolling yes 不管网页内容的大小，都出现滚动条
no 不管网页内容的大小，都不现滚动条
auto 浏览器自动判断，是否需要滚动
marginheight 像素 设置垂直方向，窗体内容与边界的距离
marginwidth 像素 设置水平方向，窗体内容与边界的距离
frameborder 0\1 不出现框体边/出现窗体边线
属性格式：
<frame src=”URL”>
<frame noresize>
框架的嵌套
格式：
<frameset rows="20%,80%">
<frame src="URL">
<frameset cols="20%,80%">
<frame src="URL">
<frame src="URL">
</frameset>
</frameset>
注意这里没有（<body>标签）
内联框架
格式:<iframe>…</iframe>
功能: 它是个内联框架，是在页面里生成个内部框架。
属性名称 属性值 说明
src URL 链接的页面
height 像素/% 绝对/相对 高度
width 像素/% 绝对/相对 宽度
scrolling yes 不管网页内容的大小，都出现滚动条
no 不管网页内容的大小，都不现滚动条
auto 浏览器自动判断，是否需要滚动条
frameborder 0\1 不出现框体边/出现窗体边线
标签：百分比,表格,Day02,单元格,像素,-------,HTML,设置,属性 From： https://blog.51cto.com/u_12277263/5984191