`

10个漂亮的表格设计

    博客分类：
  • HTML
AppleGoogleMicrosoftIBMUP 
阅读更多

原文链接：http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/

1. Horizontal Minimalist

 

Employee Salary Bonus Supervisor
Stephen C. Cox $300 $50 Bob
Josephin Tan $150 - Annie
Joyce Ming $200 $35 Andy
James A. Pentel $175 $25 Annie


 

 

Employee Salary Bonus Supervisor
Stephen C. Cox $300 $50 Bob
Josephin Tan $150 - Annie
Joyce Ming $200 $35 Andy
James A. Pentel $175 $25 Annie


2. Vertical Minimalist

 

Comedy Adventure Action Children
Scary Movie Indiana Jones The Punisher Wall-E
Epic Movie Star Wars Bad Boys Madagascar
Spartan LOTR Die Hard Finding Nemo
Dr. Dolittle The Mummy 300 A Bug’s Life

3. Box

Employee Salary Bonus Supervisor
Stephen C. Cox $300 $50 Bob
Josephin Tan $150 - Annie
Joyce Ming $200 $35 Andy
James A. Pentel $175 $25 Annie
Comedy Adventure Action Children
Scary Movie Indiana Jones The Punisher Wall-E
Epic Movie Star Wars Bad Boys Madagascar
Spartan LOTR Die Hard Finding Nemo
Dr. Dolittle The Mummy 300 A Bug’s Life

4. Horizontal Zebra

Employee Salary Bonus Supervisor
Stephen C. Cox $300 $50 Bob
Josephin Tan $150 - Annie
Joyce Ming $200 $35 Andy
James A. Pentel $175 $25 Annie

5. Vertical Zebra Style

 

Comedy Adventure Action Children
Scary Movie Indiana Jones The Punisher Wall-E
Epic Movie Star Wars Bad Boys Madagascar
Spartan LOTR Die Hard Finding Nemo
Dr. Dolittle The Mummy 300 A Bug’s Life

6. One Column Emphasis

 

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7
IBM 20.4 15.6 22.3 29.3

7. Newspaper

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7
IBM 20.4 15.6 22.3 29.3
Company Q1 Q2 Q3 Q4
The above data were fictional and made up, please do not sue me
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7
IBM 20.4 15.6 22.3 29.3
FAVORITE GREAT NICE BAD
Passion of the Christ Bourne Ultimatum Shoot ‘Em Up Ali
The Big Fish The Mummy Apocalypto Monster
Shawshank Redemption Cold Mountain Indiana Jones Dead or Alive
Greatest Story Ever Told I Am Legend Star Wars Saw 3

8. Rounded Corner

Company Q1 Q2 Q3 Q4
The above data were fictional and made up, please do not sue me
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
background-color: #e8edff; border-top-width: 1px; border-top-style: solid; border-top-color: #ffff
分享到：
| 如何在Visual Studio环境中创建和调用类库 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    漂亮的表格css+html

    本教程将聚焦于使用CSS（层叠样式表）和HTML（超文本标记语言）来构建一个界面清晰、清爽且漂亮的表格。让我们深入探讨这两个核心技术及其在创建优秀表格中的应用。 首先，HTML表格基础。在HTML中，我们使用`...

    简单漂亮的表格样式

    "简单漂亮的表格样式"这个主题，正是关注如何使数据以一种既美观又易读的方式呈现。以下是一些关于表格样式和设计的关键知识点： 1. **HTML表格基础**：HTML中的`<table>`元素用于创建表格结构，包含`<tr>`（行）、...

    漂亮的表格样式

    10. **响应式设计**：在网页或应用中的表格，需考虑不同设备的显示效果。使用响应式设计，确保表格在手机、平板和电脑上都能良好显示。 以上就是关于“漂亮的表格样式”的一些核心知识点。通过合理运用这些设计原则...

    网页课程设计&毕业设计_漂亮的设计行业作品案例单页跳转模板5403.zip

    这个压缩包文件"网页课程设计&毕业设计_漂亮的设计行业作品案例单页跳转模板5403.zip"包含了用于此类项目的一些关键资源，旨在帮助学生创建具有吸引力的网页设计作品。以下是基于提供的信息所涵盖的相关知识点： 1....

    漂亮的CSS立体表格效果.rar

    在本主题“漂亮的CSS立体表格效果”中，我们将探讨如何利用CSS来实现引人注目的3D立体感的表格设计，这在网页交互设计中可以提升用户体验，使数据展示更加生动有趣。 首先，理解CSS的基本结构至关重要。CSS由选择器...

    JS实现漂亮的表格table特效代码

    "JS实现漂亮的表格table特效代码"这个项目提供了四五种不同的效果，帮助开发者实现动态、交互性强的表格展示，提升用户体验。以下是对这些知识点的详细解析： 1. **HTML表格基础**：在HTML中，`<table>`元素是创建...

    tkinter界面设计师

    Tkinter是Python编程语言内置的标准GUI（图形用户界面）库，它是基于Tcl/Tk库构建的。在Python中，Tkinter提供了一种简单而有效的方法来...对于初学者和专业开发者来说，"Tkinter界面设计师"都是一个非常有价值的工具。

    网页课程设计&毕业设计_纯色漂亮的宠物猫企业网站模板.zip

    这个"网页课程设计&毕业设计_纯色漂亮的宠物猫企业网站模板.zip"文件，显然提供了一个适用于学习和实践的资源，特别是对于那些正在从事网页设计课程或者准备毕业设计的学生而言。 这个模板的核心可能是一个精美的...

    html好看的表格

    HTML表格是一种常用的数据展示工具，尤其在网页设计中不可或缺。"好看的html表格"是指通过HTML语言，结合CSS样式，创建出既美观又功能强大的表格。本文将深入探讨如何利用HTML和CSS来创建一个吸引人的表格。 首先，...

    绿色设计环保类大图展示网站模板_绿色 大气 漂亮 企业 设计 工作室 大图 html 摄影 婚纱 幻灯.rar

    该压缩包文件“绿色设计环保类大图展示网站模板_绿色 大气 漂亮 企业 设计 工作室 大图 html 摄影 婚纱 幻灯.rar”提供了一个专为环保类企业或设计工作室设计的网站模板。这个模板以其独特的绿色主题、大气的布局和...

    绿色大图漂亮的工业设计企业网站模板.zip

    这是一个关于工业设计企业网站模板的资源包，名为“绿色大图漂亮的工业设计企业网站模板.zip”。这个压缩包包含了创建一个以绿色为主色调、大图展示的网页设计元素，专为工业设计公司定制。以下是该模板可能包含的...

    漂亮的Table CSS

    "漂亮的Table CSS"这个主题聚焦于如何利用CSS技术来提升表格的视觉效果，使其在网页中更加吸引人。以下是一些关于Table CSS的重要知识点： 1. **基础样式**：首先，可以使用`border-collapse`属性合并单元格边框，...

    一个特表漂亮的销售网站

    【标题】"一个特表漂亮的销售网站"所指的是一个专门设计用于销售商品或服务的网站，这个网站在视觉设计上有着出色的表现，旨在吸引用户，提高用户体验，促进销售转化。通常，这样的网站会包含以下几个核心知识点： ...

    蓝绿蓝绿色绿色漂亮设计博客blogbootstrap手机响应式个人主页个人ui设计师.rar

    标题中的“蓝绿蓝绿色绿色漂亮设计博客blogbootstrap手机响应式个人主页个人ui设计师.rar”表明这是一个关于网页设计的资源包，特别强调了颜色主题为蓝绿色，且采用了Bootstrap框架来构建一个响应式的个人主页，适合...

    CSS漂亮表格

    CSS能够让我们实现页面的布局控制、色彩设计以及字体调整等，而“CSS漂亮表格”则着重探讨如何使用CSS提升表格的美观度和用户体验。 在传统的HTML表格中，往往显得较为单调，缺乏吸引力。通过CSS，我们可以改变表格...

    漂亮的html+css网站模板、网页设计源码

    这里的“漂亮的”一词意味着这些模板不仅功能齐全，还具有吸引人的设计和用户体验。 【描述】：“html网页设计模板” 描述中提到的“html网页设计模板”是指预设计的HTML文件结构，可以作为创建新网页的起点。这些...

    网站设计行业单页模板下载是一款漂亮的设计行业作品案例网页模版下载 .rar

    网站设计行业在不断发展，为了快速高效地构建一个吸引眼球、展示设计作品的在线平台，设计师们经常使用单页模板。本资源提供的一款“网站设计行业单页模板下载”就是一个为设计行业量身定制的网页模版，旨在帮助设计...

    一个漂亮的登录注册系统

    标题中的“一个漂亮的登录注册系统”指的是一个设计精美的用户身份验证界面，通常包括登录和注册两个功能。这样的系统是网站或应用的基础部分，允许用户创建个人账户并安全地访问其个人信息和服务。在这个系统中，...

Magicbox
Global site tag (gtag.js) - Google Analytics