|
在這里~首先要說明的~我不是推薦大家使用表格布局,而是跟大家說明在顯示大批量的數(shù)據(jù)時(shí)~還有表格可以用,而用DIV可以模擬出絕大部分以前的表格布局跟數(shù)據(jù)顯示,在后面會(huì)講些代替表格的顯示方式.同時(shí),因?yàn)檎以敿?xì)的中文介紹.英文的水平又有限.看W3C那介紹~有些地方可能理解錯(cuò)誤,如果有發(fā)現(xiàn)的朋友請(qǐng)幫忙指出.
[1]表格應(yīng)用
1表格的基本標(biāo)簽
2分析表格的基本標(biāo)簽
3基本演示
[2]層模擬表格
1模擬前的建議
2兩列多行的數(shù)據(jù)顯示
3三列多行的數(shù)據(jù)顯示
表格應(yīng)用
1、表格的基本標(biāo)簽:
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里可以把別的標(biāo)簽定義得跟table的一樣
可是 IE 不支持 所以~應(yīng)該用表格的地方還是用表格好?
說到表格,自己悄悄的BS一下FF 雖然很不情愿.
2、分析表格的基本標(biāo)簽:
table
table元素定義一個(gè)表格的開始
tr
表格中的行
THEAD
表頭
TBODY
表的主體
TFOOT
表底
COL
指定基于列的表格默認(rèn)屬性,嵌套的 COL 屬性將覆蓋 COLGROUP 屬性
COLGROUP
指定表格中一列或一組列的默認(rèn)屬性。
TD, TH
單元格
CAPTION
表名
3、基本演示:
不想過多的講表格,這是一個(gè)比較完整的表格的演示,同時(shí)繼承XHTML的思想,結(jié)構(gòu)與表現(xiàn)的分離,不再為元素的屬性做演示
<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>
無樣式表現(xiàn):
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
定義CSS樣式:
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
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(" 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沒定義 會(huì)因?yàn)g覽器不同解析不同*/
/*IE,Opera,Netscape會(huì)使用colgroup 定義的背景 MOZ系列的不會(huì) 非WIN系統(tǒng)瀏覽未測(cè)試 */
color : White;
}
table.tab tfoot td
{
background-color : Gray;
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁 下一頁 如何用CSS定義表格與模擬表格 [2]
◎進(jìn)入論壇網(wǎng)站綜合、網(wǎng)頁制作版塊參加討論
|
第 1 頁 如何用CSS定義表格與模擬表格 [1]
第 2 頁 
