[1]表格应用
1表格的基本标签
2分析表格的基本标签
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 }
2、分析表格的基本标签:
table
table元素定义一个表格的开始
tr
表格中的行
THEAD
表头
TBODY
表的主体
TFOOT
表底
COL
指定基于列的表格默认属性,嵌套的 COL 属性将覆盖 COLGROUP 属性
COLGROUP
指定表格中一列或一组列的默认属性。
TD, TH
单元格
CAPTION
表名
3、基本演示:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>XHTML中的表格介绍及表格的模拟 - Beautiful Style &laquo; 样式之美 &raquo; </title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="KEYWords" content="css,xhtml" /> <meta name="DEscription" content="CSS" /> <meta name="author" content="RotUI" /> <meta content="all" name="robots" /> <link rel="start" href="http://www.rotui.net" title="Home" /> <style type="text/css"> /*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("http://rotui.net/images/bg.jpg") repeat top center; width : 200px; /* IE only start */ /* 非IE的浏览器都不支持非width background以外的定义 */ color : White; text-align : right; } table.tab thead th{ background-color : Black;/*由于colgroup 定义了背景 th没定义 会因浏览器不同解析不同*/ /*IE,Opera,Netscape会使用colgroup 定义的背景 MOZ系列的不会 非WIN系统浏览未测试 */ 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> </html> |
表格的模拟
1、模拟前的建议:
DIV就是DIV 而不是table,极力反对变下面这样的DIV模拟表格,偶尔也考虑考虑一下亲和力
<div>
<div>
<div>…</div>
</div>
</div>
2、两列多行的数据显示:
两列多行的数据显示应用得最多的是文章列表之类的,一般来说主要由标题,时间组成的.
我选择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>