Таблица Pure.CSS

Как вы все знаете, таблица HTML выглядит очень скучно, и в настоящее время никто не использует ее непосредственно на веб-сайтах без стилизации. В чистом CSS стилизация таблиц очень проста и дает пользователю возможность изменять стиль таблицы. Есть много предопределенных классов, которые предоставляют пользователям большое разнообразие. Взгляните на классы ниже -

Имя класса	Описание
pure-table	Это самый простой класс, который дает некоторые отступы и границы.
pure-table-bordered	Рисует таблицу с рамкой.
pure-table-horizontal	Он рисует таблицу только с горизонтальными линиями.
pure-table-odd	Рисует раздетую таблицу.

Давайте посмотрим, как каждый класс использует один за другим.

Таблица по умолчанию

pure-table Класс добавляет отступы и границы для таблицы элементов, а также стиль заголовка. См. Изменения, внесенные в таблицу этим классом, в выходных данных, показанных ниже.

Пример

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> Pure.CSS Default table </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
 </head>
 <style>
   table{
   margin:10px;
      }
 </style>
  <body>
    <table class="pure-table">
      <thead>
        <tr>
          <th>#</th>
          <th>Brand</th>
          <th>Model</th>
          <th>Year</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Samsung</td>
          <td>Galaxy S10 Plus</td>
          <td>2019</td>
        </tr>
        <tr>
          <td>2</td>
          <td>OnePlus</td>
          <td>7 Pro</td>
          <td>2012</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Xiaomi</td>
          <td>MIX 3</td>
          <td>2018</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Выход

Pure.CSS Default table

#	Марка	Модель	Год
1	Samsung	Galaxy S10 Plus	2019 г.
2	OnePlus	7 Pro	2019 г.
3	Xiaomi	СМЕСЬ 3	2018 г.

Таблица с границами Pure.CSS

Таблица с рамками - это таблица, в которой каждая ячейка ограничена со всех сторон. Итак, чтобы сделать таблицу с рамкой, вы должны использовать класс pure-table-bordered . Он добавит горизонтальные и вертикальные границы ко всем ячейкам. Посмотрите результат и сравните его с выводом выше.

Пример

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> Pure.CSS Bordered table </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
  </head>
  <style>
    table{
    margin:10px;
    }
  </style>
  <body>
    <table class="pure-table pure-table-bordered">
      <thead>
        <tr>
          <th>#</th>
          <th>Smartphone</th>
          <th>Model</th>
          <th>Year</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Samsung</td>
          <td>A80</td>
          <td>2019</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Realme</td>
          <td>X</td>
          <td>2019</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Oppo</td>
          <td>Reno 10X Zoom</td>
          <td>2019</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Выход

Pure.CSS Bordered table

#	Смартфон	Модель	Год
1	Samsung	A80	2019 г.
2	Настоящий я	Икс	2019 г.
3	Оппо	Reno 10-кратный зум	2019 г.

Таблица Pure.CSS с горизонтальными границами

В таблицах такого типа видны только горизонтальные линии, а вертикальные линии исчезают. Класс pure-table-horizontal используется для создания таблицы, состоящей только из горизонтальных линий.

Примечание: не забудьте использовать все классы вместе с классом по умолчанию pure-table .

Пример

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> Pure.CSS Horizontal Table </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
  </head>
  <style>
    table{
    margin:10px;
    }
  </style>
  <body>
    <table class="pure-table pure-table-horizontal">
      <thead>
        <tr>
          <th>#</th>
          <th>Laptop</th>
          <th>Model</th>
          <th>Year</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Dell</td>
          <td>XPS 13</td>
          <td>2019</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Asus</td>
          <td>Zenbook</td>
          <td>2018</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Microsoft</td>
          <td>Surface Pro</td>
          <td>2019</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Выход

Pure.CSS Horizontal Table

#	Ноутбук	Модель	Год
1	Dell	XPS 13	2019 г.
2	Asus	Zenbook	2018 г.
3	Microsoft	Surface Pro	2019 г.

Стриптизированные таблицы Pure.CSS

Разрезанная таблица выглядит как фон в стиле зебры, она окрашивает каждую вторую строку в таблице. Класс pure-table-odd используется для создания разделенной таблицы. Опять же, не забудьте использовать весь класс вместе с классом по умолчанию pure-table .

Примечание. В браузерах, поддерживающих псевдоселектор CSS3 nth-child, можно использовать более простой подход. Имя


  pure-table-striped

класса может быть добавлено к


  <table>

элементу, и чередование в стиле зебры произойдет автоматически. Этот подход не будет работать в Internet Explorer 8 или более ранней версии.

Пример

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> Pure.CSS Triped Table </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
  </head>
  <style>
    table{
    margin:10px;
    }
  </style>
  <body>
    <table class="pure-table">
      <thead>
        <tr>
          <th>#</th>
          <th>Website</th>
          <th>Services</th>
          <th>Paid/Free</th>
        </tr>
      </thead>
      <tbody>
        <tr class="pure-table-odd">
          <td>1</td>
          <td>CodeRepublics</td>
          <td>Free Web Tutorials Educations</td>
          <td>Free</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Facebook</td>
          <td>Social Service</td>
          <td>Free</td>
        </tr>
        <tr class="pure-table-odd">
          <td>3</td>
          <td>YouTube</td>
          <td>Entertainment</td>
          <td>Free</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Выход

Pure.CSS Triped Table

#	Веб-сайт	Услуги	Платно / бесплатно
1	CodeRepublics	Бесплатные обучающие материалы в Интернете	Бесплатно
2	Facebook	Социальная служба	Бесплатно
3	YouTube	Развлечение	Бесплатно

Purecss

Таблица Pure.CSS

Таблица по умолчанию

Выход

Таблица с границами Pure.CSS

Выход

Таблица Pure.CSS с горизонтальными границами

Выход

Стриптизированные таблицы Pure.CSS

Выход

Подпишитесь на нашу email рассылку 👇