Авторизация
Зарегистрироваться

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

Создание таблицы


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

Сама таблица создаётся открывающим тегом <table> и закрывающим тегом </table>, между тегами размещается тело таблицы. Тело таблицы это несколько строк, которые представляют собой строчки в таблице. Ячейки внутри строки разделяются знаками ;; (две подряд точки с запятой).

Например
<table>
№ ;; Параметр          ;; Xiaomi Mi A2 Lite 4 ;; Xiaomi Redmi Note 6 Pro 3
1 ;; Размер экрана     ;; 5.84"               ;; 6.26"
2 ;; Разрешение экрана ;; 2280х1080           ;; 2280x1080
3 ;; Процессор         ;; Snapdragon 625      ;; Snapdragon 636
4 ;; Камера            ;; 12.0MP+5.0MP и 5.0MP;; 12.0MP+5.0MP и 20.0MP+5.0MP
5 ;; Аккумулятор       ;; 4000мАч             ;; 4000mAh
</table>

ПараметрXiaomi Mi A2 Lite 4Xiaomi Redmi Note 6 Pro 3
1Размер экрана5.84"6.26"
2Разрешение экрана2280х10802280x1080
3ПроцессорSnapdragon 625Snapdragon 636
4Камера12.0MP+5.0MP и 5.0MP12.0MP+5.0MP и 20.0MP+5.0MP
5Аккумулятор4000мАч4000mAh

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

Длинные строки в ячейке


Если в ячейку вставляется длинный текст, то указывать все ячейки на одной строке может быть неудобно. Формат таблиц позволяет переносить текст каждой ячейки на новую строку.
<table>
№ ;; Параметр          ;; Xiaomi Mi A2 Lite 4 ;; Xiaomi Redmi Note 6 Pro 3
1 ;; Размер экрана     ;; 5.84"               ;; 6.26"
2 ;; Разрешение экрана ;; 2280х1080           ;; 2280x1080
3 ;; Процессор         ;; Snapdragon 625      ;; Snapdragon 636
4 ;; Камера            ;; 12.0MP+5.0MP и 5.0MP;; 12.0MP+5.0MP и 20.0MP+5.0MP
5 ;; Аккумулятор       ;; 4000мАч             ;; 4000mAh

6 ;; Описание          ;;

<b>Краткое описание:</b> ~~ Облегченная версия смартфона на Android One для тех, кто любит Xiaomi, но не любит MIUI. Двойная камера, модный вырез в дисплее, емкий аккумулятор и не самая бюджетная цена ;;

<b>Краткое описание:</b> ~~ Очередная «копия» iPhone X от Xiaomi. Внешне фаблет очень напоминает флагман Apple, при этом стоит в четыре раза дешевле и по некоторым параметрам даже выигрывает у него
7 ;; Цена             ;;  $156.99              ;; $159.99
</table>


Если какая-либо строка в таблице заканчивается символами ;;, то это обозначает, что на следующей строке будет не новая строка таблицы, а продолжение текущей строки.

Символами ~~ можно указать сайту, где обязательно нужно сделать перенос строки.

ПараметрXiaomi Mi A2 Lite 4Xiaomi Redmi Note 6 Pro 3
1Размер экрана5.84"6.26"
2Разрешение экрана2280х10802280x1080
3ПроцессорSnapdragon 625Snapdragon 636
4Камера12.0MP+5.0MP и 5.0MP12.0MP+5.0MP и 20.0MP+5.0MP
5Аккумулятор4000мАч4000mAh
6ОписаниеКраткое описание:
Облегченная версия смартфона на Android One для тех, кто любит Xiaomi, но не любит MIUI. Двойная камера, модный вырез в дисплее, емкий аккумулятор и не самая бюджетная цена
Краткое описание:
Очередная «копия» iPhone X от Xiaomi. Внешне фаблет очень напоминает флагман Apple, при этом стоит в четыре раза дешевле и по некоторым параметрам даже выигрывает у него
7Цена$156.99$159.99


Настройки таблицы

У таблицы есть несколько настроек, чтобы изменить внешний вид таблицы

<table class="blue noborder" header="1">

  • class — список предопределенных классов таблицы (через пробел)
  • header — указывает сколько первых строк, будут считаться заголовками таблицы

Предположим у нас есть таблица с фотографиями телефонов.

В статье "Управление расположением изображений в тексте" рассказыватся о том, как можно управлять аттрибутами картинки, чтобы изменить размер или расположение изображения.

<table>
;;   Xiaomi Mi A2 Lite 4 ;; Xiaomi Redmi Note 6 Pro 3 ;; В продаже?
;;   A                   ;; B                         ;;  

1 ;;<img src="https://pic.mysku-st.ru/uploads/pictures/00/00/01/2019/02/26/fb2b4b.jpg"   align="left" width="160" height="160" alt="" /> ;;

<img src="https://pic.mysku-st.ru/uploads/pictures/00/00/01/2019/02/26/894978.jpg"   align="left" width="160" height="160" alt="" /> ;; Да
</table>

По умолчанию она будет выглядеть вот так.
Xiaomi Mi A2 Lite 4Xiaomi Redmi Note 6 Pro 3В продаже?
AB 
1Да


Если ячейка пустая, то в ней можно ничего не писать, за исключением последней ячейки в строке. Если вы желаете оставить последнюю ячейку пустой, то в ней обязательно нужно что-то написать (например поставить точку) или html код пустого символа —  

В таблице у нас первые две строки являются заголовками таблицы, поэтому добавляем параметр header=«2». А также добавляем несколько классов, чтобы сделать таблицу другого цвета и убрать линии между ячейками.

<table class="blue noborder slim column" header="2">

Xiaomi Mi A2 Lite 4Xiaomi Redmi Note 6 Pro 3В продаже?
AB 
1Да
2Да


Список возможных классов:
  • blue — таблица синего цвета.
  • column — первый столбец серого цвета.
  • noborder — убрать границы между ячейками.
  • slim — не растягивать таблицу на всю ширину экрана, а использовать минимум места.
  • hleft — выравнивание в заголовке будет не по центру, а по левому краю.
При вставке изображения в текст обзоры, по умолчанию, вставляется изображение в максимально допустимом размере.

Для некоторых типов обзоров (например для скидок, где перечисляется много товаров) удобнее использовать маленькие изображения (пример).
читать дальше
В июне 2017 года Apple анонсировала поддержку в MacOS High Sierra и iOS 11 формата HEIF с именами файлов вида HEIC (High Efficiency Image File Format, Высокоэффективный Формат Файла Изображений).

Вы уже могли сталкиваться с этими терминами в статьях об iOS и MacOS, но если вы всё еще имеете только поверхностное представление о формате HEIC – прочтите эту статью, чтобы быть технически подкованным.

Сайт MYSKU.ru не позволяет загружать в статьи картинки в формате HEIC, чтобы скорвертировать HEIC файлы в JPEG формат — воспользуйтесь бесплатным онлайн конвертером
читать дальше

Регистрация в системе и привязка карты к PayPal.

1 — Перейдите на сайт PayPal www.paypal.com и нажмите кнопку Sign Up (Зарегистрироваться). Либо в нижнем правом углу сайта нажмите на значок с флагом и выберите язык «Русский».
читать дальше