Pure.CSS-テーブル

Pure.CSSは、pure-tableのさまざまなスタイルを使用して、さまざまなタイプのテーブルを表示するために使用できます。

Sr.No.	Class Name & Description
1	pure-table デフォルトのパディング、境界線、および強調されたヘッダーを持つ基本的なテーブルを表します。
2	pure-table-bordered 行をまたぐ境界線を持つ表を描画します。
3	pure-table-horizontal 水平線で表を描画します。
4	pure-table-striped ストリップされたテーブルを表示します。
5	pure-table-odd 他のすべてのtrに適用される場合、行の背景を変更し、ゼブラスタイルの効果を作成します。

例

purecss_tables

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

結果

結果を確認します。

Purecss-tables

Pure.CSS-テーブル

例

結果