CSS 基础（007_表格）
来源：互联网 发布：淘宝保健品经营许可证 编辑：程序博客网 时间：2024/05/20 19:19
原始网址：http://www.w3schools.com/css/css_table.asp
翻译：
CSS Tables
用 CSS 可以使 HTML 表格的外观得到极大改善：
<!DOCTYPE html><html lang="en-US"> <head> <title>CSS Styling Tables</title> <meta charset="utf-8"> <style> table#customers { font-size: 16px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; border-collapse: collapse; border-spacing: 0; width: 100%; } #customers td, #customers th { border: 1px solid #ddd; text-align: left; padding: 8px; } #customers tr:nth-child(even) { background-color: #f2f2f2 } #customers th { padding-top: 11px; padding-bottom: 11px; background-color: #4CAF50; color: white; } </style> </head> <body> <table id="customers"> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr class="alt"> <td>Berglunds snabbköp</td> <td>Christina Berglund</td> <td>Sweden</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr class="alt"> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr class="alt"> <td>Königlich Essen</td> <td>Philip Cramer</td> <td>Germany</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr class="alt"> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </table> </body></html>Table Borders
使用 CSS 的 border 属性可指定表格边框。
下列示例是对 <table>、<th>、<td> 元素指定了黑色边框：
<!DOCTYPE html><html> <head> <style> table { width: 100%; } table, th, td { border: 1px solid black; } </style> </head> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> </tr> </table> </body></html>注意：以上示例中的表格是双边框。这是因为表格以及 <th>、<td> 元素拥有各自的独立边框。
Collapse Table Borders
border-collapse 属性用以设置表格边框是否合并（塌陷）为单边框：
<!DOCTYPE html><html> <head> <style> table { width: 100%; border-collapse: collapse; } table, td, th { border: 1px solid black; } </style> </head> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> </tr> </table> <p> <b>Note:</b> If a !DOCTYPE is not specified, the border-collapse property can produce unexpected results in IE8 and earlier versions. </p> </body></html>Table Width and Height
width 和 height 属性用以定义表格的宽和高。
下列示例设置表格的宽为 100%，设置 <th> 元素的高为 50px：
<!DOCTYPE html><html> <head> <style> table, td, th { border: 1px solid black; } table { border-collapse: collapse; width: 100%; } th { height: 50px; } </style> </head> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Savings</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td> </tr> </table> </body></html>Horizontal Alignment
text-align 属性用以设置 <th> 或 <td> 中的内容水平对齐（例如，左、右、居中）。
默认情况下，<th> 元素的内容是居中的，<td> 元素的内容是居左的。
下列示例是将 <th> 元素中的文本居左设置：
<!DOCTYPE html><html> <head> <style> table, td, th { border: 1px solid black; } table { border-collapse: collapse; width: 100%; } th { text-align: left; } </style> </head> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Savings</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td> </tr> </table> </body></html>Vertical Alignment
vertical-align 属性用以设置 <th> 或 <td> 中的内容垂直对齐（例如，上、下、居中）。
默认情况下，表格中的内容是垂直居中的（对 <th> 和 <td> 元素而言）。
下列示例是将 <td> 元素中的文本居底设置：
<!DOCTYPE html><html> <head> <style> table, td, th { border: 1px solid black; } table { border-collapse: collapse; width: 100%; } td { height: 50px; vertical-align: bottom; } </style> </head> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Savings</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td> </tr> </table> </body></html>Table Padding
为了控制表格中边框和内容的空白区域，我们对 <th> 和 <td> 元素使用 padding 属性：
<!DOCTYPE html><html> <head> <style> table, td, th { border: 1px solid #ddd; text-align: left; } table { border-collapse: collapse; width: 100%; } th, td { padding: 15px; } </style> </head> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Savings</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td> </tr> </table> </body></html>Horizontal Dividers
<!DOCTYPE html><html> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } </style> </head> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Savings</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td> </tr> </table> </body></html>对 <th> 和 <td> 添加 border-bottom 实现水平分割线：
th, td { border-bottom: 1px solid #ddd;}Hoverable Table
对 <tr> 使用 :hover 选择器，当鼠标悬浮在当前表格行时，当前行会以高亮显示：
<!DOCTYPE html><html> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } tr:hover { background-color: #f5f5f5 } </style> </head> <body> <table> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td> </tr> </table> </body></html>Striped Tables
<!DOCTYPE html><html> <head> <style> table { border-collapse: collapse; width: 100%; border: 1px solid black; } th, td { text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #f2f2f2 } </style> </head> <body> <table> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td> </tr> </table> </body></html>使用 nth-child() 选择器以及对表格的所有偶数（或奇数）行添加 background-color 实现表格的 zebra-striped 效果（斑马线）：
tr:nth-child(even) { background-color: #f2f2f2 }Table Color
下列示例指定了 <th> 元素的背景色和文本色：
<!DOCTYPE html><html> <head> <style> table { border-collapse: collapse; width: 100%; border: 1px solid black; } th, td { text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #f2f2f2 } th { background-color: #4CAF50; color: white; } </style> </head> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Savings</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td> </tr> </table> </body></html>Responsive Table
在屏幕的尺寸无法完全显示表格内容的情况下，响应式表格将呈现水平滚动条：
<!DOCTYPE html><html> <head> <style> table { border-collapse: collapse; width: 100%; border: 1px solid black; } th, td { text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #f2f2f2 } </style> </head> <body> <div style="overflow-x: auto;"> <table> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> </tr> <tr> <td>Adam</td> <td>Johnson</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> </tr> </table> </div> </body></html>添加一个以 overflow-x:auto 修饰的容器元素（例如，<div>）将 <table> 元素包裹起来以实现响应式：
<div style="overflow-x:auto;"> <table> ... table content ... </table></div> 0 0
- CSS 基础（007_表格）
- CSS(表格_轮廓)
- Css基础学习（八）—表格
- Bootstrap 基础CSS - 表格（Tables）
- Bootstrap 基础CSS - 表格（Tables）
- HTML+CSS基础（1）表格
- CSS-表格基础记录
- CSS样式_表格&轮廓
- CSS 基础（001_语法）
- CSS 基础（002_边框）
- CSS 基础（003_盒子模型）
- CSS 基础（004_外边距）
- CSS 基础（005_轮廓）
- CSS 基础（006_图标）
- CSS 基础（008_显示）
- CSS 基础（010_定位）
- CSS 基础（012_浮动）
- CSS 基础（016_伪类）
- windows下使用maven-3.3.9编译java项目生成jar
- 与众不同1
- Spring 5 新功能：函数式 Web 框架
- win10安装64位myql5.7.12
- BZOJ2951: [Poi2001]Goldmine 扫描线+线段树
- CSS 基础（007_表格）
- 【JAVA】理解MVC模式，IOC , AOP, orm框架，SOA，ERP管理系统
- Fragment生命周期
- 全面介绍ZooKeeper原理及使用
- 迫于舆论压力，Yahoo停止了邮件自动转发功能
- 简述Docker过去6个月的变化
- android学习----菜单
- BeautifulSoup的简单运用
- Linux MySQL 备份
