[CSS]制作漂亮表格

<html>
<head>
<style type="text/css">
#customers
{
font-family
:"Trebuchet MS", Arial, Helvetica, sans-serif;
width
:100%;
border-collapse
:collapse;
}

#customers td, #customers th
{
font-size
:1em;
border
:1px solid #98bf21;
padding
:3px 7px 2px 7px;
}

#customers th
{
font-size
:1.1em;
text-align
:left;
padding-top
:5px;
padding-bottom
:4px;
background-color
:#A7C942;
color
:#ffffff;
}

#customers tr.alt td
{
color
:#000000;
background-color
:#EAF2D3;
}
</style>
</head>

<body>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>

<tr>
<td>Apple</td>
<td>Steven Jobs</td>
<td>USA</td>
</tr>

<tr class="alt">
<td>Baidu</td>
<td>Li YanHong</td>
<td>China</td>
</tr>

<tr>
<td>Google</td>
<td>Larry Page</td>
<td>USA</td>
</tr>

<tr class="alt">
<td>Lenovo</td>
<td>Liu Chuanzhi</td>
<td>China</td>
</tr>

<tr>
<td>Microsoft</td>
<td>Bill Gates</td>
<td>USA</td>
</tr>

<tr class="alt">
<td>Nokia</td>
<td>Stephen Elop</td>
<td>Finland</td>
</tr>


</table>
</body>
</html>

效果:


posted on 2011-08-18 17:28  Allen_Chang  阅读(841)  评论(0编辑  收藏  举报

导航