- table header渐变色
- table row交替色
- large table宽度770px，small table宽度400px
定义表格css,保存为GridTable.css
![]()
}
应用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>
<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>
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>
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) |
相关文章：