Учебники

Pure.CSS — Столы

Январь 4, 2019

Pure.CSS может использоваться для отображения разных типов таблиц с использованием различных стилей поверх чистых таблиц.

Sr.No. Имя класса и описание
1

чистый стол

Представляет базовую таблицу с любым отступом по умолчанию, рамкой и выделенным заголовком.

2

чистый стол каймой

Рисует таблицу с рамкой между рядами.

3

чистый стол-горизонтальный

Рисует таблицу с горизонтальными линиями.

4

чистый стол полосатого

Отображает раздетую таблицу.

5

чистый стол-нечетный

При применении ко всем остальным tr изменяет фон строки и создает эффект в стиле зебры.

чистый стол

Представляет базовую таблицу с любым отступом по умолчанию, рамкой и выделенным заголовком.

чистый стол каймой

Рисует таблицу с рамкой между рядами.

чистый стол-горизонтальный

Рисует таблицу с горизонтальными линиями.

чистый стол полосатого

Отображает раздетую таблицу.

чистый стол-нечетный

При применении ко всем остальным tr изменяет фон строки и создает эффект в стиле зебры.

пример

purecss_tables.htm

Live Demo

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

Результат

Проверьте результат.

41
Share: