css控制表格

博月

1、表格中的标记
　　在<table>标记中除了使用了border属性勾勒出表格的边框外，还使用了summary属性。该属性的值用于概括整个表格的内容，在用浏览器浏览页面时，它的效果是不可见的，但对搜索引擎等则十分重要。
　　<caption>标记的作用跟它的名称一样，就是表格的大标题，该标记可以出现在<table>与</table>之间的任意位置，不过通常习惯放在表格的第1行，即紧接着<table>标记。设计者同样可以使用一个普通的行来显示表格的标题，但<caption>标记无论是对于好的编码习惯，还是搜索引擎而言，都是占有绝对优势的。
2、表格的背景颜色
　　通过background-color:#FFFFFF;属性设置表格的背景颜色。
3、表格的边框
　　border属性是最常用的属性之一，"<table border="5">"
　　通常单元格的边框之间会有空隙，这时候就需要设置CSS中整个表格的border-collapse属性，使得边框重叠在一起
　　border-collapse:collapse;
　　表格实例一：隔行变色
　　表格实例二：鼠标经过时变色的表格
　　对于Firefox浏览器而言，仅仅通过CSS便可以实现该效果，为<tr>标记添加如下代码：
.datalist tr:hover,{
　　background-color:#FFFFFF;
}
　　即直接调用<tr>标记的伪类别（Anchor Pseudo Classes）hover来实现动态的变色效果。
　　而IE浏览器并不支持<tr>标记的伪类别，因此必须采用JaveScript动态的配合，为<tr>标记添加CSS类型如下：
.datalist tr:hover,.datalist tr.altrow{
　　background-color:#FFFFFF;
}
　　然后在</table>后添加JaveScript代码，以提取表格中的<tr>标记，并用函数判断鼠标指针是否移动到了某行上，如果移动到了某行上，则调用新的CSS属性使该行背景变色，JaveScript代码如下：
<script language="javascript">
　　var rows = document.getElementsByTagName('tr');
　　for (var i=0;i<rows.length;i++){
　　　　rows[i].onmouseover = function(){   //鼠标在行上面的时候
　　　　　　this.className += 'altrow';
　　　　}
　　　　rows[i].onmouseout = function(){   //鼠标离开时
　　　　　　this.className = this.className.replace('altrow','');
　　　　}
　　}
</script>

xiangshi

太专业了，看了半天没搞懂

wg0006

太专业了