分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

HTML培训课程-------Day02(表格和框架)

发布时间:2023-09-06 01:19责任编辑:赖小花关键词:HTML

表格

在网页中表格是一种经常使用到得设计结构,就像表格的内容中可以包含任何的数据,如文字、图像、表单、超链接、表格等等,所有在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>用来设置数据栏.

<table>标签下的属性

属性名称 属性值 说明

border 像素 设置表格的边框

cellspacing 像素 绝对值,单元格之间的距离

百分比 相对值,单元格之间的距离

cellpadding 像素 绝对值,单元格内容与边框之间的距离

百分比 相对值, 单元格内容与边框之间的距离

width 像素 绝对值,像素表示表格宽度

百分比 相对值,百分比表表格宽度

height 像素 绝对值,像素表示表格高度

百分比 相对值,百分比表示表格高度

align left 表格居左(默认)

center 表格居中

right 表格居右

bgcolor 英文/十六 表格的背景颜色

background URL 表格的背景图片

bordercolor 英文/十六 边框的颜色

bordercolorlight 同上 边框的亮色(IE支持)

bordercolordark 同上 边框的暗色

<tr><th><td>标签下的常用属性

属性名称 属性值 说明

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=”2

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved