表格与链接标记

原创
2013/03/01 10:55
阅读数 151

1、表格:

(1)表格中可以包含任何内容,所以在使用DIV+CSS之前,网页设计师是使用表格对网页进行排版与布局

(2)表格基本结构:

属性

说明

<table>...</table>

定义表格

<tr>...</tr>

定义表行

<td>...</td>

定义表列(单元格)

<th>...</th>

定义标题栏(文字加粗,居中)

2、表格的属性:<table>

属性

用途

<table bgcolor=””>

设置表格的背景颜色

<table background=””>

设置表格的背景图片

<table border=””>

设置边框的宽度,若不设置此属性,则边框宽度默认为0

<table cellpadding=””>

设置表格单元格边框与其内部内容之间空间的大小。默认为2(表格边距)

<table cellspacing=””>

设置表格单元格之间空间的大小。默认为2(单元格间距)

<table bordercolor=””>

设置表格边框的颜色

<table bordercolorlight=””>

设置边框亮部分的颜色(当border的值大于等于1时才有用)

<table bordercolordark=””>

设置边框暗部分的颜色(当border的值大于等于1时才有用)

<table align=””>

设置表格的对齐方式(left=左,center=居中,right=右)

<table width=””>

设置表格的宽度,单位用据对像素值或总宽度的百分比

3、editpuls代码中,缩进技巧:tab,向右缩进;shift+tab,向左缩进

4、列(单元格)的属性:<td>

属性

用途

<td width=””>

设置单元格的宽度

<td height=””>

设置单元格的高度

<td bgcolor=””>

设置单元格的背景颜色

<td background=””>

设置单元格的背景图片

<td align=””>

设置单元格的水平对齐方式

<td valign=””>

设置单元格的垂直对齐方式

<td rowspan=””>

设置行合并的数目

<td colspan=””>

设置列合并的数目

<td nowarp=nowrap>

设置在单元格中不换行

5、<table>标签下的边框设置

属性名称

属性值

说明

frame

(表格外边框)

该属性必须在border的属性值不为0的状态下使用!

void

不要显现表格的边线

above

只要显现出表格的上边线

below

只显现出表格的下边线

hsides

只显示表格的上下边线

vsides

只显现表格的左右边线

lhs

只显现表格的左边线

rhs

只显现表格的右边线

border/box

会显现出表格的所有边线

rules

(表格内边框)

rows

只显示出横行的格框线

cols

只显示出直行的格框线

all

显示全部格框线

groups

表示列组合水平部分

none

不显示任何格框线

表格的标题:<table>

                  <caption>...</caption>

            </table>

6、

属性名称

属性值

说明

align

left

标题在表格左方

right

标题在表格右方

top

标题在表格上方

bottom

标题在表格下方

7、表格的结构化

1)结构化格式:<table>

                  <thead>......</thead>--------表头区

                  <tbody>......</tbody>-------表体区

                  ..................................

                  <tfoot>.......</tfoot>--------表尾区

           </table>

2)直列化格式:<colgroup>......</colgroup>

属性名称

属性值

说明

align

left

靠左

center

靠中

right

靠右

valign

top

靠上

middle

靠中

bottom

靠下

span

数字

直列数

bgcolor

颜色

背景颜色

个别直列设置:<col>功能完全和<colgroup>一样

<colgroup span=1></colgroup>

<colgroup bgcolor=red></colgroup>

8、链接语法:

<a href=链接目标 title=注释 target=打开链接窗口的形式>显示内容</a>

_blank在新窗口中打开

_self在自身窗口中打开(默认值)

_parent在上一级窗口中打开,框架会经常使用

_top在浏览器的整个窗口中打开,忽略任何框架

9、链接的类型:

(1)内部链接:当前文档与目标文档在同一站点内

     <a href=目标文档位置及全称>显示内容</a>

(2)外部链接:当前文档与目标文档不在同一站点内

     <a href=URL(网址)>显示内容</a>

(3)E-mail链接:并允许访问者向指定的地址发送邮件

     <a href=mailto:电子邮件地址>显示内容</a>

(4)锚点链接:跳转到同一网页或其他文档中的指定位置

     创建锚点:<a name=锚点名称>显示内容</a>

     链接锚点:<a href=#锚点名称>显示内容</a>

(5)空链接:没有目标端点的链接

     <a href=#>显示内容</a>

     例如:设置为首页   

<a href=# onClick=this.style.behavior=url(#default#homepage);this.sethomepage(http://www.xxxx.com)>设为首页</a>

添加收藏:

<a href=# onClick=javascript:window.external.addfavorite(http://www.xxxx.com,xx商城)>加入收藏夹</a>

10、脚本链接:是一种特殊的链接,当单击设置脚本链接的文本或图像时,可以运行相应的JavaScript语句。

例如:<a href=javascript:window.open(http://www.xxxx.com)>xx商城</a>

关闭窗口:<a href=javascript:window.close()>关闭窗口</a>

打开窗口:<a href=javascript:window.open(文件名)>打开窗口</a>

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部