В прошлом таблицы HTML использовались для управления макетом сайтов, чтобы поддерживать пропорции контента, создавать разделы, разделять информацию и т. Д. В настоящее время это плохая практика, фактически с новыми спецификациями Таблица Элемент в HTML5 был сделан так, что он используется по прямому назначению - отображать данные в виде двумерных массивов.Таблица элементовВ Таблица element - это большой контейнер, который может находиться внутри любого элемента потока, например div . В рамках Таблица element у нас будут элементы: caption, colgroup, thead, tbody, tfoot, tr, th а также тд , которые необходимы для придания состава нашей таблице, кроме того, новый стандарт сделал следующие атрибуты устаревшими в пределах Таблица и должны использоваться исключительно CSS: сводка, выравнивание, ширина, bgcolor, cellpadding, cellspacing, frame, rules . Соглашение CSS для этого элемента будет следующим: Как мы могли видеть, создать таблицу в HTML5 довольно легко, поскольку на данный момент это просто текст и без формата, в следующей части руководства мы увидим, как сделать таблицу немного более продвинутой с помощью содержимого CSS. таблица {дисплей: таблица; граница-коллапс: раздельный; интервал границы: 2 пикселя; цвет границы: серый; } Элемент trКак мы знаем, таблицы состоят из двух основных элементов, строк и столбцов, где строки представляют каждую информационную запись, а столбцы - структуру и тип информации, давайте посмотрим, какой элемент используется для создания строк, этот элемент является tr . Это может быть дочерний элемент следующих элементов: стол, thead, tfoot, tbody , как мы видим, может быть прямым сыном таблицы или сыном элементов, которые являются дочерними элементами таблицы и определяют ее структуру. Он должен содержать 1 или несколько элементов тд или же th при необходимости, в новый стандарт HTML5 он также поместил некоторые из своих устаревших атрибутов, а именно: выровняйте, char, charoff, valign, bgcolor. Которые должны работать исключительно с помощью CSS, указанный CSS имеет следующую структуру в качестве соглашения: tr {display: table-row; вертикальное выравнивание: наследование; цвет границы: наследование;} Элемент tdЭтот элемент определяет столбцы в наших строках в таблице, что позволяет нам разделять информацию в записи и, таким образом, иметь возможность классифицировать ее в соответствии с нашими потребностями, это сын элемента тр допустимые атрибуты, которыми он может обладать: colspan, rowspan, заголовки и устаревшие атрибуты, которые теперь должны обрабатываться в CSS: abbr, ось, выровнять, ширина, char, charoff, valign, bgcolor, height, nowrap, scope . Соглашение CSS для этого элемента следующее: тд {дисплей: таблица-ячейка; вертикальное выравнивание: наследование; } Наша первая таблицаДавайте применим на практике то, что мы видели до сих пор, мы уже знаем, что для нашей таблицы нам нужны строки и столбцы в нашем контейнере или родительском элементе, давайте посмотрим, как мы перенесем это в HTML-код ниже:
Этот код дает нам структуру двухстрочной таблицы с 3 столбцами, поскольку мы видим, что это простой текст, который приводит нас к следующему результату:
СТАТЬИ