Таблицы на Pure CSS - httpdoc.ru

Таблица 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 Развлечение Бесплатно