HTML-表格的奇数偶数行颜色不同

来源：互联网发布：浏览器打不开淘宝图片编辑：程序博客网时间：2024/05/22 13:51

/* *Copyright (c) 2017，烟台大学计算机学院 All rights reserved. *文件名称：关于HTML的练习*作    者：张晴晴 *完成日期：201711月5日 *版 本 号：v1.0  * *问题描述：HTML5的新特性 *输入描述： 无*程序输出： 无*/ <!doctype html><html><head><meta charset="utf-8"><title>10-25 work</title><style> body{ background-color:#CCC; font-size:12px; font-family:"宋体"; } table{ margin:5px auto; width:60%; padding:5px; }  th{ background-color:#76B7BC; font-size:14px; padding:5px; }  .even td{/*必须加td，代表的是一行进行*/  background-color:#BCD7DA;  padding:5px 6px;  }    .odd td{  background-color:#FFF;;  padding:5px 6px;}</style></head><body><table width="200" border="0">  <tr>    <th>序号</td>    <th>姓名</td>    <th>班级</td>    <th>性别</td>    <th>电话</td>  </tr>  <tr class="odd">    <td>1</td>    <td>qqz</td>    <td>154</td>    <td>女</td>    <td>178555</td>  </tr>  <tr class="even">   <td>2</td>    <td>qqz</td>    <td>154</td>    <td>女</td>    <td>178555</td>  </tr>  <tr class="odd">   <td>3</td>    <td>qqz</td>    <td>154</td>    <td>女</td>    <td>178555</td>  </tr></table></body></html>

总结：奇数行偶数行设置不同上午class标识，不过在定义表示的时候一定要加上td，td代表一个单元格

运行结果：

阅读全文

0 0