52-设置斑马纹效果的表格

来源：互联网发布：铁路车次查询软件编辑：程序博客网时间：2024/05/19 19:12
<!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>无标题文档</title><style type="text/css">table {background-color:#fff;border:1px solid #000;color:#565;font:12px arial;text-align:center;}table caption {font-size:24px;border-bottom:2px solid #b3de94;border-top:2px solid #b3de94;background-color:#b3de94;}tbody tr {background-color:#ccc;}thead tr, tfoot tr {backgrounnd:white;}td, th {padding:5px;border:2px solid #eee;border-bottom-color:#666;border-right-color:#666;}tbody tr.event{background-color:#aaa;}</style></head><body><table cellspacing="0">  <caption>  Product List  </caption>  <thead>    <tr>      <th>product</th>      <th>ID</th>      <th>Country</th>      <th>Price</th>      <th>Color</th>      <th>weight</th>    </tr>  </thead>  <tbody>    <tr>      <th>Computer</th>      <td>c184645</td>      <td>China</td>      <td>$3200.00</td>      <td>Black</td>      <td>5.20kg</td>    </tr>    <tr class="event">      <th>TV</th>      <td>c184645</td>      <td>China</td>      <td>$3200.00</td>      <td>Black</td>      <td>5.20kg</td>    </tr>    <tr>      <th>Phone</th>      <td>c184645</td>      <td>China</td>      <td>$3200.00</td>      <td>Black</td>      <td>5.20kg</td>    </tr>    <tr class="event">      <th>Recorder</th>      <td>c184645</td>      <td>China</td>      <td>$3200.00</td>      <td>Black</td>      <td>5.20kg</td>    </tr>    <tr>      <th>Washer</th>      <td>c184645</td>      <td>China</td>      <td>$3200.00</td>      <td>Black</td>      <td>5.20kg</td>    </tr>    <tr class="event">      <th >Freezer</th>      <td>c184645</td>      <td>China</td>      <td>$3200.00</td>      <td>Black</td>      <td>5.20kg</td>    </tr>  </tbody>  <tfoot>    <tr>      <th>Total</th>      <th colspan="5">6 products</th>    </tr>  </tfoot></table></body></html>