如何用CSS定義表格與模拟表格,在這裏~首先要說明的~我(wǒ)(wǒ)不是推薦大(dà)家使用表格布局,而是跟大(dà)家說明在顯示大(dà)批量的數據時~還有表格可以用,而用DIV可以模拟出絕大(dà)部分(fēn)以前的表格布局跟數據顯示,在後面會講些代替表格的顯示方式.
在這裏~首先要說明的~我(wǒ)(wǒ)不是推薦大(dà)家使用表格布局,而是跟大(dà)家說明在顯示大(dà)批量的數據時~還有表格可以用,而用DIV可以模拟出絕大(dà)部分(fēn)以前的表格布局跟數據顯示,在後面會講些代替表格的顯示方式.同時,因爲找詳細的中(zhōng)文介紹.英文的水平又(yòu)有限.看W3C那介紹~有些地方可能理解錯誤,如果有發現的朋友請幫忙指出.
[1]表格應用
1表格的基本标簽
2分(fēn)析表格的基本标簽
3基本演示
[2]層模拟表格
1模拟前的建議
2兩列多行的數據顯示
3三列多行的數據顯示
表格應用
1、表格的基本标簽:
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的一(yī)樣
可是 IE 不支持 所以~應該用表格的地方還是用表格好?
說到表格,自己悄悄的BS一(yī)下(xià)FF 雖然很不情願.
2、分(fēn)析表格的基本标簽:
table
table元素定義一(yī)個表格的開(kāi)始
tr
表格中(zhōng)的行
THEAD
表頭
TBODY
表的主體(tǐ)
TFOOT
表底
COL
指定基于列的表格默認屬性,嵌套的 COL 屬性将覆蓋 COLGROUP 屬性
COLGROUP
指定表格中(zhōng)一(yī)列或一(yī)組列的默認屬性。
TD, TH
單元格
CAPTION
表名
3、基本演示:
不想過多的講表格,這是一(yī)個比較完整的表格的演示,同時繼承XHTML的思想,結構與表現的分(fēn)離(lí),不再爲元素的屬性做演示
<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>
無樣式表現:
運行代碼框
<!DOCTYPE <a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> PUBLIC "-//W3C//DTD X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> 1.1//EN" "http://www.w3.org/TR/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11/DTD/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11.dtd">
<<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> <a href="http://www.blue1000.com/bkhtml/c21/" title="XML教程">XML</a>ns="http://www.w3.org/1999/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>">
<head>
<title>X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>中(zhōng)的表格介紹及表格的模拟 - Beautiful Style « 樣式之美 » </title>
<meta http-equiv="Content-Type" content="text/<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>; charset=gb2312" />
<meta name="KEY<a href="http://www.blue1000.com/bkhtml/c117/" title="Word教程">word</a>s" content="<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>,x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>" />
<meta name="DEscription" content="<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>" />
<meta name="author" content="RotUI" />
<meta content="all" name="robots" />
<link rel="start" href="http://www.rotui.net" title="Home" />
<body>
<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>
</body>
</<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>>
[Ctrl+A 全部選擇 提示：你可先修改部分(fēn)代碼，再按運行]
定義CSS樣式:
運行代碼框
<!DOCTYPE <a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> PUBLIC "-//W3C//DTD X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> 1.1//EN" "http://www.w3.org/TR/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11/DTD/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11.dtd">
<<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> <a href="http://www.blue1000.com/bkhtml/c21/" title="XML教程">XML</a>ns="http://www.w3.org/1999/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>">
<head>
<title>X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>中(zhōng)的表格介紹及表格的模拟 - Beautiful Style « 樣式之美 » </title>
<meta http-equiv="Content-Type" content="text/<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>; charset=gb2312" />
<meta name="KEY<a href="http://www.blue1000.com/bkhtml/c117/" title="Word教程">word</a>s" content="<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>,x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>" />
<meta name="DEscription" content="<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>" />
<meta name="author" content="RotUI" />
<meta content="all" name="robots" />
<link rel="start" href="http://www.rotui.net" title="Home" />
<style type="text/<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>">
/*eg*/
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("/UpImages/20061011211923467.jpg") repeat top center;
width : 200px;
/* IE */
color : White;
text-align : right;
}
table.tab thead th{
background-color : Black;
color : White;
line-height:160%;
}
table.tab tfoot td{
background-color : Gray;
}
</style>
<body>
<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>
</body>
</<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>>
[Ctrl+A 全部選擇 提示：你可先修改部分(fēn)代碼，再按運行]
CSS部分(fēn):
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("/UpImages/20061011211923467.jpg") repeat top center;
width : 200px;
/* IE only start */
/* 非IE的浏覽器都不支持非width background以外(wài)的定義 */
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;
表格的模拟
1、模拟前的建議:
DIV就是DIV 而不是table,極力反對變下(xià)面這樣的DIV模拟表格,偶爾也考慮考慮一(yī)下(xià)親和力
<div>
<div>
<div>...</div>
</div>
</div>
2、兩列多行的數據顯示:
兩列多行的數據顯示應用得最多的是文章列表之類的,一(yī)般來說主要由标題,時間組成的.
我(wǒ)(wǒ)選擇ol來做~是下(xià)面演示的是有有序列表~可能你會問我(wǒ)(wǒ)~爲什麽不用ul呢??
在參考中(zhōng)說到ol:繪制文本的編号列表,ul:繪制文本的項目符号列表 簡單的說就是ol是有序列表,ul是無序列表
HTML部分(fēn)
<ol>
<li><a href="20170711122112.html" title="晚上我(wǒ)(wǒ)沒吃飯">晚上我(wǒ)(wǒ)沒吃飯</a>2-13</li>
<li><a href="20170711122112.html" title="今天是中(zhōng)國的情人節,要一(yī)個人過">今天是中(zhōng)國的情人節,要一(yī)個人過</a>2-12</li>
<li><a href="20170711122112.html" title="下(xià)午朋友來看我(wǒ)(wǒ)">下(xià)午朋友來看我(wǒ)(wǒ)</a>2-11</li>
<li><a href="20170711122112.html" title="^_^ 發工(gōng)資(zī)拉">^_^ 發工(gōng)資(zī)拉,</a>2-10</li>
<li><a href="20170711122112.html" title="...">...........</a> ....</li>
</ol>
運行代碼框
<!DOCTYPE <a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> PUBLIC "-//W3C//DTD X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> 1.1//EN" "http://www.w3.org/TR/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11/DTD/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11.dtd">
<<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> <a href="http://www.blue1000.com/bkhtml/c21/" title="XML教程">XML</a>ns="http://www.w3.org/1999/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>">
<head>
<title>X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>中(zhōng)的表格介紹及表格的模拟 - Beautiful Style « 樣式之美 » </title>
<meta http-equiv="Content-Type" content="text/<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>; charset=gb2312" />
<meta name="KEY<a href="http://www.blue1000.com/bkhtml/c117/" title="Word教程">word</a>s" content="<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>,x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>" />
<meta name="DEscription" content="<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>" />
<meta name="author" content="RotUI" />
<meta content="all" name="robots" />
<link rel="start" href="http://www.rotui.net" title="Home" />
<body>
<ol>
<li><a href="20170711122112.html" title="晚上我(wǒ)(wǒ)沒吃飯">晚上我(wǒ)(wǒ)沒吃飯</a>2-13</li>
<li><a href="20170711122112.html" title="今天是中(zhōng)國的情人節,要一(yī)個人過">今天是中(zhōng)國的情人節,要一(yī)個人過</a>2-12</li>
<li><a href="20170711122112.html" title="下(xià)午朋友來看我(wǒ)(wǒ)">下(xià)午朋友來看我(wǒ)(wǒ)</a>2-11</li>
<li><a href="20170711122112.html" title="^_^ 發工(gōng)資(zī)拉">^_^ 發工(gōng)資(zī)拉,</a>2-10</li>
<li><a href="20170711122112.html" title="...">...........</a> ....</li>
</ol>
</body>
</<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>>
[Ctrl+A 全部選擇 提示：你可先修改部分(fēn)代碼，再按運行]
CSS部分(fēn)
ol.news{
width:400px;/*裝飾用的~隻限顯示的數據總寬度 */
list-style-type :none;/*去(qù)掉列表數據*/
}
ol.news li{
text-align:right;/* 把文本右對齊,主要的作用是把時間放(fàng)在右邊*/
clear:both;/*清行*/
}
ol.news li a{
float:left;
display : inline;/* 再把主要顯示的内容浮動到左邊*/
text-align:left;/* 文本左對齊,可選~保證更多的浏覽器是左對齊*/
}
運行代碼框
<!DOCTYPE <a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> PUBLIC "-//W3C//DTD X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> 1.1//EN" "http://www.w3.org/TR/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11/DTD/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11.dtd">
<<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> <a href="http://www.blue1000.com/bkhtml/c21/" title="XML教程">XML</a>ns="http://www.w3.org/1999/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>">
<head>
<title>X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>中(zhōng)的表格介紹及表格的模拟 - Beautiful Style « 樣式之美 » </title>
<meta http-equiv="Content-Type" content="text/<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>; charset=gb2312" />
<meta name="KEY<a href="http://www.blue1000.com/bkhtml/c117/" title="Word教程">word</a>s" content="<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>,x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>" />
<meta name="DEscription" content="<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>" />
<meta name="author" content="RotUI" />
<meta content="all" name="robots" />
<link rel="start" href="http://www.rotui.net" title="Home" />
<body>
<style type="text/<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>">
ol.news{
width:400px;/*裝飾用的~隻限顯示的數據總寬度 */
list-style-type :none;/*去(qù)掉列表數據*/
}
ol.news li{
text-align:right;/* 把文本右對齊,主要的作用是把時間放(fàng)在右邊*/
clear:both;/*清行*/
}
ol.news li a{
float:left;
display : inline;/* 再把主要顯示的内容浮動到左邊*/
text-align:left;/* 文本左對齊,可選~保證更多的浏覽器是左對齊*/
}
</style>
<ol class="news">
<li><a href="20170711122112.html" title="晚上我(wǒ)(wǒ)沒吃飯">晚上我(wǒ)(wǒ)沒吃飯</a>2-13</li>
<li><a href="20170711122112.html" title="今天是中(zhōng)國的情人節,要一(yī)個人過">今天是中(zhōng)國的情人節,要一(yī)個人過</a>2-12</li>
<li><a href="20170711122112.html" title="下(xià)午朋友來看我(wǒ)(wǒ)">下(xià)午朋友來看我(wǒ)(wǒ)</a>2-11</li>
<li><a href="20170711122112.html" title="^_^ 發工(gōng)資(zī)拉">^_^ 發工(gōng)資(zī)拉,</a>2-10</li>
<li><a href="20170711122112.html" title="...">...........</a> ....</li>
</ol>
</body>
</<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>>
[Ctrl+A 全部選擇 提示：你可先修改部分(fēn)代碼，再按運行]
另一(yī)種方法:
HTML
<ul class="news2">
<li><span>[廣東]</span>這裏沒電了</li>
<li><span>[四川]</span>這裏也沒電了</li>
<li><span>[上海]</span>郁悶!同上,沒電啊~</li>
<li><span>[北(běi)京]</span>挖哈哈 ^_^ 這裏有電~</li>
<li><span>....</span>........</li>
</ul>
CSS
ul.news2{
width:400px;
list-style-type :none;
}
ul.news2 li{
text-align:left;/*這回向左對齊,因爲我(wǒ)(wǒ)們要把span浮到右邊*/
}
ul.news2 li span
{
float:right;/*我(wǒ)(wǒ)浮我(wǒ)(wǒ)浮我(wǒ)(wǒ)浮浮浮,我(wǒ)(wǒ)在右邊了*/
display : inline;
}
運行代碼框
<!DOCTYPE <a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> PUBLIC "-//W3C//DTD X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> 1.1//EN" "http://www.w3.org/TR/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11/DTD/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11.dtd">
<<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> <a href="http://www.blue1000.com/bkhtml/c21/" title="XML教程">XML</a>ns="http://www.w3.org/1999/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>">
<head>
<title>X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>中(zhōng)的表格介紹及表格的模拟 - Beautiful Style « 樣式之美 » </title>
<meta http-equiv="Content-Type" content="text/<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>; charset=gb2312" />
<meta name="KEY<a href="http://www.blue1000.com/bkhtml/c117/" title="Word教程">word</a>s" content="<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>,x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>" />
<meta name="DEscription" content="<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>" />
<meta name="author" content="RotUI" />
<meta content="all" name="robots" />
<link rel="start" href="http://www.rotui.net" title="Home" />
<style type="text/<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>">
ul.news2{
width:400px;
list-style-type :none;
}
ul.news2 li{
text-align:left;/*這回向左對齊,因爲我(wǒ)(wǒ)們要把span浮到右邊*/
}
ul.news2 li span
{
float:right;/*我(wǒ)(wǒ)浮我(wǒ)(wǒ)浮我(wǒ)(wǒ)浮浮浮,我(wǒ)(wǒ)在右邊了*/
display : inline;
}
</style>
<body>
<ul class="news2">
<li><span>[廣東]</span>這裏沒電了</li>
<li><span>[四川]</span>這裏也沒電了</li>
<li><span>[上海]</span>郁悶!同上,沒電啊~</li>
<li><span>[北(běi)京]</span>挖哈哈 ^_^ 這裏有電~</li>
<li><span>....</span>........</li>
</ul>
</body>
</<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>>
[Ctrl+A 全部選擇 提示：你可先修改部分(fēn)代碼，再按運行]
更多的裝飾
我(wǒ)(wǒ)們可以加background,border,font等定義~可以把他定義得漂亮點,不過這裏的目的已經達到了,漂亮的樣式等大(dà)家自己去(qù)嘗試
2、三列多行的數據顯示:
這裏依然選擇文章列表來做演示,選擇标簽爲ol,li,a,address,i.當然,你也可以依照你的文檔資(zī)料選擇如span,b,s等來做
<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>一(yī)葉千鳥</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>
運行代碼框
<!DOCTYPE <a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> PUBLIC "-//W3C//DTD X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> 1.1//EN" "http://www.w3.org/TR/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11/DTD/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11.dtd">
<<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> <a href="http://www.blue1000.com/bkhtml/c21/" title="XML教程">XML</a>ns="http://www.w3.org/1999/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>">
<head>
<title>X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>中(zhōng)的表格介紹及表格的模拟 - Beautiful Style « 樣式之美 » </title>
<meta http-equiv="Content-Type" content="text/<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>; charset=gb2312" />
<meta name="KEY<a href="http://www.blue1000.com/bkhtml/c117/" title="Word教程">word</a>s" content="<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>,x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>" />
<meta name="DEscription" content="<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>" />
<meta name="author" content="RotUI" />
<meta content="all" name="robots" />
<link rel="start" href="http://www.rotui.net" title="Home" />
<body>
<ol class="art">
<li><a href="20170711122112.html" title="...">[原創:JS]由淺到深了解<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">JavaScript</a>類</a><address>笨紅</address><i>2-9</i></li>
<li><a href="20170711122112.html" title="...">[原創:<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>]正确認識<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>與body </a><address>一(yī)葉千鳥</address><i>2-8</i></li>
<li><a href="20170711122112.html" title="...">[灌水:泡MM]沒有MM的日子怎樣過</a><address>嗷嗷</address><i>2-8</i></li>
<li><a href="20170711122112.html" title="...">........</a><address>....</address><i>....</i></li>
</ol>
</body>
</<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>>
[Ctrl+A 全部選擇 提示：你可先修改部分(fēn)代碼，再按運行]
CSS部分(fēn)
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;/*中(zhōng)文斜體(tǐ)不是很好看的說*/
float:left;display:inline;
}
ol.art li i{
font-style : normal;
float:left;display:inline;
}
運行代碼框
<!DOCTYPE <a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> PUBLIC "-//W3C//DTD X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> 1.1//EN" "http://www.w3.org/TR/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11/DTD/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11.dtd">
<<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> <a href="http://www.blue1000.com/bkhtml/c21/" title="XML教程">XML</a>ns="http://www.w3.org/1999/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>">
<head>
<title>X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>中(zhōng)的表格介紹及表格的模拟 - Beautiful Style « 樣式之美 » </title>
<meta http-equiv="Content-Type" content="text/<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>; charset=gb2312" />
<meta name="KEY<a href="http://www.blue1000.com/bkhtml/c117/" title="Word教程">word</a>s" content="<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>,x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>" />
<meta name="DEscription" content="<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>" />
<meta name="author" content="RotUI" />
<meta content="all" name="robots" />
<link rel="start" href="http://www.rotui.net" title="Home" />
<style type="text/<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>">
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;/*中(zhōng)文斜體(tǐ)不是很好看的說*/
float:left;display:inline;
}
ol.art li i{
font-style : normal;
float:left;display:inline;
}
</style>
<body>
<ol class="art">
<li><a href="20170711122112.html" title="...">[原創:JS]由淺到深了解<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">JavaScript</a>類</a><address>笨紅</address><i>2-9</i></li>
<li><a href="20170711122112.html" title="...">[原創:<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>]正确認識<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>與body </a><address>一(yī)葉千鳥</address><i>2-8</i></li>
<li><a href="20170711122112.html" title="...">[灌水:泡MM]沒有MM的日子怎樣過</a><address>嗷嗷</address><i>2-8</i></li>
<li><a href="20170711122112.html" title="...">........</a><address>....</address><i>....</i></li>
</ol>
</body>
</<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>>
[Ctrl+A 全部選擇 提示：你可先修改部分(fēn)代碼，再按運行]
總結
當做到三列時~我(wǒ)(wǒ)發現我(wǒ)(wǒ)已經一(yī)步一(yī)步的走向我(wǒ)(wǒ)反對的那種模拟了.
HTML4的時代table,table已經成爲基本所有的網頁設計用來布局的工(gōng)具, XHTML1.x的時代table的任務隻是數據顯示,我(wǒ)(wǒ)支持表格的使用,不過不是用來布局的, 要想完全抛棄table,我(wǒ)(wǒ)認爲應該等到浏覽器們都支持display: table的CSS2才可以
以前文章隻是個人看法,在WEB設計中(zhōng)我(wǒ)(wǒ)屬于學得晚的,學得菜的,可能裏面說的有些不大(dà)對,也希望大(dà)家能幫我(wǒ)(wǒ)指出來
在這裏~首先要說明的~我(wǒ)(wǒ)不是推薦大(dà)家使用表格布局,而是跟大(dà)家說明在顯示大(dà)批量的數據時~還有表格可以用,而用DIV可以模拟出絕大(dà)部分(fēn)以前的表格布局跟數據顯示,在後面會講些代替表格的顯示方式.同時,因爲找詳細的中(zhōng)文介紹.英文的水平又(yòu)有限.看W3C那介紹~有些地方可能理解錯誤,如果有發現的朋友請幫忙指出.
[1]表格應用
1表格的基本标簽
2分(fēn)析表格的基本标簽
3基本演示
[2]層模拟表格
1模拟前的建議
2兩列多行的數據顯示
3三列多行的數據顯示
表格應用
1、表格的基本标簽:
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的一(yī)樣
可是 IE 不支持 所以~應該用表格的地方還是用表格好?
說到表格,自己悄悄的BS一(yī)下(xià)FF 雖然很不情願.
2、分(fēn)析表格的基本标簽:
table
table元素定義一(yī)個表格的開(kāi)始
tr
表格中(zhōng)的行
THEAD
表頭
TBODY
表的主體(tǐ)
TFOOT
表底
COL
指定基于列的表格默認屬性,嵌套的 COL 屬性将覆蓋 COLGROUP 屬性
COLGROUP
指定表格中(zhōng)一(yī)列或一(yī)組列的默認屬性。
TD, TH
單元格
CAPTION
表名
3、基本演示:
不想過多的講表格,這是一(yī)個比較完整的表格的演示,同時繼承XHTML的思想,結構與表現的分(fēn)離(lí),不再爲元素的屬性做演示
<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>
無樣式表現:
運行代碼框
<!DOCTYPE <a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> PUBLIC "-//W3C//DTD X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> 1.1//EN" "http://www.w3.org/TR/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11/DTD/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11.dtd">
<<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> <a href="http://www.blue1000.com/bkhtml/c21/" title="XML教程">XML</a>ns="http://www.w3.org/1999/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>">
<head>
<title>X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>中(zhōng)的表格介紹及表格的模拟 - Beautiful Style « 樣式之美 » </title>
<meta http-equiv="Content-Type" content="text/<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>; charset=gb2312" />
<meta name="KEY<a href="http://www.blue1000.com/bkhtml/c117/" title="Word教程">word</a>s" content="<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>,x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>" />
<meta name="DEscription" content="<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>" />
<meta name="author" content="RotUI" />
<meta content="all" name="robots" />
<link rel="start" href="http://www.rotui.net" title="Home" />
<body>
<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>
</body>
</<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>>
[Ctrl+A 全部選擇 提示：你可先修改部分(fēn)代碼，再按運行]
定義CSS樣式:
運行代碼框
<!DOCTYPE <a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> PUBLIC "-//W3C//DTD X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> 1.1//EN" "http://www.w3.org/TR/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11/DTD/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11.dtd">
<<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> <a href="http://www.blue1000.com/bkhtml/c21/" title="XML教程">XML</a>ns="http://www.w3.org/1999/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>">
<head>
<title>X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>中(zhōng)的表格介紹及表格的模拟 - Beautiful Style « 樣式之美 » </title>
<meta http-equiv="Content-Type" content="text/<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>; charset=gb2312" />
<meta name="KEY<a href="http://www.blue1000.com/bkhtml/c117/" title="Word教程">word</a>s" content="<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>,x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>" />
<meta name="DEscription" content="<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>" />
<meta name="author" content="RotUI" />
<meta content="all" name="robots" />
<link rel="start" href="http://www.rotui.net" title="Home" />
<style type="text/<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>">
/*eg*/
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("/UpImages/20061011211923467.jpg") repeat top center;
width : 200px;
/* IE */
color : White;
text-align : right;
}
table.tab thead th{
background-color : Black;
color : White;
line-height:160%;
}
table.tab tfoot td{
background-color : Gray;
}
</style>
<body>
<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>
</body>
</<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>>
[Ctrl+A 全部選擇 提示：你可先修改部分(fēn)代碼，再按運行]
CSS部分(fēn):
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("/UpImages/20061011211923467.jpg") repeat top center;
width : 200px;
/* IE only start */
/* 非IE的浏覽器都不支持非width background以外(wài)的定義 */
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;
表格的模拟
1、模拟前的建議:
DIV就是DIV 而不是table,極力反對變下(xià)面這樣的DIV模拟表格,偶爾也考慮考慮一(yī)下(xià)親和力
<div>
<div>
<div>...</div>
</div>
</div>
2、兩列多行的數據顯示:
兩列多行的數據顯示應用得最多的是文章列表之類的,一(yī)般來說主要由标題,時間組成的.
我(wǒ)(wǒ)選擇ol來做~是下(xià)面演示的是有有序列表~可能你會問我(wǒ)(wǒ)~爲什麽不用ul呢??
在參考中(zhōng)說到ol:繪制文本的編号列表,ul:繪制文本的項目符号列表 簡單的說就是ol是有序列表,ul是無序列表
HTML部分(fēn)
<ol>
<li><a href="20170711122112.html" title="晚上我(wǒ)(wǒ)沒吃飯">晚上我(wǒ)(wǒ)沒吃飯</a>2-13</li>
<li><a href="20170711122112.html" title="今天是中(zhōng)國的情人節,要一(yī)個人過">今天是中(zhōng)國的情人節,要一(yī)個人過</a>2-12</li>
<li><a href="20170711122112.html" title="下(xià)午朋友來看我(wǒ)(wǒ)">下(xià)午朋友來看我(wǒ)(wǒ)</a>2-11</li>
<li><a href="20170711122112.html" title="^_^ 發工(gōng)資(zī)拉">^_^ 發工(gōng)資(zī)拉,</a>2-10</li>
<li><a href="20170711122112.html" title="...">...........</a> ....</li>
</ol>
運行代碼框
<!DOCTYPE <a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> PUBLIC "-//W3C//DTD X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> 1.1//EN" "http://www.w3.org/TR/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11/DTD/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11.dtd">
<<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> <a href="http://www.blue1000.com/bkhtml/c21/" title="XML教程">XML</a>ns="http://www.w3.org/1999/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>">
<head>
<title>X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>中(zhōng)的表格介紹及表格的模拟 - Beautiful Style « 樣式之美 » </title>
<meta http-equiv="Content-Type" content="text/<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>; charset=gb2312" />
<meta name="KEY<a href="http://www.blue1000.com/bkhtml/c117/" title="Word教程">word</a>s" content="<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>,x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>" />
<meta name="DEscription" content="<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>" />
<meta name="author" content="RotUI" />
<meta content="all" name="robots" />
<link rel="start" href="http://www.rotui.net" title="Home" />
<body>
<ol>
<li><a href="20170711122112.html" title="晚上我(wǒ)(wǒ)沒吃飯">晚上我(wǒ)(wǒ)沒吃飯</a>2-13</li>
<li><a href="20170711122112.html" title="今天是中(zhōng)國的情人節,要一(yī)個人過">今天是中(zhōng)國的情人節,要一(yī)個人過</a>2-12</li>
<li><a href="20170711122112.html" title="下(xià)午朋友來看我(wǒ)(wǒ)">下(xià)午朋友來看我(wǒ)(wǒ)</a>2-11</li>
<li><a href="20170711122112.html" title="^_^ 發工(gōng)資(zī)拉">^_^ 發工(gōng)資(zī)拉,</a>2-10</li>
<li><a href="20170711122112.html" title="...">...........</a> ....</li>
</ol>
</body>
</<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>>
[Ctrl+A 全部選擇 提示：你可先修改部分(fēn)代碼，再按運行]
CSS部分(fēn)
ol.news{
width:400px;/*裝飾用的~隻限顯示的數據總寬度 */
list-style-type :none;/*去(qù)掉列表數據*/
}
ol.news li{
text-align:right;/* 把文本右對齊,主要的作用是把時間放(fàng)在右邊*/
clear:both;/*清行*/
}
ol.news li a{
float:left;
display : inline;/* 再把主要顯示的内容浮動到左邊*/
text-align:left;/* 文本左對齊,可選~保證更多的浏覽器是左對齊*/
}
運行代碼框
<!DOCTYPE <a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> PUBLIC "-//W3C//DTD X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> 1.1//EN" "http://www.w3.org/TR/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11/DTD/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11.dtd">
<<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> <a href="http://www.blue1000.com/bkhtml/c21/" title="XML教程">XML</a>ns="http://www.w3.org/1999/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>">
<head>
<title>X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>中(zhōng)的表格介紹及表格的模拟 - Beautiful Style « 樣式之美 » </title>
<meta http-equiv="Content-Type" content="text/<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>; charset=gb2312" />
<meta name="KEY<a href="http://www.blue1000.com/bkhtml/c117/" title="Word教程">word</a>s" content="<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>,x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>" />
<meta name="DEscription" content="<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>" />
<meta name="author" content="RotUI" />
<meta content="all" name="robots" />
<link rel="start" href="http://www.rotui.net" title="Home" />
<body>
<style type="text/<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>">
ol.news{
width:400px;/*裝飾用的~隻限顯示的數據總寬度 */
list-style-type :none;/*去(qù)掉列表數據*/
}
ol.news li{
text-align:right;/* 把文本右對齊,主要的作用是把時間放(fàng)在右邊*/
clear:both;/*清行*/
}
ol.news li a{
float:left;
display : inline;/* 再把主要顯示的内容浮動到左邊*/
text-align:left;/* 文本左對齊,可選~保證更多的浏覽器是左對齊*/
}
</style>
<ol class="news">
<li><a href="20170711122112.html" title="晚上我(wǒ)(wǒ)沒吃飯">晚上我(wǒ)(wǒ)沒吃飯</a>2-13</li>
<li><a href="20170711122112.html" title="今天是中(zhōng)國的情人節,要一(yī)個人過">今天是中(zhōng)國的情人節,要一(yī)個人過</a>2-12</li>
<li><a href="20170711122112.html" title="下(xià)午朋友來看我(wǒ)(wǒ)">下(xià)午朋友來看我(wǒ)(wǒ)</a>2-11</li>
<li><a href="20170711122112.html" title="^_^ 發工(gōng)資(zī)拉">^_^ 發工(gōng)資(zī)拉,</a>2-10</li>
<li><a href="20170711122112.html" title="...">...........</a> ....</li>
</ol>
</body>
</<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>>
[Ctrl+A 全部選擇 提示：你可先修改部分(fēn)代碼，再按運行]
另一(yī)種方法:
HTML
<ul class="news2">
<li><span>[廣東]</span>這裏沒電了</li>
<li><span>[四川]</span>這裏也沒電了</li>
<li><span>[上海]</span>郁悶!同上,沒電啊~</li>
<li><span>[北(běi)京]</span>挖哈哈 ^_^ 這裏有電~</li>
<li><span>....</span>........</li>
</ul>
CSS
ul.news2{
width:400px;
list-style-type :none;
}
ul.news2 li{
text-align:left;/*這回向左對齊,因爲我(wǒ)(wǒ)們要把span浮到右邊*/
}
ul.news2 li span
{
float:right;/*我(wǒ)(wǒ)浮我(wǒ)(wǒ)浮我(wǒ)(wǒ)浮浮浮,我(wǒ)(wǒ)在右邊了*/
display : inline;
}
運行代碼框
<!DOCTYPE <a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> PUBLIC "-//W3C//DTD X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> 1.1//EN" "http://www.w3.org/TR/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11/DTD/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11.dtd">
<<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> <a href="http://www.blue1000.com/bkhtml/c21/" title="XML教程">XML</a>ns="http://www.w3.org/1999/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>">
<head>
<title>X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>中(zhōng)的表格介紹及表格的模拟 - Beautiful Style « 樣式之美 » </title>
<meta http-equiv="Content-Type" content="text/<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>; charset=gb2312" />
<meta name="KEY<a href="http://www.blue1000.com/bkhtml/c117/" title="Word教程">word</a>s" content="<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>,x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>" />
<meta name="DEscription" content="<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>" />
<meta name="author" content="RotUI" />
<meta content="all" name="robots" />
<link rel="start" href="http://www.rotui.net" title="Home" />
<style type="text/<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>">
ul.news2{
width:400px;
list-style-type :none;
}
ul.news2 li{
text-align:left;/*這回向左對齊,因爲我(wǒ)(wǒ)們要把span浮到右邊*/
}
ul.news2 li span
{
float:right;/*我(wǒ)(wǒ)浮我(wǒ)(wǒ)浮我(wǒ)(wǒ)浮浮浮,我(wǒ)(wǒ)在右邊了*/
display : inline;
}
</style>
<body>
<ul class="news2">
<li><span>[廣東]</span>這裏沒電了</li>
<li><span>[四川]</span>這裏也沒電了</li>
<li><span>[上海]</span>郁悶!同上,沒電啊~</li>
<li><span>[北(běi)京]</span>挖哈哈 ^_^ 這裏有電~</li>
<li><span>....</span>........</li>
</ul>
</body>
</<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>>
[Ctrl+A 全部選擇 提示：你可先修改部分(fēn)代碼，再按運行]
更多的裝飾
我(wǒ)(wǒ)們可以加background,border,font等定義~可以把他定義得漂亮點,不過這裏的目的已經達到了,漂亮的樣式等大(dà)家自己去(qù)嘗試
2、三列多行的數據顯示:
這裏依然選擇文章列表來做演示,選擇标簽爲ol,li,a,address,i.當然,你也可以依照你的文檔資(zī)料選擇如span,b,s等來做
<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>一(yī)葉千鳥</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>
運行代碼框
<!DOCTYPE <a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> PUBLIC "-//W3C//DTD X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> 1.1//EN" "http://www.w3.org/TR/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11/DTD/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11.dtd">
<<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> <a href="http://www.blue1000.com/bkhtml/c21/" title="XML教程">XML</a>ns="http://www.w3.org/1999/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>">
<head>
<title>X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>中(zhōng)的表格介紹及表格的模拟 - Beautiful Style « 樣式之美 » </title>
<meta http-equiv="Content-Type" content="text/<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>; charset=gb2312" />
<meta name="KEY<a href="http://www.blue1000.com/bkhtml/c117/" title="Word教程">word</a>s" content="<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>,x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>" />
<meta name="DEscription" content="<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>" />
<meta name="author" content="RotUI" />
<meta content="all" name="robots" />
<link rel="start" href="http://www.rotui.net" title="Home" />
<body>
<ol class="art">
<li><a href="20170711122112.html" title="...">[原創:JS]由淺到深了解<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">JavaScript</a>類</a><address>笨紅</address><i>2-9</i></li>
<li><a href="20170711122112.html" title="...">[原創:<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>]正确認識<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>與body </a><address>一(yī)葉千鳥</address><i>2-8</i></li>
<li><a href="20170711122112.html" title="...">[灌水:泡MM]沒有MM的日子怎樣過</a><address>嗷嗷</address><i>2-8</i></li>
<li><a href="20170711122112.html" title="...">........</a><address>....</address><i>....</i></li>
</ol>
</body>
</<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>>
[Ctrl+A 全部選擇 提示：你可先修改部分(fēn)代碼，再按運行]
CSS部分(fēn)
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;/*中(zhōng)文斜體(tǐ)不是很好看的說*/
float:left;display:inline;
}
ol.art li i{
font-style : normal;
float:left;display:inline;
}
運行代碼框
<!DOCTYPE <a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> PUBLIC "-//W3C//DTD X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> 1.1//EN" "http://www.w3.org/TR/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11/DTD/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11.dtd">
<<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> <a href="http://www.blue1000.com/bkhtml/c21/" title="XML教程">XML</a>ns="http://www.w3.org/1999/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>">
<head>
<title>X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>中(zhōng)的表格介紹及表格的模拟 - Beautiful Style « 樣式之美 » </title>
<meta http-equiv="Content-Type" content="text/<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>; charset=gb2312" />
<meta name="KEY<a href="http://www.blue1000.com/bkhtml/c117/" title="Word教程">word</a>s" content="<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>,x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>" />
<meta name="DEscription" content="<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>" />
<meta name="author" content="RotUI" />
<meta content="all" name="robots" />
<link rel="start" href="http://www.rotui.net" title="Home" />
<style type="text/<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>">
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;/*中(zhōng)文斜體(tǐ)不是很好看的說*/
float:left;display:inline;
}
ol.art li i{
font-style : normal;
float:left;display:inline;
}
</style>
<body>
<ol class="art">
<li><a href="20170711122112.html" title="...">[原創:JS]由淺到深了解<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">JavaScript</a>類</a><address>笨紅</address><i>2-9</i></li>
<li><a href="20170711122112.html" title="...">[原創:<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>]正确認識<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>與body </a><address>一(yī)葉千鳥</address><i>2-8</i></li>
<li><a href="20170711122112.html" title="...">[灌水:泡MM]沒有MM的日子怎樣過</a><address>嗷嗷</address><i>2-8</i></li>
<li><a href="20170711122112.html" title="...">........</a><address>....</address><i>....</i></li>
</ol>
</body>
</<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>>
[Ctrl+A 全部選擇 提示：你可先修改部分(fēn)代碼，再按運行]
總結
當做到三列時~我(wǒ)(wǒ)發現我(wǒ)(wǒ)已經一(yī)步一(yī)步的走向我(wǒ)(wǒ)反對的那種模拟了.
HTML4的時代table,table已經成爲基本所有的網頁設計用來布局的工(gōng)具, XHTML1.x的時代table的任務隻是數據顯示,我(wǒ)(wǒ)支持表格的使用,不過不是用來布局的, 要想完全抛棄table,我(wǒ)(wǒ)認爲應該等到浏覽器們都支持display: table的CSS2才可以
以前文章隻是個人看法,在WEB設計中(zhōng)我(wǒ)(wǒ)屬于學得晚的,學得菜的,可能裏面說的有些不大(dà)對,也希望大(dà)家能幫我(wǒ)(wǒ)指出來
475003427