html部分，biaoge.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Top 10 Express Table Designs - Smashing Magazine Source</title> <style type="text/css"> <!-- @import url("style.css"); --> </style> </head> <body> <table id="background-image" summary="Meeting Results"> <thead> <tr> <th scope="col">Employee</th> <th scope="col">Division</th> <th scope="col">Suggestions</th> </tr> </thead> <tfoot> <tr> <td colspan="4">IE 6 users won't see the transparent background if the hack is not applied</td> </tr> </tfoot> <tbody> <tr> <td>Stephen C. Cox</td> <td>Marketing</td> <td>Make discount offers</td> </tr> <tr> <td>Josephin Tan</td> <td>Advertising</td> <td>Give bonuses</td> </tr> <tr> <td>Joyce Ming</td> <td>Marketing</td> <td>New designs</td> </tr> <tr> <td>James A. Pentel</td> <td>Marketing</td> <td>Better Packaging</td> </tr> </tbody> </table> </body> </html>
css部分，style.css
/* ------------------
styling for the tables
------------------ */
body
{
line-height: 1.6em;
}
#background-image
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 45px;
480px;
text-align: left;
border-collapse: collapse;
background: url('table-images/blurry.jpg') 330px 59px no-repeat;
}
#background-image th
{
padding: 12px;
font-weight: normal;
font-size: 14px;
color: #339;
}
#background-image td
{
padding: 9px 12px;
color: #669;
border-top: 1px solid #fff;
}
#background-image tfoot td
{
font-size: 11px;
}
#background-image tbody td
{
background: url('table-images/back.png');
}
* html #background-image tbody td
{
/*
----------------------------
PUT THIS ON IE6 ONLY STYLE
AS THE RULE INVALIDATES
YOUR STYLESHEET
----------------------------
*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='table-images/back.png',sizingMethod='crop');
background: none;
}
#background-image tbody tr:hover td
{
color: #339;
background: none;
}
效果图
