Вариант стекирования таблиц Semantic-UI

Опубликовано: 17 Сентября, 2022

Semantic UI — это платформа с открытым исходным кодом, которая использует CSS и jQuery для создания отличных пользовательских интерфейсов. Это то же самое, что и загрузчик для использования, и имеет множество различных элементов, которые можно использовать, чтобы сделать ваш сайт более удивительным. Он использует класс для добавления CSS к элементам.

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

Разновидность стекирования таблиц семантического пользовательского интерфейса указывает, как эта таблица укладывает содержимое таблицы в ответ.

Классы вариаций наложения семантической таблицы пользовательского интерфейса:

stackable: этот класс оперативно складывает таблицу.
unstackable: этот класс делит каждую строку нашей таблицы на отдельные ячейки.

Синтаксис:

<table class="ui stackable table">
    <tr>
        <td></td>
        ...
    </tr>
    ...
</table>

Пример 1. Это базовый пример, иллюстрирующий разницу между обычным нестекаемым столом и штабелируемым столом в зависимости от размера планшета. устройства, созданные с помощью Semantic UI.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Semantic-UI Table Stacking Variation</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" />
</head>
<body>
    <center>
        <h1 class="ui green header">GeeksforGeeks</h1>
        <strong>Semantic-UI Table Stacking Variation</strong>
    </center>
    <b>Normal Table</b>
    <table class="ui unstackable table">
        <thead>
            <tr>
                <th>Names</th>
                <th>Maths Marks</th>
                <th>Physics Marks</th>
                <th>Chemistry Marks</th>
            </tr>
        </thead>
        <tbody>
          <tr>
            <td>Ravi</td>
            <td>48</td>
            <td>84</td>
            <td>63</td>
          </tr>
          <tr>
            <td>Srihita</td>
            <td>55</td>
            <td>97</td>
            <td>74</td>
          </tr>
      </tbody>
    </table>
    <b>Stackable Table</b>
    <table class="ui tablet stackable table">
        <thead>
            <tr>
                <th>Names</th>
                <th>Maths Marks</th>
                <th>Physics Marks</th>
                <th>Chemistry Marks</th>
            </tr>
        </thead>
        <tbody>
          <tr>
            <td>Ravi</td>
            <td>48</td>
            <td>84</td>
            <td>63</td>
          </tr>
          <tr>
            <td>Srihita</td>
            <td>55</td>
            <td>97</td>
            <td>74</td>
          </tr>
      </tbody>
    </table>
</body>
</html>

Выход:

Пример 2. Это базовый пример, иллюстрирующий вариант цветной ( перевернутой) стекируемой таблицы на устройствах размером с планшет, созданных с помощью семантического пользовательского интерфейса.

Выход:

Ссылка: https://semantic-ui.com/collections/table.html#stacking

Picked CSS

Вариант стекирования таблиц Semantic-UI

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ