Pure.CSS表

PURE.CSS可以用来显示不同类型采用各种样式超过纯表的表。

S.N.	类名称和描述
1	pure-table 代表具有任何默认的填充，边框和标题强调一个基本的表格。
2	pure-table-bordered 绘制跨行的边框表。
3	pure-table-horizontal 绘制带有水平线的表格。
4	pure-table-striped 显示一个精简表。
五	pure-table-odd 如果应用于其他所有tr，则更改行的背景并创建斑马风格的效果。

例

purecss_tables.htm

<html>
   <head>
      <title>The PURE.CSS Tables</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
   </head>
   <body> 
      <h2>Tables Demo</h2>
	  <hr/>
	  <h3>Simple Table</h3>
      <table class="pure-table">
         <thead>
            <tr><th>Student</th><th>Class</th><th>Grade</th></tr>
         </thead>
         <tbody>
            <tr><td>Mahesh Parashar</td><td>VI</td><td>A</td></tr>
            <tr><td>Rahul Sharma</td><td>VI</td><td>B</td></tr>
            <tr><td>Mohan Sood</td><td>VI</td><td>A</td></tr>
         </tbody>
      </table>
      <h3>Bordered Table</h3>
      <table class="pure-table pure-table-bordered">
         <thead>
            <tr><th>Student</th><th>Class</th><th>Grade</th></tr>
         </thead>
         <tbody>
            <tr><td>Mahesh Parashar</td><td>VI</td><td>A</td></tr>
            <tr><td>Rahul Sharma</td><td>VI</td><td>B</td></tr>
            <tr><td>Mohan Sood</td><td>VI</td><td>A</td></tr>
         </tbody>
      </table>     
	  <h3>Table with Horizontal Borders</h3>
      <table class="pure-table pure-table-horizontal">
         <thead>
            <tr><th>Student</th><th>Class</th><th>Grade</th></tr>
         </thead>
         <tbody>
            <tr><td>Mahesh Parashar</td><td>VI</td><td>A</td></tr>
            <tr><td>Rahul Sharma</td><td>VI</td><td>B</td></tr>
            <tr><td>Mohan Sood</td><td>VI</td><td>A</td></tr>
         </tbody>
      </table>     
	  <h3>Stripped Table</h3>
      <table class="pure-table pure-table-striped">
         <thead>
            <tr><th>Student</th><th>Class</th><th>Grade</th></tr>
         </thead>
         <tbody>
            <tr><td>Mahesh Parashar</td><td>VI</td><td>A</td></tr>
            <tr><td>Rahul Sharma</td><td>VI</td><td>B</td></tr>
            <tr><td>Mohan Sood</td><td>VI</td><td>A</td></tr>
         </tbody>
      </table>
   </body>
</html>

结果

验证结果。

Tables Demo

Simple Table

Student	Class	Grade
Mahesh Parashar	VI	A
Rahul Sharma	VI	B
Mohan Sood	VI	A

Bordered Table

Student	Class	Grade
Mahesh Parashar	VI	A
Rahul Sharma	VI	B
Mohan Sood	VI	A

Table with Horizontal Borders

Student	Class	Grade
Mahesh Parashar	VI	A
Rahul Sharma	VI	B
Mohan Sood	VI	A

Stripped Table

Student	Class	Grade
Mahesh Parashar	VI	A
Rahul Sharma	VI	B
Mohan Sood	VI	A

w3cschool 编程狮，随时随地学编程

Pure.CSS表

例

结果

Tables Demo

Simple Table

Bordered Table

Table with Horizontal Borders

Stripped Table

Pure.CSS Tutorial

Pure.CSS Useful Resources