Использование таблиц в обзорах

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

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

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

Сама таблица создаётся открывающим тегом <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 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 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 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	Описание	Краткое описание: Облегченная версия смартфона на 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 4	Xiaomi Redmi Note 6 Pro 3	В продаже?
	A	B
1			Да

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

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

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

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

Список возможных классов:

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