十个最简单实用的Table设计模板

  
表格恐怕是 Web 设计中最困难的一个对象了，感谢神秘的标记语言，有太多的细节我们需要关注了，而且表格缺乏浏览器的兼容性。虽然表格只是一个简单的元素，但是它浪费了我们大量的时间。有人甚至说，
标签是垃圾。其实表格本身并没有什么，是你自己使用的不当，把简单的事情弄的复杂了。这就是我写下本篇文章的原因，它将向你展示十个最简单表格设计方法。

准备
想必大家都知道 xhtml 1.0 strict 标准，下面是一个符合 xhtml 1.0 strict 标准的例子。

Html代码  
<!-- Table markup-->  
<table id="..." border="0">  
   
<!-- Table header -->  
<thead>  
    <tr>  
         <th id="..." scope="col">...</th>  
          ...   
    </tr>  
</thead>  
<!-- Table body -->  
<tbody>  
    <tr>  
         <td>...</td>  
         ...   
    </tr>  
    ...   
</tbody>  
<!-- Table footer -->     
<tfoot>  
    <tr>  
         <td>...</td>  
    </tr>  
</tfoot>  
</table>  

<!-- Table markup-->
<table id="..." border="0">

<!-- Table header -->
<thead>
    <tr>
         <th id="..." scope="col">...</th>
          ...
    </tr>
</thead>
<!-- Table body -->
<tbody>
    <tr>
         <td>...</td>
         ...
    </tr>
    ...
</tbody>
<!-- Table footer -->  
<tfoot>
    <tr>
         <td>...</td>
    </tr>
</tfoot>
</table>  


在我们开始之前，温习一下所谓的使用表格的规则:
表格的宽度
根据内容，小心的设置表格的宽度，如果你不知道确切的宽度的话，设置成100%准没错。如果内容很多把表格撑的很大的时候，把表格的宽度设置的大一些肯定比小一些要好看的多。
给 td 加点 padding
虽然在表格中 td 的排列很整齐，但是这并不是说，我们要把它们排列地很紧凑，给它们点间距，这样看起来就不那么难以阅读了。
表格就是文字
阅读表格与阅读文字是很类似的，而且会花费更多的时间去理解表格。所以当表格中有金额的时候，注意它的对比度。使用柔和的颜色，使之看起来更舒服一些。总之，要使表格的风格更容易阅读，而不是相反。
好，下面我们开始进入正题。
1. 水平简约型
所谓水平表格，顾名思义，就是水平地去看表格而不是竖直地看，它每一行都代表一个实体。你可以给这种表格设置最简约的风格：简单地给单元格（td and th ）设置足够的 padding ，在表头下设置2个像素的边框。



因为水平表格是被每行每行的阅读，所以清楚的行边界会起到事半功倍的效果。如果没有行边界，而且行数很多的情况下，表格阅读起来是很困难的。所以下面的表格中，我给每个 td 下加了一个像素的下边界。



请注意 tr:hover 一个很有用的辅助人们阅读表格的方法。当鼠标停留在一个单元格上时，这个单元格所在的行就会被标亮。如果表格有很多列时候，这个方法会很容易的追踪到你关注的行。
重点
仔细调整单元格之间的间距
优点
很简单的设计，对于简单的表格很合适
缺点
tr:hover 在IE6下不能使用, 如果表格有很多的列，看起来会很混乱
2. 竖直简约型
虽然使用很少，但竖直简约型表格经常用于分类或比较对象的描述，每一列代表的一个实体。我们可以在竖直简约型表格列之间加入空格来进行分隔。




最好加上大数值的 border-left 和 border-right ，使用相同的颜色作为背景色。如果你愿意可以使用透明边框，但是IE6会把表格弄的面目全非。因为竖直简约型表格中，数据被从上到下（竖直）阅读的，所以添加 tr:hover 毫无用处，反而会使表格更难以理解。当然可以使用基于 JavaScript 解决方案，当鼠标移动到某列时，使其高亮显示，但是这超出了本文讨论的范围。
重点
仔细调整单元格之间的填充距离, 不要添加 tr:hover
有点
很简单的设计，对于简单的表格很合适
缺点
如果背景色不是色块型的，不要使用竖直简约型表格，它仅仅适合一部分 Table
3. 方块型
所有表格风格中最常用的，方块风格适用于各种类型的表格，挑选出一个好的颜色方案，分配给所有单元格的 background-color 。别忘了定义 border 来区分各个单元格。下面是方块型表格的例子：








这种风格，可能是目前最常用的方式。最难的问题实际上是找到与你的网站匹配的配色方案。如果你的网站上的图像比较深沉，使用这种方式将比较困难。
重点
挑选与网站适合的色彩
优点
容易设计，数据多和数据少的表格都适合
缺点
挑选完美的色彩会很困难
4. 水平间隔型
水平间隔型表格具有很强的吸引力和使用性。当阅读表格时，交替的背景色会使人感到很舒服。在设计水平间隔型表格时，只要简单地给每奇数行 tr 定义 class="odd" 。
Html代码  
...   
  
    <tr class="odd">  
       <td>...</td>  
       ...   
    </tr>  
  
    <tr>  
       <td>...</td>  
       ...   
    </tr>  
  
...  

        ...

                <tr class="odd">
                   <td>...</td>
                   ...
                </tr>

                <tr>
                   <td>...</td>
                   ...
                </tr>

        ...  



重点
千万别用太多的间隔色，会把用户眼睛弄得很不舒服
优点
间隔模式会帮助用户更容易的阅读表格数据
缺点
给很大的表格添加 class="odd" 是件很乏味的事情，在大多数情况下，你必须手工完成它。
5. 竖直间隔型
竖直间隔比水平间隔更容易定义，因为我们可以使用 colgroup 和 col 这两个元素属性来定义不同列的 CSS 。但是代码与其他类型比起来，有点复杂了：
colgroup 元素适用于定义表格的 CSS ，我们可以使用它来代替给每个 td 或者 th 添加 class 。

Xml代码  
<table>  
   
    <!-- Colgroup -->  
       <colgroup>  
          <col class="vzebra-odd">  
          <col class="vzebra-even">  
          <col class="vzebra-odd">  
          <col class="vzebra-even">  
       </colgroup>  
   
    <!-- Table header -->  
       <thead>  
          <tr>  
             <th scope="col" id="vzebra-comedy">Employee</th>  
             ...   
          </tr>  
       </thead>  
       ...   
</table>  

<table>

    <!-- Colgroup -->
           <colgroup>
              <col class="vzebra-odd">
              <col class="vzebra-even">
              <col class="vzebra-odd">
              <col class="vzebra-even">
           </colgroup>

    <!-- Table header -->
           <thead>
              <tr>
                 <th scope="col" id="vzebra-comedy">Employee</th>
                 ...
              </tr>
           </thead>
           ...
</table>





虽然竖直间隔型可能更适合面向竖直表格，但是其他类型表格也可以采用这种风格。
重点
千万别用太多的间隔色，会把用户眼睛弄得很不舒服
优点
适合所有类型表格
缺点
选择色彩方案会很困难，想要添加 colgroup 元素
6. 重点列型
在某些表格中，有些列比其他列更加重要，在这种情况下，可以使用 colgroup 和 col 来标注重点列。在下面的例子中，首列被标示为重点列，使其更容易被关注。




你可以使用一个重点列来标示重点，比如说一个会计表格中的金额总计，或者一个比较表格中获胜的实体。
重点
要注意，不要过分强调重点性，这样会分散其它列的阅读
优点
对某些特定类型的表格特别有效
缺点
因为 tr:hover 在 IE 下无效，所以这种类型只适用于特定类型的表格
7. 报纸型
要达到所谓的报纸型的效果，需要给表格添加边框，而在边框内部展示内容。一个简约的报纸型表格如下所示：




变换单元格（(td and th )）色彩，边框，边距，背景色和 tr:hover 效果后，其它风格的报纸型表格如下所示：







重点
注意 border-collapse ,不要丢失表格的外部边框
优点
给表格赋予了一种很有权威的风格
缺点
对于较大的表不适合（会失去它的魅力）
8. 圆角型
圆角给人的感觉是很光滑很有现代感，很容易就可以把圆角应用到一个表格上，但是你需要为这些圆角创建图像。理论上，在不需要额外的标记就可以给 tr 和 td 添加圆角，但是IE6下，它会变得很一片混乱。所以最稳定的方法是把圆角图片置于表格的四个角。请参考下面的例子：




优点
如果你的网站大量使用圆角，而且你喜欢非传统风格的表格，这可能是你唯一的选择。/dd>
缺点
花费时间比较长，需要图片
9.背景图片型
如果你想很快且有特色的定义表格的风格，那么就简单的挑选出一个有吸引力的图片作为表格的背景。你也可以使用50%的灰度来定义单元格的背景图片，来提高可读性。你可以使用下面的 CSS -hack 技术是它能够在IE6下正常工作。


Html代码  
* html table tbody td   
{   
   
          /* IE CSS Filter Hack goes here*/   
   
}  

* html table tbody td
{

                  /* IE CSS Filter Hack goes here*/

}  
表格例子如下:



重点
确定背景图片符合表格的内容
优点
很容易的定制，提供了独特的外观，如果正确使用，该图像可以作为一个符号，让用户留下难忘的印象
缺点
在IE6下需要 CSS -hack，需要提供图片
10. 单元格背景色型
你可以给单元格添加背景图片，实现一致的风格。这样你至少要花费半个小时才能得到你想要的东西，打开 Photoshop，生成一个像素大小的渐变图片，把它们设置为单元格的背景图片，这样你就得到了一个渐变效果的表格。




同样，选择一个模式，并将其设置为背景图片，可以得到一个模式风格的表格：







注：有几种表格需要背景图片和CSS的支持，论坛显示不出来，请参考  我的博客
前几天我的博客的服务器当机了，现在换了服务商，已经可以访问了。

我最近就在为table和css在烦着， 前台功底太差。。

谢谢楼主的资料。

楼主的博客登不上

帖子看到的效果都一样，想去博客看看，可博客上不去啊。

可以参看一下
http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/

sorry各位，我的博客的服务器有问题了，正在处理，可能需要几天。

capaccino
可以参看一下
http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/



很不错

我的博客已经恢复正常了，大家可以在上面看到本文章的完整版本。
http://www.fogtowerblog.com/web/css/top-ten-table-design.html

修改了文章，原来的表格都看不清楚效果，现在都抓图下来了，可以看清楚了，但是mouseover等效果还是没有的，完整的效果请参照我的博客。

capaccino
可以参看一下
http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/

去干吗啊~~~伤心啊~~~

原来...发神经是这样的啊...

哈哈 OK ~~~

ding   支持

楼主天天快乐，吉祥如意！

只想抽烟喝酒

什么?????不知道......