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

笑看天下诸侯戏 独卧仙居逍遥乐

 
 
 

日志

 
 

【代码应用】简单表格的基本代码  

2011-04-28 17:54:59|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
彩色渐变字教程 - 静中有动 - 静中有动的休闲屋
   素材:取之网络
简单表格的基本代码
  编辑:静中有动

 

        表格是每一個網頁不可缺少的東西,首先我們要加入<TABLE>的碼,在<TABLE>的標籤內可以控制整個表格的長度和外框的粗細 :

<TABLE width=300 border=1 cellspacing=2>

width=控制表格長度,可用數字或百分比

cellspaing=控制儲存格的分隔距離,內定為2

background=背景圖檔

border=控制外框粗細,不外框便設成0

 

         這只是一開始的設定,必須在<TABLE>後加上<TD>,才會新開一個儲存格,再用</TD>來關閉儲存格 :

<TABLE border=1>
<TD>儲存格1</TD>

<TD>儲存格2</TD>
</TABLE>
儲存格1 儲存格2

 

 

若想跳到下一行,加上<TR>即可 :

<TABLE border=1>
<TD>
儲存格
1</TD>
<TD>
儲存格
2</TD>
<TR>

<TD>
儲存格3</TD>
<TD>
儲存格
4</TD>
</TABLE>
儲存格1 儲存格2
儲存格3 儲存格4

 

 

 

當然亦可使用<TH>:

<TABLE border=1>
<TH>
儲存格
1</TH>
<TH>
儲存格
2</TH>
<TR>

<TD>
儲存格3</TD>
<TD>
儲存格
4</TD>
</TABLE>
儲存格1 儲存格2
儲存格3 儲存格4

 

 

 

<TD><TH>內的屬性如下 :

align=控制水平是left(靠左)right(靠右)center(置中)

valign=控制垂直是top(靠上)middle(置中)bottom(靠下)

background=背景圖檔

colspan=使一個儲存格橫跨 N 個欄位

rowspan=使一個儲存格下跨 N 個列

若想為表格加上標題,來標明整個表格的主題,可在<TABLE>後加上<caption>的標籤

<TABLE border=1>
<caption>公佈欄</caption>

<TD>
儲存格1</TD>
<TD>
儲存格
2</TD>
<TR>
<TD>
儲存格
3</TD>
<TD>
儲存格
4</TD>
</TABLE>
公佈欄
儲存格1 儲存格2
儲存格3 儲存格4

 

 

 

 

colspan的用法 :

<TABLE border=1>
<TD
colspan=3 align=center>儲存格
A1</TD>
<TR>
<TD>
儲存格
B1</TD>
<TD>
儲存格
B2</TD>
<TD>
儲存格
B3</TD>
</TABLE>
儲存格 A1
儲存格 B1 儲存格 B2 儲存格 B3

 

 

 

rowspan的用法 :

<TABLE border=1>
<TD
rowspan=3 align=center>儲存格
A1</TD>
<TD>
儲存格
B1</TD>
<TR>

<TD>
儲存格 B2</TD>
<TR>

<TD>
儲存格 B3</TD>
</TABLE>
儲存格 A1 儲存格 B1
儲存格 B2
儲存格 B3
 
 
请保持本博的个性风格,朋友如需要此内容而不想显现来源的,请复制上面的内容自主处理
彩色渐变字教程 - 静中有动 - 静中有动的休闲屋
  评论这张
 
阅读(230)| 评论(14)
推荐 转载

历史上的今天

评论

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

页脚

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