Таблица — это структурированный набор данных, состоящий из строк и столбцов (табличных данных). Таблицы позволяют быстро и легко посмотреть значения, показывающие некоторую взаимосвязь между различными типами данных, например — сравнение характеристик двух устройств.
Создание таблицы
Важно! У нас есть
инструмент для автоматическогого формирования таблиц, возможно будет быстрее воспользоваться им.
Сама таблица создаётся открывающим тегом <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 — выравнивание в заголовке будет не по центру, а по левому краю.
