`

表格隔行变色

Mobile 
阅读更多 
<html>
<head>
<title>Member List</title>
<style>
<!--
.datalist{
 border:1px solid #0058a3; 
 font-family:Arial;
 border-collapse:collapse; 
 background-color:#eaf5ff; 
 font-size:14px;
}
.datalist caption{
 padding-bottom:5px;
 font:bold 1.4em;
 text-align:left;
}
.datalist th{
 border:1px solid #0058a3; 
 background-color:#4bacff; 
 color:#FFFFFF;    
 font-weight:bold;
 padding-top:4px; padding-bottom:4px;
 padding-left:12px; padding-right:12px;
 text-align:center;
}
.datalist td{
 border:1px solid #0058a3; 
 text-align:left;
 padding-top:4px; padding-bottom:4px;
 padding-left:10px; padding-right:10px;
}
.datalist tr.altrow{
 background-color:#c7e5ff; 
}
-->
</style>
   </head>
<body>
<table class="datalist" summary="list of members in EE Studay">
 <caption>Member List</caption>
 <tr>
  <th scope="col">Name</th>
  <th scope="col">Class</th>
  <th scope="col">Birthday</th>
  <th scope="col">Constellation</th>
  <th scope="col">Mobile</th>
 </tr>
 <tr>     <!-- 奇数行 -->
  <td>isaac</td>
  <td>W13</td>
  <td>Jun 24th</td>
  <td>Cancer</td>
  <td>1118159</td>
 </tr>
 <tr class="altrow">  <!-- 偶数行 -->
  <td>girlwing</td>
  <td>W210</td>
  <td>Sep 16th</td>
  <td>Virgo</td>
  <td>1307994</td>
 </tr>
 <tr>     <!-- 奇数行 -->
  <td>tastestory</td>
  <td>W15</td>
  <td>Nov 29th</td>
  <td>Sagittarius</td>
  <td>1095245</td>
 </tr>
 <tr class="altrow">  <!-- 偶数行 -->
  <td>lovehate</td>
  <td>W47</td>
  <td>Sep 5th</td>
  <td>Virgo</td>
  <td>6098017</td>
 </tr>
 <tr>     <!-- 奇数行 -->
  <td>slepox</td>
  <td>W19</td>
  <td>Nov 18th</td>
  <td>Scorpio</td>
  <td>0658635</td>
 </tr>
 <tr class="altrow">  <!-- 偶数行 -->
  <td>smartlau</td>
  <td>W19</td>
  <td>Dec 30th</td>
  <td>Capricorn</td>
  <td>0006621</td>
 </tr>
 <tr>     <!-- 奇数行 -->
  <td>whaler</td>
  <td>W19</td>
  <td>Jan 18th</td>
  <td>Capricorn</td>
  <td>1851918</td>
 </tr>
 <tr class="altrow">  <!-- 偶数行 -->
  <td>shenhuanyan</td>
  <td>W25</td>
  <td>Jan 31th</td>
  <td>Aquarius</td>
  <td>0621827</td>
 </tr>
 <tr>     <!-- 奇数行 -->
  <td>tuonene</td>
  <td>W210</td>
  <td>Nov 26th</td>
  <td>Sagittarius</td>
  <td>0091704</td>
 </tr>
 <tr class="altrow">  <!-- 偶数行 -->
  <td>ArthurRivers</td>
  <td>W91</td>
  <td>Feb 26th</td>
  <td>Pisces</td>
  <td>0468357</td>
 </tr>
 <tr>     <!-- 奇数行 -->
  <td>reconzansp</td>
  <td>W09</td>
  <td>Oct 13th</td>
  <td>Libra</td>
  <td>3643041</td>
 </tr>
 <tr class="altrow">  <!-- 偶数行 -->
  <td>linear</td>
  <td>W86</td>
  <td>Aug 18th</td>
  <td>Leo</td>
  <td>6398341</td>
 </tr>
 <tr>     <!-- 奇数行 -->
  <td>laopiao</td>
  <td>W41</td>
  <td>May 17th</td>
  <td>Taurus</td>
  <td>1254004</td>
 </tr>
 <tr class="altrow">  <!-- 偶数行 -->
  <td>dovecho</td>
  <td>W19</td>
  <td>Dec 9th</td>
  <td>Sagittarius</td>
  <td>1892013</td>
 </tr>
 <tr>     <!-- 奇数行 -->
  <td>shanghen</td>
  <td>W42</td>
  <td>May 24th</td>
  <td>Gemini</td>
  <td>1544254</td>
 </tr>
 <tr class="altrow">  <!-- 偶数行 -->
  <td>venessawj</td>
  <td>W45</td>
  <td>Apr 1st</td>
  <td>Aries</td>
  <td>1523753</td>
 </tr>
 <tr>     <!-- 奇数行 -->
  <td>lightyear</td>
  <td>W311</td>
  <td>Mar 23th</td>
  <td>Aries</td>
  <td>1002908</td>
 </tr>
</table>
</body>
</html>

 

分享到：
| xml与css-1
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    网页里面表格隔行变色代码

    在本案例中，"网页里面表格隔行变色代码" 描述了一种实现表格隔行变色的方法，包括奇偶数行的变色以及点击变色的效果。 首先，我们来了解如何实现基础的表格隔行变色。在HTML中，`&lt;table&gt;`元素用于创建表格，`&lt;tr&gt;`...

    JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】

    ### JavaScript表格隔行变色 #### 知识点1：JavaScript表格隔行变色基本原理 JavaScript表格隔行变色是一种常见的前端视觉效果，通过为表格中的行设置不同的背景颜色，使得用户浏览时能够更加容易地分辨不同的行。...

    表格隔行变色，jquerys

    在本案例中，我们将探讨如何利用jQuery这一强大的JavaScript库来实现表格隔行变色的效果。 首先，jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。对于表格...

    jquery表格隔行变色鼠标滑过竖直表格内容变色效果

    本主题涉及的是使用jQuery实现的一种常见的用户界面优化技巧——"表格隔行变色"以及"鼠标滑过时竖直表格内容变色效果"。这种效果可以提升表格的可读性，使得数据更加清晰易辨。 首先，我们来讨论“表格隔行变色”。...

    表单数据验证_表格隔行变色效果_复选框的操作_好友列表_省市菜单联动效果

    在IT领域，网页开发是不可或缺的一部分，而表单数据验证、表格隔行变色效果、复选框操作、好友列表以及省市菜单联动效果都是网页交互中的常见功能。这些功能不仅提升了用户体验，也是开发者必备的技能。下面将详细...

    表格颜色自动隔行变色

    "表格颜色自动隔行变色"是一种常见的美化技巧，它可以使表格看起来更清晰、更易读，帮助用户快速区分不同行的数据。这个功能在Excel、WPS表格、Google Sheets等常见表格软件中都有提供。下面我们将深入探讨这一主题...

    03-表格隔行变色.html

    03-表格隔行变色.html

    表格隔行变色功能的实现

    表格隔行变色功能的实现（当鼠标经过当前行变颜色，当鼠标离开当前行变颜色，利用鼠标经过和离开事件完成）！！!

    jquery table ui插件制作css表格隔行变色特效代码

    总结，实现`jQuery table UI`插件制作的CSS表格隔行变色特效，主要分为以下几步： 1. 创建基本的HTML表格结构。 2. 引入`jQuery`库和`Table UI`插件的CSS和JS文件。 3. 使用`jQuery`选择器和CSS样式实现隔行变色。 4...

    jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码

    在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...

    javascript表格隔行变色加鼠标移入移出及点击效果的方法.docx

    ### JavaScript表格隔行变色及鼠标交互效果实现 在网页设计与开发中，为了提升用户体验，经常需要对表格中的数据进行美化处理。其中一项常用的技术就是实现表格的隔行变色以及鼠标移入移出、点击等交互效果。本文将...

    js表格变色制作表格隔行变色,滑过选中变色特效

    为了提高用户的阅读体验，有时候我们需要对表格进行美化，例如实现隔行变色、鼠标滑过时选中变色等特效。本教程将详细介绍如何使用JavaScript来实现这些效果。 首先，让我们了解一下JavaScript在网页中的作用。...

    原生JS操作网页给p元素添加onclick事件及表格隔行变色

    其次，表格隔行变色也是常见的网页视觉效果之一，可以增加用户的视觉体验。通过CSS可以较容易地实现这一效果，但在原生JS中实现则需要通过脚本动态改变样式。在本例中，首先通过document.getElementById()方法获取到...

    表格隔行换色 鼠标移过变色

    "表格隔行换色 鼠标移过变色"是两种常见的表格样式优化手段，它们可以使得表格内容更易于阅读，同时提升用户体验。在JavaScript（JS）的帮助下，我们可以轻松实现这些效果。 1. **隔行换色**： 隔行换色通常使用...

    jquery 15天学习笔记 02 table表格 隔行变色的问题

    隔行变色是一种常见的网页设计技巧，它能提高表格数据的可读性，使用户更容易区分和浏览数据行。 首先，我们需要了解HTML表格的基本结构，它由`&lt;table&gt;`元素作为容器，`&lt;tr&gt;`元素表示行，`&lt;th&gt;`元素用于表头，而`...

    实现表格的隔行变色

    在网页设计中，为了提升数据展示的可读性和美观性，常常会采用隔行变色的技巧来对表格进行美化。隔行变色使得用户在查看大量数据时能更容易地区分每一行，从而减轻视觉疲劳，提高阅读效率。本文将详细讲解如何实现...

    表格渲染(悬浮变色,隔行换色,点击变色)

    /** * * @author 翟正强 广东中山中南中南T25班 * @version1.0 * @2009-09-08 * @表格渲染(悬浮变色,隔行换色,点击变色) */

    js实现表格隔行变色

    在这个函数中，我们进行表格隔行变色的设置。 `document.getElementById('dve1')`是获取ID为'dve1'的HTML元素，通常情况下，这将是一个`&lt;table&gt;`标签，代表我们要操作的表格。然后，`getElementsByTagName('tr')`...

Magicbox
Global site tag (gtag.js) - Google Analytics