您的位置:首頁 > 網頁制作 > HTML/Xhtml

XHTML中的表格應用及表格的模擬

日期:2006-07-06 11:54:35 點擊: 來自:www.rotui.net 作者:嗷嗷

 

在這里~首先要說明的~我不是推薦大家使用表格布局,而是跟大家說明在顯示大批量的數據時~還有表格可以用,而用DIV可以模擬出絕大部分以前的表格布局跟數據顯示,在后面會講些代替表格的顯示方式.
同時,因為找詳細的中文介紹.英文的水平又有限.看W3C那介紹~有些地方可能理解錯誤,如果有發現的朋友請幫忙指出.

  1. 表格應用
    1. 表格的基本標簽
    2. 分析表格的基本標簽
    3. 基本演示
  2. 層模擬表格
    1. 模擬前的建議
    2. 兩列多行的數據顯示
    3. 三列多行的數據顯示

表格應用

表格的基本標簽

  • TABLE { display: table }
  • TR { display: table-row }
  • THEAD { display: table-header-group }
  • TBODY { display: table-row-group }
  • TFOOT { display: table-footer-group }
  • COL { display: table-column }
  • COLGROUP { display: table-column-group }
  • TD, TH { display: table-cell }
  • CAPTION { display: table-caption }

雖然CSS2里可以把別的標簽定義得跟table的一樣
可是 IE 不支持 所以~應該用表格的地方還是用表格好?
說到表格,自己悄悄的BS一下FF 雖然很不情愿.

分析表格的基本標簽

table
table元素定義一個表格的開始
tr
表格中的行
THEAD
表頭
TBODY
表的主體
TFOOT
表底
COL
指定基于列的表格默認屬性,嵌套的 COL 屬性將覆蓋 COLGROUP 屬性
COLGROUP
指定表格中一列或一組列的默認屬性。
TD, TH
單元格
CAPTION
表名

基本演示

不想過多的講表格,這是一個比較完整的表格的演示,同時繼承XHTML的思想,結構與表現的分離,不再為元素的屬性做演示

代碼
<table class="tab">
  <caption>表名</caption>
  <colgroup class="g1" span="3" >
    <col class="c1" />
    <col class="c2"/>
    <col class="c3"/>
  </colgroup>
  <colgroup class="g2" span="1" >
  </colgroup>
  <thead>
    <tr>
      <th>表頭1</th>
      <th>表頭2</th>
      <th>表頭3</th>
      <th>表頭4</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>表底1</td>
      <td>表底2</td>
      <td>表底3</td>
      <td>表底4</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>行1列1</td>
      <td>行1列2</td>
      <td>行1列3</td>
      <td>行1列4</td>
    </tr>
    <tr>
      <td>行2列1</td>
      <td>行2列2</td>
      <td>行2列3</td>
      <td>行2列4</td>
    </tr>
     <tr>
      <td>行3列1</td>
      <td>行3列2</td>
      <td>行3列3</td>
      <td>行3列4</td>
    </tr>
    <tr>
      <td>行4列1</td>
      <td>行4列2</td>
      <td>行4列3</td>
      <td>行4列4</td>
    </tr>
  </tbody>
</table>
無樣式表現
表名
表頭1表頭2表頭3表頭4
表底1表底2表底3表底4
行1列1行1列2行1列3行1列4
行2列1行2列2行2列3行2列4
行3列1行3列2行3列3行3列4
行4列1行4列2行4列3行4列4
定義基本樣式
表名
表頭1表頭2表頭3表頭4
表底1表底2表底3表底4
行1列1行1列2行1列3行1列4
行2列1行2列2行2列3行2列4
行3列1行3列2行3列3行3列4
行4列1行4列2行4列3行4列4
css部分
table.tab{
	border :1px black solid;
}

table.tab .g1 .c1
{
	background-color :Yellow;
	width:50px;
}
table.tab .g1 .c2
{
	background-color :  Lime;
	width : 100px;

}
table.tab .g1 .c3{
	background-color :  Green;
	width : 140px;
}
table.tab colgroup.g2{
	background:Teal url("http://rotui.net/images/bg.jpg") repeat top center;
	width : 200px;
	/* IE only start */
	/* 非IE的瀏覽器都不支持非width background以外的定義 */
	color : White;
	text-align : right;
	/* IE only end */
}
table.tab thead th
{
	background-color : Black;/*由于colgroup 定義了背景 th沒定義 會因瀏覽器不同解析不同*/
	/*IE,Opera,Netscape會使用colgroup 定義的背景  MOZ系列的不會 非WIN系統瀏覽未測試 */
	color : White;
}
table.tab tfoot td
{
	background-color : Gray;
}
 

表格的模擬

模擬前的建議

div就是div 而不是table,極力反對變下面這樣的DIV模擬表格,偶爾也考慮考慮一下親和力

<div>
    <div>
        <div>...</div>
    </div>
</div> 

兩列多行的數據顯示

兩列多行的數據顯示應用得最多的是文章列表之類的,一般來說主要由標題,時間組成的.
我選擇ol來做~是下面演示的是有有序列表~可能你會問我~為什么不用ul呢??
在參考中說到ol:繪制文本的編號列表,ul:繪制文本的項目符號列表 簡單的說就是ol是有序列表,ul是無序列表

html部分
<ol>
    <li><a href="#" title="晚上我沒吃飯">晚上我沒吃飯</a>2-13</li>
    <li><a href="#" title="今天是中國的情人節,要一個人過">今天是中國的情人節,要一個人過</a>2-12</li>
    <li><a href="#" title="下午朋友來看我">下午朋友來看我</a>2-11</li>
    <li><a href="#" title="^_^ 發工資拉">^_^ 發工資拉,</a>2-10</li>
    <li><a href="#" title="...">...........</a> ....</li>
    </ol>	
  1. 晚上我沒吃飯2-13
  2. 今天是中國的情人節,要一個人過2-12
  3. 下午朋友來看我2-11
  4. ^_^ 發工資拉,2-10
  5. ........... ....
CSS部分
ol.news{
	width:400px;/*裝飾用的~只限顯示的數據總寬度 */
	list-style-type :none;/*去掉列表數據*/
}
ol.news li{
	text-align:right;/* 把文本右對齊,主要的作用是把時間放在右邊*/
	clear:both;/*清行*/
}
ol.news li a{
	float:left;
	display : inline;/* 再把主要顯示的內容浮動到左邊*/
	text-align:left;/* 文本左對齊,可選~保證更多的瀏覽器是左對齊*/
}
  1. 晚上我沒吃飯2-13
  2. 今天是中國的情人節,要一個人過2-12
  3. 下午朋友來看我2-11
  4. ^_^ 發工資拉,2-10
  5. ........... ....
另一種方法
html
<ul class="news2">
  <li><span>[廣東]</span>這里沒電了</li>
  <li><span>[四川]</span>這里也沒電了</li>
  <li><span>[上海]</span>郁悶!同上,沒電啊~</li>
  <li><span>[北京]</span>挖哈哈 ^_^ 這里有電~</li>
  <li><span>....</span>........</li>
</ul>
CSS
ul.news2{
	width:400px;
	list-style-type :none;
}
ul.news2 li{
	text-align:left;/*這回向左對齊,因為我們要把span浮到右邊*/
}
ul.news2 li span
{
	float:right;/*我浮我浮我浮浮浮,我在右邊了*/
	display : inline;
}
  • [廣東]這里沒電了
  • [四川]這里也沒電了
  • [上海]郁悶!同上,沒電啊~
  • [北京]挖哈哈 ^_^ 這里有電~
  • ............
更有的裝飾
我們可以加background,border,font等定義~可以把他定義得漂亮點,不過這里的目的已經達到了,漂亮的樣式等大家自己去嘗試

三列多行的數據顯示

這里依然選擇文章列表來做演示,選擇標簽為ol,li,a,address,i.當然,你也可以依照你的文檔資料選擇如span,b,s等來做

HTML部分
<ol class="art">
    <li><a herf="#" title="...">[原創:JS]由淺到深了解JavaScript類</a><address>笨紅</address><i>2-9</i></li>
    <li><a herf="#" title="...">[原創:CSS]正確認識html與body </a><address>一葉千鳥</address><i>2-8</i></li>
    <li><a herf="#" title="...">[灌水:泡MM]沒有MM的日子怎樣過</a><address>嗷嗷</address><i>2-8</i></li>
    <li><a herf="#" title="...">........</a><address>....</address><i>....</i></li>
</ol>
  1. [原創:JS]由淺到深了解JavaScript類
    笨紅
    2-9
  2. [原創:CSS]正確認識html與body
    一葉千鳥
    2-8
  3. [灌水:泡MM]沒有MM的日子怎樣過
    嗷嗷
    2-8
  4. ........
    ....
    ....
CSS部分
ol.art{
	list-style-type :none;
}
ol.art li{
	clear:both;/*清行*/
}
ol.art li a{
	width:500px;/*定義寬度只是發了對齊*/
	float:left;display:inline;/*不能路過就浮過吧*/
}
ol.art li address{
	width:100px;
	font-style : normal;/*中文斜體不是很好看的說*/
	float:left;display:inline;
}
ol.art li i{
font-style : normal;
	float:left;display:inline;
}
	
  1. [原創:JS]由淺到深了解JavaScript類
    笨紅
    2-9
  2. [原創:CSS]正確認識html與body
    一葉千鳥
    2-8
  3. [灌水:泡MM]沒有MM的日子怎樣過
    嗷嗷
    2-8
  4. ........
    ....
    ....

總結

當做到三列時~我發現我已經一步一步的走向我反對的那種模擬了.
HTML4的時代table,table已經成為基本所有的網頁設計用來布局的工具, XHTML1.x的時代table的任務只是數據顯示,我支持表格的使用,不過不是用來布局的, 要想完全拋棄table,我認為應該等到瀏覽器們都支持display: table的CSS2才可以
以前文章只是個人看法,在WEB設計中我屬于學得晚的,學得菜的,可能里面說的有些不大對,也希望大家能幫我指出來.

原文地址:http://www.rotui.net/lab/tables/

More..素材圖片 Picture Navigation
相關鏈接 Correlation Link
HTML/Xhtml熱門 Class Hot
HTML/Xhtml推薦 Class Commend
版權所有:中國網站資源 2005- 未經授權禁止復制或建立鏡像 This Site Tech:XHTML+DIV+CSS+Javascript
CopyRight ® 2005- www.yndjjj.com online services. all rights reserved. ICP06016627
Optimized to 1024x768 to Firefox,Netscape,Opera,MS-IE6+.
中扑网 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>