注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

人无癖不可与交,以其无深情也。

人无疵不可与交,以其无真情也。

 
 
 

日志

 
 

【转载】博客装饰-表格解读(1)  

2012-07-30 07:29:08|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自在水一方《博客装饰-表格解读(1)》
名称 实例 代码

表格的基本语法

 

<table>...</table> - 定义表格

<tbody>...</tbody> -表格正文
<tr>...</tr> - 定义表行
<th>...</th> - 定义表头
<td>具体数据<td> - 定义表元

表格的边框

<TABLE border=#>

#=数字 大于0 

有边框且边框的

尺寸=数值

#=0 无边框

表头A 表头B 表头C
A B C

例一border=1

 

表头A 表头B 表头C
A B C

 

例二border=0

<TABLE border=1>
<TBODY>
<TR>
<TH>表头A</TH><TH>表头B</TH><TH>表头C</TH>
<TR>
<TD>A</TD><TD>B</TD><TD>C</TD>
</TR></TBODY></TABLE>

跨多列的表元

<th colspan=#>

<td colspan=#>

#=数字

表示跨的列数

 

 

跨多列的表元
表头A 表头B 表头C
A B C

 

 

 

 

 

 

 

跨多列的表元
A B C
跨多列的表元

 

 

<TABLE border=1>
<TBODY>
<TR>
<TH colSpan=3>大表头</TH>
<TR>
<TH>表头A</TH><TH>表头B</TH><TH>表头C</TH>
<TR>
<TD>A</TD><TD>B</TD><TD>C</TD>
</TR></TBODY></TABLE>

------------------------------------------

<TABLE border=1>
<TBODY>
<TR>
<TD colSpan=3>跨多列的表元</TD></TR>
<TR>
<TD>A</TD><TD>B</TD><TD>C</TD></TR>
<TR>
<TD colSpan=3>跨多列的表元</TD></TR></TBODY></TABLE>

跨多行的表元

<th rowspan=#>

<td rowspan=#>

#=数字

表示跨的行数

 

跨多行的表元 表头A A
表头B B
表头C C

 

 

 

 

 

 

跨多行表元 A 跨多行表元
B
C

 

 

<TABLE border=1>
<TBODY>
<TR>
<TH rowSpan=3>跨多行的表元</TH>
<TH>表头A</TH><TD>A</TD></TR>
<TR>
<TH>表头B</TH><TD>B</TD></TR>
<TR>
<TH>表头C</TH>
<TD>C</TD></TR></TBODY></TABLE>

------------------------------------------

<TABLE border=1>
<TBODY>
<TR>
<TD rowSpan=3>跨多行表元</TD>
<TD>A</TD>
<TD rowSpan=3>跨多行表元</TD></TR>
<TR>
<TD>B</TD></TR>
<TR>
<TD>C</TD></TR></TBODY></TABLE>

表格尺寸设置

<table width=# height=#>

width宽度

height高度

#=像素(数字)

表头A 表头B 表头C
A B C
<TABLE height=100 width=170 border=5>
<TBODY>
<TR>
<TH>表头A</TH><TH>表头B</TH><TH>表头C</TH>
<TR>
<TD>A</TD><TD>B</TD>
<TD>C</TD></TR></TBODY></TABLE>

表元间隙设置

<table cellspacing=#>

#=像素(数字)

外边框与内边框距离

 

表头A 表头B 表头C
A B C

 

<TABLE cellSpacing=10 border=1>
<TBODY>
<TR>
<TH>表头A</TH><TH>表头B</TH><TH>表头C</TH>
<TR>
<TD>A</TD><TD>B</TD>
<TD>C</TD></TR></TBODY></TABLE>

表元内部空白设置

<table cellpadding=#>

#=像素(数字)

表元与内边框距离

 

 

表头A 表头B 表头C
A B C

 

<TABLE cellpadding=10 border=1>
<TBODY>
<TR>
<TH>表头A</TH><TH>表头B</TH><TH>表头C</TH>
<TR>
<TD>A</TD><TD>B</TD>
<TD>C</TD></TR></TBODY></TABLE>

表格内文字的对齐

(水平方向)

<tr align=#>
<th align=#>
<td align=#>
#=left(左), center(中间), right(右)

 

表头A 表头B 表头C
A B C

 

<TABLE width=160 border=1>
<TBODY>
<TR>
<TH>表头A</TH><TH>表头B</TH><TH>表头C</TH>
<TR>
<TD align=left>A</TD>
<TD align=middle>B</TD>
<TD align=right>C</TD></TR></TBODY></TABLE>

表格内文字的对齐

(垂直方向)

<tr valign=#>
<th valign=#>
<td valign=#>

#=top(顶), middle(中间), bottom(底), baseline(基线)

 

表头A 表头B 表头C 表头D
A B C D

 

<TABLE height=100 border=1>
<TBODY>
<TR>
<TH>表头A</TH><TH>表头B</TH><TH>表头C</TH>

<TH>表头D</TH>
<TR>
<TD vAlign=top>A</TD>
<TD vAlign=center>B</TD>
<TD vAlign=bottom>C</TD>
<TD vAlign=baseline>D</TD></TR></TBODY></TABLE>

表格在页面中的对齐

<table align=#>

#=left(左),right(右)

表头A 表头B
A B

left

 

 

 

表头A 表头B
A B

 

right

 

<TABLE align=left border=1>
<TBODY>
<TR>
<TH>表头A</TH><TH>表头B</TH>
<TR>
<TD>A</TD>
<TD>B</TD></TR></TBODY></TABLE>

表格的标题一

<caption align=#> ... </caption>

#=left(左), center(中间默认), right(右)

 

表格标题
表头A 表头B 表头C
A B C

 

<TABLE border=1>
<CAPTION align=center>表格标题</CAPTION>
<TBODY>
<TR>
<TH>表头A</TH><TH>表头B</TH><TH>表头C</TH>
<TR>
<TD>A</TD><TD>B</TD>
<TD>C</TD></TR></TBODY></TABLE>

表格的标题二

<caption valign=#> ... </caption>

#=top(顶默认), bottom(底)

表格标题
表头A 表头B 表头C
A B C
<TABLE border=1>
<CAPTION vAlign=bottom>表格标题</CAPTION>
<TBODY>
<TR>
<TH>表头A</TH><TH>表头B</TH><TH>表头C</TH>
<TR>
<TD>A</TD><TD>B</TD>
<TD>C</TD></TR></TBODY></TABLE>
  评论这张
 
阅读(70)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017