首页 CSS 网络开发 十个最简单实用的Table设计模板

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!-- 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>

在我们开始之前，温习一下所谓的使用表格的规则:

1. 表格的宽度
   根据内容，小心的设置表格的宽度，如果你不知道确切的宽度的话，设置成100%准没错。如果内容很多把表格撑的很大的时候，把表格的宽度设置的大一些肯定比小一些要好看的多。
2. 给 td 加点 padding
   虽然在表格中 td 的排列很整齐，但是这并不是说，我们要把它们排列地很紧凑，给它们点间距，这样看起来就不那么难以阅读了。
3. 表格就是文字
   阅读表格与阅读文字是很类似的，而且会花费更多的时间去理解表格。所以当表格中有金额的时候，注意它的对比度。使用柔和的颜色，使之看起来更舒服一些。总之，要使表格的风格更容易阅读，而不是相反。

好，下面我们开始进入正题。

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"。

1
2
3
4
5
6
7
8
9
10
11
12
13

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

重点

千万别用太多的间隔色，会把用户眼睛弄得很不舒服

优点

间隔模式会帮助用户更容易的阅读表格数据

缺点

给很大的表格添加 class="odd" 是件很乏味的事情，在大多数情况下，你必须手工完成它。

5. 竖直间隔型

竖直间隔比水平间隔更容易定义，因为我们可以使用 colgroup 和 col 这两个元素属性来定义不同列的 CSS。但是代码与其他类型比起来，有点复杂了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<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 元素适用于定义表格的 CSS，我们可以使用它来代替给每个 td 或者 th 添加 class。

虽然竖直间隔型可能更适合面向竖直表格，但是其他类型表格也可以采用这种风格。

重点

千万别用太多的间隔色，会把用户眼睛弄得很不舒服

优点

适合所有类型表格

缺点

选择色彩方案会很困难，想要添加 colgroup 元素

6. 重点列型

在某些表格中，有些列比其他列更加重要，在这种情况下，可以使用 colgroup 和 col 来标注重点列。在下面的例子中，首列被标示为重点列，使其更容易被关注。

你可以使用一个重点列来标示重点，比如说一个会计表格中的金额总计，或者一个比较表格中获胜的实体。

重点

要注意，不要过分强调重点性，这样会分散其它列的阅读

优点

对某些特定类型的表格特别有效

缺点

因为 tr:hover 在 IE 下无效，所以这种类型只适用于特定类型的表格

7. 报纸型

要达到所谓的报纸型的效果，需要给表格添加边框，而在边框内部展示内容。一个简约的报纸型表格如下所示：

姓名	数学	外语	化学	物理
张三	78	76	92	89
李四	87	84	72	69
王五	95	78	84	82
赵六	76	77	87	92

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

姓名	数学	外语	化学	物理
张三	78	76	92	89
李四	87	84	72	69
王五	95	78	84	82
赵六	76	77	87	92
2009-2010学年期末考试成绩

优异	良好	中性	差劲
张三	李四	王五	赵六
张四	李五	王六	赵七
张五	李六	王七	赵八
张六	李七	王八	赵九

重点

注意 border-collapse ,不要丢失表格的外部边框

优点

给表格赋予了一种很有权威的风格

缺点

对于较大的表不适合（会失去它的魅力）

8. 圆角型

圆角给人的感觉是很光滑很有现代感，很容易就可以把圆角应用到一个表格上，但是你需要为这些圆角创建图像。理论上，在不需要额外的标记就可以给 tr 和 td 添加圆角，但是IE6下，它会变得很一片混乱。所以最稳定的方法是把圆角图片置于表格的四个角。请参考下面的例子：

优点

如果你的网站大量使用圆角，而且你喜欢非传统风格的表格，这可能是你唯一的选择。/dd>

缺点

花费时间比较长，需要图片

9.背景图片型

如果你想很快且有特色的定义表格的风格，那么就简单的挑选出一个有吸引力的图片作为表格的背景。你也可以使用50%的灰度来定义单元格的背景图片，来提高可读性。你可以使用下面的 CSS-hack 技术是它能够在IE6下正常工作。

1
2
3
4
5
6

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

表格例子如下:

重点

确定背景图片符合表格的内容

优点

很容易的定制，提供了独特的外观，如果正确使用，该图像可以作为一个符号，让用户留下难忘的印象

缺点

在IE6下需要 CSS-hack，需要提供图片

10. 单元格背景色型

你可以给单元格添加背景图片，实现一致的风格。这样你至少要花费半个小时才能得到你想要的东西，打开 Photoshop，生成一个像素大小的渐变图片，把它们设置为单元格的背景图片，这样你就得到了一个渐变效果的表格。

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

分享这个帖子: