Table常用的几种CSS样式_tablecss资源-CSDN下载

共17个文件

png：12个

jpg：2个

css：1个

需积分: 43 76 浏览量 2014-03-23 20:38:23 上传评论收藏 57KB ZIP 举报

在网页设计中，表格（Table）是展示数据的重要方式，而使用CSS（Cascading Style Sheets）对表格进行样式化可以提升页面的视觉效果和用户体验。以下是对"Table常用的几种CSS样式"的详细阐述。 1. **边框样式**： - `border-collapse`: 控制表格边框是否合并。`collapse`将合并相邻单元格的边框，`separate`则保持边框独立。 - `border-spacing`: 设置或获取表格单元格之间的距离。 - `border-color`, `border-style`, `border-width`: 分别定义边框的颜色、样式（如`solid`, `dashed`, `dotted`等）和宽度。 2. **表格背景**： - `background-color`: 用于设定表格、行或单元格的背景颜色。 - `background-image`: 可以添加背景图片，为表格增加视觉层次感。 3. **单元格间距**： - `cellspacing`（HTML属性）：控制单元格之间的距离，但已被CSS替代。 - `padding`: 定义单元格内部内容与边框的距离。 4. **文本对齐**： - `text-align`: 指定单元格内文字的水平对齐方式，可选值有`left`, `right`, `center`, `justify`等。 - `vertical-align`: 控制单元格内内容的垂直对齐，如`top`, `middle`, `bottom`。 5. **表头样式**： - `caption-side`: 定义表格标题的位置，通常是`top`或`bottom`。 - `thead`, `tbody`, `tfoot`的选择器：分别用于设置表头、主体和页脚的样式。 6. **条纹样式**： - 使用`:nth-child()`或`:nth-of-type()`伪类实现行间交替的色彩，如`tr:nth-child(even)`和`tr:nth-child(odd)`。 7. **响应式设计**： - 使用媒体查询（`@media`）根据屏幕尺寸改变表格样式，使其在不同设备上呈现良好。 8. **固定列和头部**： - 通过CSS定位（`position`属性）和负`margin`，可以实现表格头部或列在滚动时固定。 9. **表格样式技巧**： - 使用`display: table`、`table-cell`和`table-row`等CSS属性，可以模拟表格布局，实现更复杂的样式效果。 - 利用`box-shadow`和`rgba()`创建阴影效果，增加表格立体感。 10. **自定义提示信息**： - 使用`:hover`伪类为鼠标悬停的行或单元格添加提示信息。以上仅是CSS对表格样式化的一部分方法，实际应用中可以根据需求进行组合和创新。参考链接提供的资源《Top 10 CSS Table Designs》提供了更多灵感和实例，可以帮助开发者进一步提升表格的美观性和功能性。在实际工作中，应不断探索和学习新的CSS技术，以适应不断变化的网页设计趋势。

资源推荐

资源详情

资源评论

收起资源包目录

express-css-table-design.zip （17个子文件）

source

index.html 16KB

table-images

patternb-head.png 316B

gradhover.png 162B

botright.png 185B

patternb.png 311B

right.png 220B

back.png 488B

pattern-head.png 255B

pattern.gif 127B

gradhead.png 134B

blurry.jpg 2KB

gradback.png 166B

botleft.png 192B

left.png 3KB

header.jpg 44KB

pattern.png 597B

style.css 10KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Top 10 Express Table Designs - Smashing Magazine Source</title> <style type="text/css">  </style> </head> <body> <table id="hor-minimalist-a" summary="Employee Pay Sheet"> <thead> <tr> <th scope="col">Employee</th> <th scope="col">Salary</th> <th scope="col">Bonus</th> <th scope="col">Supervisor</th> </tr> </thead> <tbody> <tr> <td>Stephen C. Cox</td> <td>$300</td> <td>$50</td> <td>Bob</td> </tr> <tr> <td>Josephin Tan</td> <td>$150</td> <td>-</td> <td>Annie</td> </tr> <tr> <td>Joyce Ming</td> <td>$200</td> <td>$35</td> <td>Andy</td> </tr> <tr> <td>James A. Pentel</td> <td>$175</td> <td>$25</td> <td>Annie</td> </tr> </tbody> </table> <table id="hor-minimalist-b" summary="Employee Pay Sheet"> <thead> <tr> <th scope="col">Employee</th> <th scope="col">Salary</th> <th scope="col">Bonus</th> <th scope="col">Supervisor</th> </tr> </thead> <tbody> <tr> <td>Stephen C. Cox</td> <td>$300</td> <td>$50</td> <td>Bob</td> </tr> <tr> <td>Josephin Tan</td> <td>$150</td> <td>-</td> <td>Annie</td> </tr> <tr> <td>Joyce Ming</td> <td>$200</td> <td>$35</td> <td>Andy</td> </tr> <tr> <td>James A. Pentel</td> <td>$175</td> <td>$25</td> <td>Annie</td> </tr> </tbody> </table> <table id="ver-minimalist" summary="Most Favorite Movies"> <thead> <tr> <th scope="col">Comedy</th> <th scope="col">Adventure</th> <th scope="col">Action</th> <th scope="col">Children</th> </tr> </thead> <tbody> <tr> <td>Scary Movie</td> <td>Indiana Jones</td> <td>The Punisher</td> <td>Wall-E</td> </tr> <tr> <td>Epic Movie</td> <td>Star Wars</td> <td>Bad Boys</td> <td>Madagascar</td> </tr> <tr> <td>Spartan</td> <td>LOTR</td> <td>Die Hard</td> <td>Finding Nemo</td> </tr> <tr> <td>Dr. Dolittle</td> <td>The Mummy</td> <td>300</td> <td>A Bug's Life</td> </tr> </tbody> </table> <table id="box-table-a" summary="Employee Pay Sheet"> <thead> <tr> <th scope="col">Employee</th> <th scope="col">Salary</th> <th scope="col">Bonus</th> <th scope="col">Supervisor</th> </tr> </thead> <tbody> <tr> <td>Stephen C. Cox</td> <td>$300</td> <td>$50</td> <td>Bob</td> </tr> <tr> <td>Josephin Tan</td> <td>$150</td> <td>-</td> <td>Annie</td> </tr> <tr> <td>Joyce Ming</td> <td>$200</td> <td>$35</td> <td>Andy</td> </tr> <tr> <td>James A. Pentel</td> <td>$175</td> <td>$25</td> <td>Annie</td> </tr> </tbody> </table> <table id="box-table-b" summary="Most Favorit Movies"> <thead> <tr> <th scope="col">Comedy</th> <th scope="col">Adventure</th> <th scope="col">Action</th> <th scope="col">Children</th> </tr> </thead> <tbody> <tr> <td>Scary Movie</td> <td>Indiana Jones</td> <td>The Punisher</td> <td>Wall-E</td> </tr> <tr> <td>Epic Movie</td> <td>Star Wars</td> <td>Bad Boys</td> <td>Madagascar</td> </tr> <tr> <td>Spartan</td> <td>LOTR</td> <td>Die Hard</td> <td>Finding Nemo</td> </tr> <tr> <td>Dr. Dolittle</td> <td>The Mummy</td> <td>300</td> <td>A Bug's Life</td> </tr> </tbody> </table> <table id="hor-zebra" summary="Employee Pay Sheet"> <thead> <tr> <th scope="col">Employee</th> <th scope="col">Salary</th> <th scope="col">Bonus</th> <th scope="col">Supervisor</th> </tr> </thead> <tbody> <tr class="odd"> <td>Stephen C. Cox</td> <td>$300</td> <td>$50</td> <td>Bob</td> </tr> <tr> <td>Josephin Tan</td> <td>$150</td> <td>-</td> <td>Annie</td> </tr> <tr class="odd"> <td>Joyce Ming</td> <td>$200</td> <td>$35</td> <td>Andy</td> </tr> <tr> <td>James A. Pentel</td> <td>$175</td> <td>$25</td> <td>Annie</td> </tr> </tbody> </table> <table id="ver-zebra" summary="Most Favorite Movies"> <colgroup> <col class="vzebra-odd" /> <col class="vzebra-even" /> <col class="vzebra-odd" /> <col class="vzebra-even" /> </colgroup> <thead> <tr> <th scope="col" id="vzebra-comedy">Comedy</th> <th scope="col" id="vzebra-adventure">Adventure</th> <th scope="col" id="vzebra-action">Action</th> <th scope="col" id="vzebra-children">Children</th> </tr> </thead> <tbody> <tr> <td>Scary Movie</td> <td>Indiana Jones</td> <td>The Punisher</td> <td>Wall-E</td> </tr> <tr> <td>Epic Movie</td> <td>Star Wars</td> <td>Bad Boys</td> <td>Madagascar</td> </tr> <tr> <td>Spartan</td> <td>LOTR</td> <td>Die Hard</td> <td>Finding Nemo</td> </tr> <tr> <td>Dr. Dolittle</td> <td>The Mummy</td> <td>300</td> <td>A Bug's Life</td> </tr> </tbody> </table> <table id="one-column-emphasis" summary="2007 Major IT Companies' Profit"> <colgroup> <col class="oce-first" /> </colgroup> <thead> <tr> <th scope="col">Company</th> <th scope="col">Q1</th> <th scope="col">Q2</th> <th scope="col">Q3</th> <th scope="col">Q4</th> </tr> </thead> <tbody> <tr> <td>Microsoft</td> <td>20.3</td> <td>30.5</td> <td>23.5</td> <td>40.3</td> </tr> <tr> <td>Google</td> <td>50.2</td> <td>40.63</td> <td>45.23</td> <td>39.3</td> </tr> <tr> <td>Apple</td> <td>25.4</td> <td>30.2</td> <td>33.3</td> <td>36.7</td> </tr> <tr> <td>IBM</td> <td>20.4</td> <td>15.6</td> <td>22.3</td>

评论收藏

内容反馈