В этой статье мы научимся создавать таблицы и производить над ними различные операции.
Все начинается с тегов <table> и </table>, между которыми будет помещена вся "табличная" информация.
Пример:
Обратите внимание на теги <tr> и <td>. Первый обозначает начало новой строки таблицы, а второй - ее ячейку. Вся "табличная" информация описывается построчно.
Переходим к заголовкам.
Здесь тоже все довольно просто, нужно лишь добавить немного кода к уже имеющемуся.
Пример:
Здесь у нас появляется новый тег <th>, именно с его помощью мы создаем заголовки для нашей таблицы. Как видно из примера внутри открывающего тега прописывается специальный атрибут scope. Он может принимать два значения: col (заголовок в столбце таблицы) и rom (заголовок в строке таблицы). Обратите внимание на то, что даже пустая ячейка должна быть представлена тегом <td> или <th>, в противном случае отображение в браузере будет некорректным.
Полезный совет: в составлении подобных таблиц легко запутаться, поэтому я рекомендую на первый раз сделать все в точности как у меня. Вы поймете что к чему относится и потом сможете сделать что-то свое.
Теперь мы постараемся объединить столбцы. В этом нам поможет атрибут colspan, который будет находиться внутри открывающего тега <td> (или <th>).
Пример:
Работаем над объединением строк. В этом нам поможет атрибут rowspan, который будет находиться внутри открывающего тега <td> (или <th>).
Пример:
На пример со строками прошу обратить особое внимание. В последнем элементе <tr> содержится только три элемента, а в предыдущем четыре. Это произошло потому, что в элементе <tr>, содержащем текст "Фильмы", указан атрибут rowspan, благодаря которому он "поглотил" нижерасположенную ячейку.
Спасибо за внимание!
Если статья оказалась полезной предлагаю подписаться на канал и следить за выходом новых интересных статей)