HTML+CSS教程:表格Table元素网页制作技巧

2013-09-26 21:55:58  来源:网页教学网 

网页制作Webjx文章简介:table元素在HTML中用于呈现表格数据。你可以把它作为一个描述和展示可用于电子表格的数据的方法。

高亮行与列

特别地高亮某一行是相当简单的,你只需要为该行添加一个类来指定它就可以了:

<tr class="highlight">   ... </tr> 

列的高亮有点儿棘手,一个可行的办法是使用<col>元素,它可以让我们为出现在那一列中的表格设置属性。这可能会让你有点迷糊,因为受到影响的表格并不是<col>实际的后代元素。

一个拥有4个列的表格在每一行都会有4个<col>元素:

<table>   <col>   <col>   <col>   <col>    <thead>      ...  </table> 

然后你可以高亮特定的一列,如:

col:nth-child(3) {   background: yellow;  } 

然而很少人会这样使用。如果你为某一行或某个单元格设置背景色,它总是会覆盖如上设置的某一列背景色。

你可能最好能为指定的某列的每一个单元格设置一个类,如:

td:nth-child(2), th:nth-child(2){   background: yellow; } 

高亮鼠标所在的行/列/单元格

单元格的高亮是非常简单的,你可以通过下面的CSS设置:

td:hover { /* th:hover also if you wish */   background: yellow; } 

行的高亮也相当简单。你可以设置鼠标所在的表格行的背景色,这样只要鼠标经过背景色便会改变,但前提是你不设置单元格的背景色。

tbody tr:hover {   background: yellow; } 

如果你设置了单元格的背景色,你也可以通过tr:hover td, tr:hover th { }来达到同样的效果,也还是相当简单的。

列的高亮有点儿麻烦,你不能使用col:hover来实现,因为这个列元素并不是实际的占据了像素空间的元素,因此鼠标也无法悬浮到该元素上。唯一的方法就是通过Javascript来实现。

它的工作方式如下:

  1. 得到一个所有单元格的集合。
  2. 绑定 mouseover 和 mouseout 事件到每一个单元格元素。
  3. 当 mouseover 事件触发时,得到单元格在该行中的位置。
  4. 遍历所有的行,并为每一行的那个位置的单元格添加一个高亮类。
  5. 当 mouseout 事件触发时,移除所有单元格的高亮类。

下面我在一个例子中结合使用了行和列的高亮,我使用jQuery使JS代码减少到12行(原生JS太过费劲)。

但实现的原理是相同的,只不过使用jQuery可以更快地得到元素的集合,并能快速的得到单元格在行中所处的位置。

更多