CSS练习---Grid Table
- table header渐变色
- table row交替色
- large table宽度770px,small table宽度400px
定义表格css,保存为GridTable.css
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
.largetable/**//*large table*/
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
width: 770px;
clear: both;
overflow: visible;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
.smalltable/**//*small table*/
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
width: 400px;
clear: both;
overflow: visible;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
div.grid/**//*table container*/
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
text-align: left;
vertical-align: middle;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
div.grid table/**//*grid table*/
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
border-width: 0px;
border-style: none;
border-color: #C1BBAB;
border-collapse: collapse;
empty-cells: show;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
div.grid th/**//*grid table header*/
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
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;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
div.grid td/**//*grid table cell*/
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
border-width: 1px;
border-style: solid;
padding: 1px 5px 1px 5px;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
/**//*Alternating Row Color */
tr.grid_rw1clr
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
background-color: #FFFFFF;
}
tr.grid_rw2clr
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
background-color: #F9F8F6;
}
应用GridTable.css到Table中
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<LINK REL=stylesheet HREF="GridTable.css" type="text/css"><!--import css file-->
</HEAD>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<BODY>
large table(width:770px)
<div class="grid">
<TABLE class="largetable">
<TR>
<TH>Header One</TH>
<TH>Header Two</TH>
<TH>Header Three</TH>
<TH>Header Four</TH>
</TR>
<TR class="grid_rw1clr">
<TD>Cell(1,1)</TD>
<TD>Cell(1,2)</TD>
<TD>Cell(1,3)</TD>
<TD>Cell(1,4)</TD>
</TR>
<TR class="grid_rw2clr">
<TD>Cell(2,1)</TD>
<TD>Cell(2,2)</TD>
<TD>Cell(2,3)</TD>
<TD>Cell(2,4)</TD>
</TR>
</TABLE>
</div>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
samll table(width:400px)
<div class="grid">
<TABLE class="smalltable">
<TR>
<TH>Header One</TH>
<TH>Header Two</TH>
<TH>Header Three</TH>
<TH>Header Four</TH>
</TR>
<TR class="grid_rw1clr">
<TD>Cell(1,1)</TD>
<TD>Cell(1,2)</TD>
<TD>Cell(1,3)</TD>
<TD>Cell(1,4)</TD>
</TR>
<TR class="grid_rw2clr">
<TD>Cell(2,1)</TD>
<TD>Cell(2,2)</TD>
<TD>Cell(2,3)</TD>
<TD>Cell(2,4)</TD>
</TR>
</TABLE>
</div>
</BODY>
</HTML>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
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
阅读(
3772)
评论()
编辑
收藏
举报