下面為HTML
<html>
<head>
<title>table表格css樣式-</title>
<link rel="stylesheet" href="table.css" type="text/css" media="screen" />
</head>
<body>
<table class="admintable" width="100%">
<tr>
<th class="adminth">標題<th></th>
<th class="adminth">標題<th></th>
<th class="adminth">標題<th></th>
<th class="adminth">標題<th></th>
</tr>
<tr>
<td class="admincls0">內容1</td>
<td class="admincls0">內容1</td>
<td class="admincls0"></td>
<td class="admincls0">內容1</td>
</tr>
<tr>
<td class="admincls1">內容1</td>
<td class="admincls1">內容1</td>
<td class="admincls1"></td>
<td class="admincls1">內容1</td>
</tr>
<tr>
<td class="admincls0">內容1</td>
<td class="admincls0">內容1</td>
<td class="admincls0">內容1</td>
<td class="admincls0">內容1</td>
</tr>
<tr>
<td class="admincls1">內容1</td>
<td class="admincls1">內容1</td>
<td class="admincls1"></td>
<td class="admincls1">內容1</td>
</tr>
</table>
<p> </p>
<table width="245" height="241" border="1" cellspacing="0" bordercolor="#99BCFC">
<tr>
<th class="adminth_s2" width="57" scope="row">標題</th>
<td width="178" bgcolor="#EAEAEA"><p>
<input name="textfield" type="text" id="textfield" size="25" />
</p> </td>
</tr>
<tr>
<th class="adminth_s2" scope="row">標題</th>
<td bgcolor="#EAEAEA"><p>
<input name="textfield2" type="text" id="textfield2" size="25" />
</p> </td>
</tr>
<tr>
<th class="adminth_s2" scope="row">標題</th>
<td bgcolor="#EAEAEA"><p>
<input name="textfield3" type="text" id="textfield3" size="25" />
</p> </td>
</tr>
<tr>
<th class="adminth_s2" scope="row">標題</th>
<td bgcolor="#EAEAEA"><p>
<input name="fileField" type="file" id="fileField" size="15" />
</p> </td>
</tr>
<tr>
<th class="adminth_s2" scope="row">標題</th>
<td bgcolor="#EAEAEA"> <p>
<textarea name="textarea" id="textarea" cols="23" rows="6"></textarea>
</p> </td>
</tr>
</table>
<p> </p>
<table width="200" class="admintable_s2" cellspacing="0">
<tr>
<td class="admintd">標題</td>
<td>內容</td>
</tr>
<tr>
<td class="admintd">標題</td>
<td>內容</td>
</tr>
<tr>
<td class="admintd">標題</td>
<td>內容</td>
</tr>
</table>
<p> </p>
<table width="200" class="stage" cellspacing="0">
<tr>
<td colspan="2" class="stagetd">標題內容stagetd</td>
</tr>
<tr class="stagetr_tr1">
<td>內容</td>
<td>內容</td>
</tr>
<tr class="stagetr_tr2">
<td>內容</td>
<td>內容</td>
</tr>
<tr class="stagetr_tr1">
<td>內容</td>
<td>內容</td>
</tr>
<tr class="stagetr_tr2">
<td>內容</td>
<td>內容</td>
</tr>
</table>
<p> </p>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
下面為css
table.admintable {
border:1px solid #AEDEF2;
border-collapse: collapse;
}
table.admintable_s2{
color:#658fd4;
border-bottom:#aedef2 thin solid;
border-left:#aedef2 thin solid;
border-right:#aedef2 thin solid;
border-top:#aedef2 thin solid;
background-color: #eef6fe;
font-size:12px;
font-family:"新宋體";
overflow:auto;
}
td.admintd{
color: #0066cc;
font-size:14px;
color:#05B;
}
th.adminth {
width: 671px;
color: #0066cc;
background-color: #eef6fe;
font-size:14px;
color:#05B;
border:1px solid #AEDEF2;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#AEDEF2,endColorStr=ghostwhite);
}
th.adminth_s2 {
width: 671px;
color: #0066cc;
background-color: #eef6fe;
font-size:14px;
color:#05B;
border:1px solid #AEDEF2;
}
td.admincls0 {
border:1px solid #AEDEF2;
background:ghostwhite;
font-size:12px;
font-family: 新宋體;
color: #333;
}
td.admincls1 {
border:1px solid #AEDEF2;
background:#DAF0F1;
font-size:12px;
font-family: 新宋體;
color: #333;
}
th.menu {
color: #006699;
font-family: "新宋體";
font-size: 14px;
}
td.stagetd{
color:#236E11;
font-size:14px;
font-family:"新宋體";
border-bottom:#456602 thin dashed;
background:#EBFEC5;
}
table.stage{
border-bottom:#FFFFFF thin solid;
border-left:#FFFFFF thin solid;
border-right:#FFFFFF thin solid;
border-top:#FFFFFF thin solid;
font-size:14px;
font-family:"新宋體";
overflow:auto;
}
tr.stagetr_tr1{
border-bottom:#FFFFFF thin solid;
border-left:#FFFFFF thin solid;
border-right:#FFFFFF thin solid;
border-top:#FFFFFF thin solid;
background-color: #EBFEC5;
font-size:12px;
font-family:"新宋體";
}
tr.stagetr_tr2{
border-bottom:#FFFFFF thin solid;
border-left:#FFFFFF thin solid;
border-right:#FFFFFF thin solid;
border-top:#FFFFFF thin solid;
font-size:12px;
font-family:"新宋體";
}
以下為效果：
標題<th> |
標題<th> |
標題<th> |
標題<th> |
內容1
內容1
內容1
內容1
內容1
內容1
內容1
內容1
內容1
內容1
內容1
內容1
內容1
內容1
標題 |
標題 |
標題 |
標題 |
標題 |
標題
內容
標題
內容
標題
內容
標題內容stagetd
內容
內容
內容
內容
內容
內容
內容
內容
參考：
http:///a/bjac/yk6l1vko.htm
http:///a/bjad/1rp5vfq4.htm
http:///a/bjad/y20tu6yi.htm