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

最新推荐文章于 2024-07-12 18:29:20 发布

早日退休过上不劳而获生活

最新推荐文章于 2024-07-12 18:29:20 发布

阅读量2.2w

点赞数 4

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_34216631/article/details/78447924

版权

HTML 专栏收录该内容

37 篇文章 3 订阅

订阅专栏

/* 
*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代表一个单元格

运行结果：