Css练习---Grid Table

table header渐变色
table row交替色
large table宽度770px，small table宽度400px

定义表格css,保存为GridTable.css

.largetable/*large table*/

{

width: 770px;

clear: both;

overflow: visible;

}

.smalltable/*small table*/

{

width: 400px;

clear: both;

overflow: visible;

}

div.grid/*table container*/

{

text-align: left;

vertical-align: middle;

}

div.grid table/*grid table*/

{

border-width: 0px;

border-style: none;

border-color: #C1BBAB;

border-collapse: collapse;

empty-cells: show;

}

div.grid th/*grid table header*/

{

background-color: #E0DDD5;

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#E0DDD5', EndColorStr='#FFFFFF');

text-align: center;

border-width: 1px;

border-style: solid;

padding: 1px 5px 2px 5px;

text-transform: capitalize;

}

div.grid td/*grid table cell*/

{

border-width: 1px;

border-style: solid;

padding: 1px 5px 1px 5px;

}

/*Alternating Row Color */

tr.grid_rw1clr

{

background-color: #FFFFFF;

}

tr.grid_rw2clr

{

background-color: #F9F8F6;

}

应用GridTable.css到Table中

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

large table(width:770px)

<TR>

<TH>Header One</TH>

<TH>Header Two</TH>

<TH>Header Three</TH>

<TH>Header Four</TH>

</TR>

</TR>

</TR>

</TABLE>

</div>

samll table(width:400px)

<TR>

<TH>Header One</TH>

<TH>Header Two</TH>

<TH>Header Three</TH>

<TH>Header Four</TH>

</TR>

</TR>

</TR>

</TABLE>

</div>

</BODY>

</HTML>

Grid Table效果示例
large table(width:770px)

Header One	Header Two	Header Three	Header Four
Cell(1,1)	Cell(1,2)	Cell(1,3)	Cell(1,4)
Cell(2,1)	Cell(2,2)	Cell(2,3)	Cell(2,4)

samll table(width:400px)

Header One	Header Two	Header Three	Header Four
Cell(1,1)	Cell(1,2)	Cell(1,3)	Cell(1,4)
Cell(2,1)	Cell(2,2)	Cell(2,3)	Cell(2,4)

posted on 2008-04-23 22:05 Agan@CN 阅读(3771) 评论(18) 编辑收藏举报