html表格样式

来源：互联网发布：大数据app 编辑：程序博客网时间：2024/05/22 00:46

本文导读：CSS表格与表单是网页上最常见的元素，表格除了显示数据外，还常常被用来排版。CSS表格作为传统的HTML元素，一直受到网页设计者们的青睐。使用CSS表格来表示数据、制作调查表等在网络中屡见不鲜。同时因为CSS表格框架的简单、明了，使用没有边框的表格来排版，也受到很多设计者的喜爱。下面介绍CSS控制表格的方法，包括表格的颜色、标题、边框、背景等。

WEB2.0提倡使用div开布局，但不是要完全放弃使用表格，表格在数据展现方面还是不错的选择。

表格常见的应用

表格的颜色

例如

.datalist {     color: #0046a6;     background-color: #d2e8ff;     font-family: Arial;    }   .datalist caption {     font-size: 18px;     font-weight: bold;   }   .datalist th {     color: #003e7e;     background-color: #7bb3ff;   }

表格的边框
例如

.datalist {     border: 1px solid #007eff;     font-family: Arial;     border-collapse: collapse;   }   .datalist th, .datalist td {     border: 1px solid #429fff;   }

隔行变色

当表格的行列都很多、数据量很大的时候，单元格如果采用相同的背景色，用户在实际使用时会感到凌乱。通常的解决办法就是采用隔行变色，使得奇数行和偶数行的背景颜色不一样，达到数据一目了然的目的。

例如

.datalist tr.altrow {     background-color: #c7e5ff;    }

鼠标经过变色

对于长时间审核大量数据、浏览表格的用户来说，即使是隔行变色的表格，阅读时间长了仍然会感到疲劳。如果数据行能够动态的根据鼠标来变色，就使得页面充满了生机，最大程度的减少用户疲倦。

例如

.datalist tr:hover {     background-color: #c4e4ff;   }   .datalist tr:hover { background-color: #c4e4ff; }

下面介绍几个CSS表格的实例

一、单像素边框CSS表格

这是一个很常用的表格样式。

css样式、HTML代码

HTML 代码复制

<style type="text/css">table.gridtable {    font-family: verdana,arial,sans-serif;    font-size:11px;    color:#333333;    border-width: 1px;    border-color: #666666;    border-collapse: collapse;}table.gridtable th {    border-width: 1px;    padding: 8px;    border-style: solid;    border-color: #666666;    background-color: #dedede;}table.gridtable td {    border-width: 1px;    padding: 8px;    border-style: solid;    border-color: #666666;    background-color: #ffffff;}</style><!-- Table goes in the document BODY --><table class="gridtable"><tr>    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th></tr><tr>    <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td></tr><tr>    <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td></tr></table>

效果图：

二、带背景图的CSS样式表格

和上面差不多，不过每个格子里多了背景图。

cell-blue。jpg

cell-grey。jpg

1. 下载上面两张图，命名为cell-blue。jpg和cell-grey。jpg

2. 拷贝下面的代码到你想要的地方，记得修改图片url

3、css样式、HTML代码

HTML 代码复制

<!-- CSS goes in the document HEAD or added to your external stylesheet --><style type="text/css">table.imagetable {    font-family: verdana,arial,sans-serif;    font-size:11px;    color:#333333;    border-width: 1px;    border-color: #999999;    border-collapse: collapse;}table.imagetable th {    background:#b5cfd2 url('cell-blue。jpg');    border-width: 1px;    padding: 8px;    border-style: solid;    border-color: #999999;}table.imagetable td {    background:#dcddc0 url('cell-grey。jpg');    border-width: 1px;    padding: 8px;    border-style: solid;    border-color: #999999;}</style><!-- Table goes in the document BODY --><table class="imagetable"><tr>    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th></tr><tr>    <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td></tr><tr>    <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td></tr></table>

效果图

三、自动换整行颜色的CSS样式表格

这个CSS样式表格自动切换每一行的颜色，在我们需要频繁更新一个大表格的时候很有用。

代码：

HTML 代码复制

<!-- Javascript goes in the document HEAD --><script type="text/javascript">function altRows(id){    if(document.getElementsByTagName){                  var table = document.getElementById(id);          var rows = table.getElementsByTagName("tr");                  for(i = 0; i < rows.length; i++){                      if(i % 2 == 0){                rows[i].className = "evenrowcolor";            }else{                rows[i].className = "oddrowcolor";            }              }    }}window.onload=function(){    altRows('alternatecolor');}</script><!-- CSS goes in the document HEAD or added to your external stylesheet --><style type="text/css">table.altrowstable {    font-family: verdana,arial,sans-serif;    font-size:11px;    color:#333333;    border-width: 1px;    border-color: #a9c6c9;    border-collapse: collapse;}table.altrowstable th {    border-width: 1px;    padding: 8px;    border-style: solid;    border-color: #a9c6c9;}table.altrowstable td {    border-width: 1px;    padding: 8px;    border-style: solid;    border-color: #a9c6c9;}.oddrowcolor{    background-color:#d4e3e5;}.evenrowcolor{    background-color:#c3dde0;}</style><!-- Table goes in the document BODY --><table class="altrowstable" id="alternatecolor"><tr>    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th></tr><tr>    <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td></tr><tr>    <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td></tr></tr><tr>    <td>Text 3A</td><td>Text 3B</td><td>Text 3C</td></tr><tr>    <td>Text 4A</td><td>Text 4B</td><td>Text 4C</td></tr><tr>    <td>Text 5A</td><td>Text 5B</td><td>Text 5C</td></tr></table>

效果图：

四、鼠标悬停高亮的CSS样式表格

代码

HTML 代码复制

<style type="text/css">table.hovertable {    font-family: verdana,arial,sans-serif;    font-size:11px;    color:#333333;    border-width: 1px;    border-color: #999999;    border-collapse: collapse;}table.hovertable th {    background-color:#c3dde0;    border-width: 1px;    padding: 8px;    border-style: solid;    border-color: #a9c6c9;}table.hovertable tr {    background-color:#d4e3e5;}table.hovertable td {    border-width: 1px;    padding: 8px;    border-style: solid;    border-color: #a9c6c9;}</style><table class="hovertable"><tr>    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th></tr><tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">    <td>Item 1A</td><td>Item 1B</td><td>Item 1C</td></tr><tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">    <td>Item 2A</td><td>Item 2B</td><td>Item 2C</td></tr><tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">    <td>Item 3A</td><td>Item 3B</td><td>Item 3C</td></tr><tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">    <td>Item 4A</td><td>Item 4B</td><td>Item 4C</td></tr><tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">    <td>Item 5A</td><td>Item 5B</td><td>Item 5C</td></tr></table>

效果图

0 0