Table — HTML тег таблицы


Содержание материала:

Таблицы в HTML

В HTML таблицы применяются не только привычным нам образом (как набор данных, распределенных по ячейкам, строкам и столбцам), но и для удобства размещения информации на странице. Проще говоря, можно представить всю html-страницу в виде таблицы и, например, поместить меню в её левый столбец, основную информацию в средний столбец, а дополнительные ссылки в правый столбец. Количество столбцов, строк и, соответственно, ячеек выбирается только тобой и может быть любым.

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

В общем, использование таблиц в HTML значительно упрощает создание сайта. Впрочем, ты сам всё увидишь! Поэтому давай перейдем непосредственно к практике.

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

С ама таблица в HTML создаётся тегами и , строки таблицы (помещаются между тегами и ) тегами и , а столбцы таблицы (помещаются между тегами и ) тегами и .

Н апример, создадим таблицу, состоящую из одной строки и двух столбцов. HTML-код будет выглядеть так:

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

§ 2. Рамка таблицы (границы)

П о-умолчанию, таблица в браузерах представляется без рамки. Чтобы рамка таблицы была видна, используется уже знакомый тебе по предыдущим разделам атрибут «border»:

И тогда браузер покажет:

Первая ячейка Вторая ячейка

З начение атрибута «border» влияет только на внешнюю рамку, границы между ячейками изменять нельзя. Их можно либо показывать, либо нет. Например, если изменить значение атрибута «border» с «1» на «5»:

Первая ячейка Вторая ячейка

М ожно поменять цвет рамки таблицы с помощью атрибута «bordercolor». Например:

Т огда в браузере мы увидим:

Первая ячейка Вторая ячейка

§ 3. Отступы в таблице

Ч тобы изменить отступы между соседними ячейками таблицы, в HTML используется атрибут «cellspacing». Давай для наглядности усложним таблицу: сделаем две строки по три столбца и применим атрибут «cellspacing»:

Б раузер покажет:

Первая ячейка Вторая ячейка Третья ячейка
Четвертая ячейка Пятая ячейка Шестая ячейка

Д ля того, чтобы задать отступы внутри ячеек применяется атрибут «cellpadding». Если в нашем HTML-коде поменять первую строку:

Первая ячейка Вторая ячейка Третья ячейка
Четвертая ячейка Пятая ячейка Шестая ячейка

§ 4. Объединение ячеек таблицы

Ч тобы объединить ячейки таблицы по горизонтали (столбцам) или по вертикали (строкам), в HTML применяются следующие атрибуты:

colspan — объединение ячеек по горизонтали (столбцам);

rowspan — объединение ячеек по вертикали (строкам).

Н апример, изменим наш HTML-код так:

Т огда в браузере мы увидим:

Первая и вторая ячейки Третья ячейка
Четвертая ячейка Пятая ячейка Шестая ячейка
Первая ячейка Вторая ячейка Третья и шестая ячейки
Четвертая ячейка Пятая ячейка

§ 5. Заголовок таблицы

В случае использования таблицы для упорядочивания данных (а не для разметки страницы), может понадобиться использование заголовка. Заголовок таблицы задаётся тегом . Например:

В браузере это выглядит так:

Заголовок таблицы

Первая ячейка Вторая ячейка Третья ячейка
Четвертая ячейка Пятая ячейка Шестая ячейка

К заголовку таблицы можно применить атрибут «align». Для выравнивания относительно таблицы.

У атрибута «align» бывают следующие значения:

  • left — выравнивает заголовок по левому краю таблицы;
  • right — выравнивает заголовок по правому краю таблицы;
  • center — выравнивает заголовок по центру таблицы (значение по умолчанию);
  • top — то же, что и «center», только работает во всех браузерах;
  • bottom — заголовок размещается под таблицей по центру.

Заголовок таблицы

Первая ячейка Вторая ячейка Третья ячейка
Четвертая ячейка Пятая ячейка Шестая ячейка

§ 6. Размеры таблицы

И зменить размеры таблицы и ячеек можно с помощью следующих атрибутов:

  • width — ширина таблицы, столбца, ячейки;
  • height — высота таблицы, строки, ячейки.

И х значения задаются в пикселах или процентах. Например:

В ыглядеть это будет так:

Первая ячейка Вторая ячейка Третья ячейка
Четвертая ячейка Пятая ячейка Шестая ячейка

§ 7. Выравнивание таблицы

В HTML горизонтальное выравнивание таблицы относительно страницы производится с помощью уже известного тебе атрибута «align». Его значения также тебе уже знакомы:

  • center — выравнивание таблицы по центру;
  • left — выравнивание таблицы по левому краю;
  • right — выравнивание таблицы по правому краю.

П о умолчанию, выравнивание происходит по левому краю. Пример:

Первая ячейка Вторая ячейка Третья ячейка
Четвертая ячейка Пятая ячейка Шестая ячейка

Д ля того, чтобы выровнять текст в таблице (и другое её содержимое), нужно использовать атрибут «align» для каждой конкретной ячейки! Т.к. именно в ячейках располагается всё содержимое таблицы. Пример:

Первая ячейка (выровнена по правому краю) Вторая ячейка (выровнена по центру) Третья ячейка
Четвертая ячейка Пятая ячейка Шестая ячейка (выровнена по правому краю)

Д ля вертикального выравнивания содержимого ячеек предназначен атрибут «valign», у которого есть следующие значения:

  • baseline — выравнивание по базовой линии;
  • bottom — выравнивание по нижнему краю;
  • middle — выравнивание по середине (значение по умолчанию);
  • top — выравнивание по верхнему краю.

§ 8. Фон таблицы

В HTML цвет фона таблицы или отдельных её ячеек устанавливается с помощью атрибута «bgcolor». О том, как в HTML выбрать нужный цвет того или иного элемента мы говорили в уроке про атрибуты тега body. Пример:

В браузере мы увидим:

Первая ячейка Вторая ячейка Третья ячейка
Четвертая ячейка Пятая ячейка Шестая ячейка

В качестве фона таблицы или отдельной ячейки можно использовать картинки. В HTML это делается при помощи атрибута «background». Значением атрибута «background» является адрес до изображения (как в HTML вставляется графика мы изучали в этом уроке). Пример картинки-фона для всей таблицы:

Первая ячейка Вторая ячейка
Третья ячейка Четвёртая ячейка

Д ля отдельной ячейки картинка-фон задаётся так:

Первая ячейка Вторая ячейка
Третья ячейка Четвёртая ячейка

§ 9. Заключение

В HTML таблицы, как я уже говорил в самом начале, используются, главным образом, для разметки страниц. В этом их основное предназначение. В каждую ячейку таблицы можно вставить любые другие данные: текст, картинки или другую таблицу. Именно поэтому они так удобны для разметки html-страниц и разбивки их на отдельные блоки. Например, можно создать такую «композицию»:

Эх, где моя молодость!

И это самое простое из того, что можно сделать с помощью таблиц! Создание сайта на основе табличной вёрстки под силу абсолютно любому новичку! Этот урок тому доказательство.

В общем, сейчас настало самое время для самостоятельных экспериментов. Так как урок о создании таблиц в HTML закончен. А вместе с ним закончен и мой рассказ об основах HTML.

И мея эти знания, я начал варганить весь этот сайт. Поэтому тебе я настоятельно рекомендую применить полученные знания на практике. Хотя впереди ещё предстоит раздел о метатегах в HTML, но они прямого отношения к созданию сайта не имеют. Так что закрепляй знания из этой части и жми кнопку «Дальше».

Поделись ссылкой на Seoded.ru с друзьями, знакомыми и собеседниками в соцсетях и на форумах! А сам сайт добавь в закладки ! Так победим.

Поделиться ссылкой на эту страницу в:

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

В языке разметки HTML таблицы используются не только для представления каких-либо данных в виде строк и столбцов, но и как средство форматирования страниц и задания расположения различных элементов.

Другими словами, в HTML оформление таблицы может быть вовсе не заметным, однако выполнять функцию каркаса, занимая всю веб-страницу.

Можно поместить, например, в её левый столбец меню, основную информацию в средний, а контактные данные — в правый.

Итак, как сделать таблицу в HTML?

Создадим простейшую таблицу, содержащую три ячейки одной строки с помощью приведенного ниже кода:

В окне браузера только что созданная таблица выглядит следующим образом:

Таблица начинается с тега

и заканчивается парным ему

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

и заканчивается

.

Ячейки строки описываются слева направо с помощью тегов

и

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

Границы и рамки

По умолчанию в таблице нет границы. Добавить её можно с помощью атрибута border тега

. Однако, иногда браузеры такую границу отображают по-разному, поэтому лучше данный процесс возложить на работу со стилями:

Цвет фона и текста

Для того чтобы указать фон ячейки таблицы HTML, строки или отдельной ячейки, к тегам

,

можно применить следующие параметры:

  • background — в качестве фона используется изображение. Указать можно либо имя файла, либо путь к нему;
  • bgcolor — фоном является определённый цвет. Указать можно как название интересующего оттенка, так и шестнадцатеричный код.

Для того чтобы изменить цвет текста в таблице HTML, необходимо использовать тег .

Отступы таблицы в HTML

В HTML отступы в таблице задаются с помощью тега

и

:

  • cellspacing — расстояние между границами соседних ячеек;
  • cellpading — расстояние между содержимым и границей ячейки.


Визуальное отображение данного кода в браузере таково:

Выравнивание таблицы в HTML

Вы можете для каждой отдельной ячейки или строки задать два параметра, которые выполняют горизонтальное ( align ) и вертикальное ( valign ) выравнивание текста в таблице HTML.

Параметр align может иметь следующие значения:

  • left — выравнивание по левой границе;
  • right — выравнивание по правой границе;
  • center — выравнивание по центру.

Параметр valign может иметь такие значения:

  • bottom — выравнивание по нижней границе;
  • top — выравнивание по верхней границы;
  • middle — выравнивание посередине.

Как сделать таблицу по центру в HTML? С помощью упомянутого значения center .

Вставка изображения в HTML таблицу

У вебмастеров часто возникает вопрос о том, как вставить картинку в HTML таблицу? Для того чтобы это осуществить, необходимо прописать адрес или имя изображения в соответствующей ячейке после тега

;
  • – внутри тега

    .

    Дополнительными атрибутами в данном случае являются:

    • width — ширина;
    • height — высота;
    • alt — альтернативный текст, который отображается в браузере при отключенной функции отображения изображений;
    • title — подпись к картинке;
    • align — горизонтальное выравнивание;
    • valign — вертикальное выравнивание.

    Кроме того, облачив изображение в специальный тег , его можно использовать в качестве ссылки.

    Объединение ячеек в HTML таблице

    Соседствующие ячейки внутри одного столбца или строки можно объединить с помощью параметров rowspan и colspan тега

    .

    Объединение столбцов одной строчки выглядит так:

    У HTML таблицы объединение ячеек одного столбца выглядит следующим образом:

    Генераторы HTML таблиц

    Разумеется, создавать HTML таблицы можно самостоятельно, прописывая вручную все теги HTML. Таблица в данном случае рискует быть составленной некорректно, поскольку человеческий фактор при работе с большими объёмами информации даёт о себе знать.

    Уже давно существуют специальные генераторы таблиц HTML, которые призваны сэкономить ваше время. С их помощью вы можете легко создать таблицу с множеством настроек.

    Одним из наиболее распространенных генераторов таблиц является русскоязычный сервис http://rusws.ru/genertabtag . В его арсенале имеется множество настроек для построения таблиц: вы можете задать цвет фона, выравнивание, ширину таблицы, толщину рамки и т.д.

    Несмотря на то, что сервис http://www.2createawebsite.com/build/table_generator.html является зарубежным, настроек для генерации таблицы здесь меньше, чем в предыдущем примере. Имеются лишь самые необходимые — количество столбцов, строк, ширина, размер, цвет границы.

    Это — отличный вариант для генерации простейших таблиц, однако для более серьёзных целей рекомендуем воспользоваться другими сервисами:

    Генератор таблиц html также имеет не слишком много настроек, однако цвет для фона и границы таблицы вы можете подобрать из палитры цветов.

    Этот же сервис имеет довольно удобный HTML редактор, в котором можно построить, заполнить таблицу, а затем получить её код:

    Таким образом, таблица является не только важным статистическим элементом во всех сферах жизни, но и неотъемлемой частью веб-дизайна и вёрстки.

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

    HTML тег table

    Тег определяет HTML таблицу для представления табличных данных.

    HTML таблица состоит из элемента и одного или более элементов , и .

    Элемент определяет строку таблицы, элемент определяет верхний колонтитул/заголовок таблицы, а элемент определяет ячейку таблицы.

    Более сложные HTML таблицы также могут содержать элементы , , , , и .

    Разница между HTML 4.01 и HTML5

    В HTML5 атрибуты align, bgcolor, border, cellpadding, cellspacing, frame, rules, summary, w >Атрибуты тега

    Атрибут Описание
    align Определяет горизонтальное выравнивание содержимого элемента
    bgcolor Определяет цвет фона элемента
    border Определяет, следует ли отображать рамку вокруг ячеек таблицы
    cellpadding Определяет расстояние между содержимым ячейки таблицы и ее границей
    cellspacing Определяет расстояние между ячейками таблицы
    frame Определяет, каким образом отображается внешняя граница таблицы
    rules Определяет, каким образом следует отображать границы между ячейками таблицы
    summary Определяет краткое описание таблицы
    width Определяет ширину таблицы

    Общие атрибуты

    HTML пример

    Простая HTML таблица с двумя строками и двумя столбцами:

    Html таблицы: теги table, th, tr, td

    Здравствуйте, уважаемые читатели! Сегодня я постараюсь ясно и доходчиво представить вам информацию по созданию html таблиц на сайте, используя для этого теги table, th, tr, td. Эта статья является частью цикла об html тегах, написанного в рамках рубрики «Основы HTML».

    Прежде всего, нам необходимо понять, какую практическую пользу может принести нам использование html таблиц при создании собственного проекта. Все дело в том, что ранее в сайтостроении использовалась табличная верстка. Однако, последние несколько лет вебмастера успешно применяют блочную верстку (которая построена на использовании контейнеров div, об этом я тоже непременно напишу).

    Основные причины перехода на блочную верстку: вложенность тегов и информация, находящаяся в различных ячейках таблицы, затрудняет индексацию страницы поисковиками; к тому же сложная структура, основанная на вложенности html тегов, увеличивает объем кода и затрудняет редактирование отдельных параметров. Больше аргументов, я думаю, приводить не надо, и так все ясно. Ведь качественная индексация ресурса очень важна для его раскрутки, от этого зависит успешность всего проекта.

    К тому же появление css ознаменовало новую эпоху в деле создания сайтов и вебмастера должны придерживаться определенных правил, максимально придерживаясь корректного отображения кода, валидация которого осуществляется Международным Консорциумом W3C, он производит проверку валидности css кода посредством w3c валидатора и осуществляет проверку сайта на ошибки с точки зрения HTML кода. А современные требования таковы, что таблицы нужны только для отображения табличных данных, все остальные способы осуждаются, а со скорым появлением обновленной версии html5 (по которой, кстати, уже работают все популярные браузеры и которая уже интенсивно внедряется) это станет вдвойне актуальным.

    Для чего же я затеял весь этот сыр-бор, если таблицы уходят в прошлое, спросите вы? Это так, да не совсем. Ну, во-первых, как я уже отметил выше, они все же нужны для отображения табличных данных, а это уже немало. Во-вторых, ушла в прошлое табличная верстка сайтов, это так, но области применения таблиц все-таки остаются. Ну, я вот, например, при описании создания выпадающего списка (теги select и option) использовал таблицы, чтобы вы получили наглядную демонстрацию для усвоения материала и при этом, каюсь, нарушил валидность страницы (впоследствии обязательно подкорректирую с помощью стилей css). Но это сделано ради экономии времени читателями, а это святое.

    Согласен, вступление получилось немаленьким, но оно того стоило. Хотя бы для того, чтобы вы получили необходимую информацию об областях применения таблиц и смогли принять соответствующее решение, стоит ли уделить их изучению определенное время. Думаю, мое мнение вы восприняли адекватно, в ином случае я просто бы не стал писать этот пост. Какой же вывод можно сделать из вышесказанного? Хотя значение таблиц и уменьшилось на современном этапе, оно не сведено к полному нулю, тем более использование css позволяет достичь максимальной валидности документа (страницы сайта), а поэтому изучение таблиц остается неотъемлемой частью основ html!

    Теги html таблиц: table, tr, th, td

    Итак, плотно переходим непосредственно к теме. Здесь, впрочем сложного ничего нет. Тег table определяет местоположение всей таблицы, содержание которой располагается между открывающим и закрывающим тегами. Надо отметить, что этот элемент является блочным, однако он не занимает все пространство, доступное ему по ширине, как другие блочные теги. Он определяет лишь ту ширину, которая необходима для отображения содержимого таблицы. В этом его отличие.

    Однако во всем другом он будет вести себя как блочный элемент. Например, если таблиц несколько, то они будут располагаться друг под другом, несмотря на то, что места достаточно для того, чтобы уместиться рядом. Таблицы html образуются следующим образом: между открывающим и закрывающим тегами table расположены строки, которые описываются парными тегами tr. Внутри строк создаются ячейки с помощью html тегов th или td.

    Здесь необходимо отметить, что элементы html th и td являются тождественными функционально, то есть с помощью того и другого формируются ячейки в таблице. Тем не менее визуально они отличаются. Если вы используете тег th, то текст в ячейке будет выделен жирным и выравнен по середине, а содержимое ячейки, определяемое тегом td — написано обычным шрифтом и выравнено по левому краю.

    Так выглядит самый простой вариант html таблицы. Как вы, наверное, поняли, можно создать как угодно много ячеек, использовав соответствующее количество тегов tr, th и td. Но обычно, естественно, необходимо создать гораздо более сложные html таблицы с выделениями, с различным цветовым фоном ячеек, различным шрифтом текста и т.д. Для этого в недалеком прошлом использовались атрибуты, которые непосредственно применялись к основным табличным тегам table, tr, th и td.

    Впрочем, эти атрибуты используются и сейчас, но их использование приводит к нарушению правил консорциума W3C, который сейчас активно занимается внедрением html 5, в правилах которого осуждается использование вышеозначенных атрибутов непосредственно в коде html. Поэтому я не буду терять время и объяснять то, что в скором времени потеряет актуальность.

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

    Остались только два атрибута, применяемые к основным тегам таблиц, которые являются валидными в спецификации языка разметки html5. Их мы сейчас и рассмотрим. Это атрибуты colspan и rowspan, которые помогают объединить ячейки таблицы. Когда это может понадобиться? Ну, например, вы хотите создать небольшую табличку с двумя ячейками, а снизу добавить еще одну.

    Если для этого использовать простой вариант кода, то получиться неказистая картина. А вот если ко второму тегу td добавить атрибут colspan со значением 2 (по числу ячеек в верхней строке), который объединит таблицу по горизонтали, то получим гораздо более красивый вид таблицы.

    Теперь атрибут rowspan. Он используется в случае, если надо объединить таблицу по вертикали. Посмотрите и сравните 2 вида таблицы без атрибута rowspan и с его применением.

    В заключение рассмотрим некоторые дополнительные теги, которые оказывают помощь в формировании таблиц html. Во-первых, это тег caption, который образует заголовок таблицы. Он используется в таблице (table) не более одного раза или не используется вообще. Этот элемент ставится сразу после открывающего тега table.

    1-я ячейка 1-я строка 2-я ячейка 1-я строка 3-я ячейка 1-я строка
    1-я ячейка 2-я строка 2-я ячейка 2-я строка 3-я ячейка 2-я строка
    1-я ячейка 3-я строка 2-я ячейка 3-я строка 3-я ячейка 3-я строка
    Таблица 1. Виды CMS

    WordPress Joomla
    Создание блогов с помощью системы управления контентом Создание сайтов с помощью системы управления контентом

    И последнее на сегодня. Принцип создания html таблиц заключается в том, что тег table является контейнером, в который заключается все содержание таблицы. Строки (tr) сами по себе являются контейнерами для создания ячеек (th и td). Однако существуют еще элементы, которые являются, в свою очередь, контейнерами для строк. Речь идет о тегах thead (шапка таблицы), tbody (содержание таблицы) и tfoot (заключительная часть).

    Эти теги применяются с целью задания свойства для большой группы строк, чтобы не делать это для каждой строки отдельно. Например, вы создаете большую html таблицу, где присутствует несколько сот строк. Представляете, сколько времени можно сэкономить!

    Ячейка 5 с содержанием, которая расположена в TFOOT Ячейка 6 с содержанием, которая расположена в TFOOT
    Ячейка 1 с содержанием, которая расположена в THEAD Ячейка 2 с содержанием, которая расположена в THEAD
    Ячейка 3 с содержанием, которая расположена в TBODY Ячейка 4 с содержанием, которая расположена в TBODY

    Теги thead и tfoot прописываются только один раз для каждой таблицы либо их не может быть вовсе. Что касается tbody, то он должен хотя бы раз быть прописан в контейнере, созданном с помощью открывающего и закрывающего тегов table. Таким образом, мы рассмотрели основные принципы построения html таблиц с помощью основных и вспомогательных тегов.

    Однако, как я уже отмечал, для того, чтобы придать необходимый внешний вид таблицам, необходимо прописать их свойства, пользуясь стилями css. Думаю, поступим следующим образом. Следующая публикация уже будет посвящена основам css, а после того, как я дам необходимую информацию по этой теме, вернусь к вопросу построения таблиц. Поэтому подпишитесь на обновление блога, чтобы своевременно получить необходимые статьи.

    Создаём таблицу в HTML: тег table

    Для того, чтобы осуществлять разметку на страницах web документов, применяется немало всевозможных объектов. Наиболее сложными из всех, с точки зрения новичка, являются именно таблицы. Как показывает практика, именно они, а никак не заголовки или, скажем, абзацы, доставляют тем, кто осваивает HTML, немало проблем. А используются таблицы на практике весьма часто.

    Именно таблицам, как вы уже могли догадаться, будет посвящен данный уровень. Я расскажу вам о том, как создать таблицу в HTML. Мы будем идти от самых простых таблиц к более сложным. Более того, вы узнаете, как можно красиво оформить их с помощью CSS. И когда вы пройдете этот уровень, внимательно изучив каждый урок, таблицы вам перестанут казаться такой уж непосильной и сложной задачей. Итак, давайте узнаем как создать таблицу в HTML.

    Добавление строк

    Самая простая таблица в HTML создается с помощью трех тегов.

    Тег . Обозначает непосредственно саму таблицу.
    Тег . Предназначен для обозначения строк таблицы. Является аббревиатурой, которая расшифровывается как «table row».
    Тег . Аналогично, аббревиатура, которая читается как «table data». Используется для обозначения ячейки внутри строки таблицы.

    Данные три тега располагаются друг относительно друга по следующим правилам:

    – внутри тега

    .

    Как правило, текстовая информация, присутствующая в таблице, хранится в тегах .

    Создавая простую страницу в HTML, следует учитывать тот факт, что все строки должны иметь одно и тоже количество ячеек. Иными словами, количество тегов , присутствующих внутри , должно быть одинаковым.

    Добавление столбцов

    Итак, мы разобрались, как происходит добавление строк. А теперь давайте поговорим о столбцах.

    Чтобы в таблице появился столбец, необходимо в тег (строку) добавить как минимум по одному тегу (ячейке).

    Давайте создадим простейшую таблицу на новой страничке table.html:

    В браузере результат будет выглядеть так:

    На этом первый урок по созданию таблиц в HTML завершён. Делайте домашку и переходите к следующему уроку.

    HTML Таблицы

    Таблица — это сетка из ячеек, формирующих строки и столбцы. Примерами таблиц могут служить различные финансовые отчеты, результаты спортивных соревнований, календари, расписания и т.д. Отдельный блок сетки называется ячейкой таблицы. Ячейки таблицы могут содержать самую разнообразную информацию, включая числа, текст, и даже видео и аудио объекты. С помощью языка HTML таблицы пишутся построчно.

    Элемент служит контейнером для элементов, определяющих содержимое таблицы. Чтобы создать строку таблицы, нужно добавить внутрь элемента парный блочный тег (сокр. от англ. «tаЫе row» – строка таблицы). Сколько тегов вы добавите, столько строк в таблице и будет. Открывающий тег обозначает начало новой строки таблицы. После него помещаются элементы (сокр. от англ. «tаЫе data» – данные таблицы), каждый из которых задает отдельную ячейку в этой строке. Внутрь элемента вы помещаете свой контент (текст, числа, изображения и т.д.), отображаемый в этой ячейке. Конец строки обозначается закрывающим тегом .

    Элемент (сокр. от англ. «tаЫе heading» – заголовок таблицы) — необязательный табличный элемент, который используется точно так же, как и элемент , однако его назначение — создание заголовка строки или столбца. Как правило, элемент размещают в первой строке таблицы. Браузеры отображают текст в элементе жирным шрифтом и центрируют его относительно ячейки. Применение в коде элемента помогает людям, которые пользуются программами экранного доступа, а также улучшает результативность индексирования таблиц поисковыми машинами.

    Рассмотрим простую таблицу, которая состоит из трех строк и трех столбцов, причем ячейки первой строки будут заголовками соответствующих столбцов. По умолчанию таблицы обычно отображаются без рамки:

    Пример: Простая HTML-таблица

    Заголовок 1 Заголовок 2 Заголовок 3
    Ячейка 2×1 Ячейка 2×2 Ячейка 2×3
    Ячейка 3×1 Ячейка 3×2 Ячейка 3×3

    Граница таблицы

    Мы уже знаем, что по умолчанию таблицы отображаются без рамки. Для добавления рамки вокруг таблицы нужно указать в документе несколько простых правил таблиц стилей. Свойство border управляет отображением линий сетки таблицы, а также задает толщину рамки вокруг таблицы в пикселах. Рамка отображается вокруг таблицы и между ячейками. Добавим к уже созданной таблице рамку толщиной один пиксель, установив свойство border для всех элементов таблицы, например, вот так:

    Пример: Применение свойства border


    Заголовок 1 Заголовок 2 Заголовок 3
    Ячейка 2×1 Ячейка 2×2 Ячейка 2×3
    Ячейка 3×1 Ячейка 3×2 Ячейка 3×3
    Свойство border следует устанавливать как для самой таблицы так и для её ячеек и .

    Одинарная рамка для таблицы

    По умолчанию у смежных ячеек таблицы будет своя собственная граница. Это приводит к своего рода «двойной рамке», как видно из примера выше. Чтобы избавиться от «двойной рамки», добавьте свойство CSS border-collapse к своей таблице стилей:

    Пример: Применение свойства border-collapse

    Заголовок 1 Заголовок 2 Заголовок 3
    Ячейка 2×1 Ячейка 2×2 Ячейка 2×3
    Ячейка 3×1 Ячейка 3×2 Ячейка 3×3

    Поля и интервалы таблицы

    По умолчанию размер ячеек таблицы подстраивается под их содержимое, но иногда бывает необходимо оставить вокруг табличных данных немного пространства (padding). Поскольку интервалы и поля относятся к элементам представления данных, это пространство настраивается с помощью стилевых таблиц CSS. Поле ячейки (padding) — это расстояние между содержимым ячейки и ее границей (border). Для его добавления примените свойство padding к элементу или . Интервал ячеек (border-spacing) — это расстояние между ними ( или ). Сначала присвойте значение separate свойству border-collapse элемента , а затем установите расстояние между ячейками, изменив значение параметра border-spacing. Раньше за поля и интервал ячеек отвечали атрибуты cellpadding и cellspacing элемента , но в спецификации HTML5 они были признаны устаревшими.

    Пример использования padding и border-spacing:

    Пример: Применение свойств padding и border-spacing

    padding — это расстояние между содержимым ячейки и ее границей (желтый цвет)

    Ячейка 1 Ячейка 2
    Ячейка 3 Ячейка 4
    border-spacing — это расстояние между ячейками (зеленый цвет)

    Ячейка 1 Ячейка 2
    Ячейка 3 Ячейка 4
    Примечание: Если к таблице применено свойство border-collapse: collapse, то интервал ячеек (border-spacing) не сработает.

    Ширина таблицы

    Ширину, занимаемую таблицей в окне браузера, можно указать с помощью свойства width CSS, в пикселях или процентах. Указание ширины таблицы в пикселях позволяет определить её точную ширину. Процентное соотношение позволяет сделать таблицу гибкой, т.е. она будет «растягиваться» или «сжиматься» в зависимости от того, какие еще элементы находятся на странице и какие размеры окна браузера.
    Вот пример использования свойства width:

    Пример: Применение свойства width

    Ячейка 1 Ячейка 2
    Ячейка 3 Ячейка 4

    Объединение ячеек (colspan и rowspan)

    Одной из основных особенностей структуры таблицы является объединение ячеек, которое подразумевает растяжение ячейки и охват ею нескольких строк или столбцов. Это позволяет создавать сложные табличные структуры: заголовки или ячейки объединяются посредством добавления атрибутов colspan или rowspan. Атрибут colspan определяет количество ячеек, на которые простирается данная ячейка по горизонтали, а rowspan — по вертикали.

    Объединение столбцов

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

    Пример: Применение атрибута colspan

    Ячейка 1 Ячейка 2
    Ячейка 3 Ячейка 4

    Объединение строк

    Строки, объединенные при помощи атрибута rowspan, ведут себя точно так же, как объединенные столбцы, с той лишь разницей, что диапазон ячеек задается сверху вниз и охватывает несколько строк.
    В этом примере первая ячейка таблицы растягивается на две строки вниз:

    Пример: Применение атрибута rowspan

    Ячейка 1 Ячейка 2
    Ячейка 3 Ячейка 4

    Заголовок таблицы

    Для создания заголовка или подписи таблицы используется парный тег (от англ. caption – подпись). Элемент предназначен для организации заголовка таблицы. Располагается сразу после тега , но вне описания строки или ячейки.

    Пример: Применение тега

    Это заголовок таблицы

    Ячейка 1 Ячейка 2
    Ячейка 3 Ячейка 4

    Теги группирования элементов таблиц

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

    Основное содержимое (тело) таблицы должно находиться внутри элемента (таких блоков в таблице может быть несколько). Для логического группирования строк в нижней части таблицы (то есть для создания «подвала» таблицы) используется тег (в одной таблице допускается не более одного тега ). В исходном коде тег ставится до тега . Кроме логического группирования одной из причин использования элементов и является то, что если ваша таблица слишком длинная для единовременного отображения на экране (или для печати), то браузер будет отображать и заголовок ( ) и последнюю строку ( ), когда пользователь станет прокручивать вашу таблицу.

    Пример: Теги , и

    Это подвал таблицы
    Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4

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

    Объединение столбцов

    Напиште разметку для таблицы, изображенной на рис.1.

    Реши сам »

    Ячейка на два столбца
    Ячейка 1 Ячейка 2

    Объединение строк

    Напиште разметку для таблицы, изображенной на рис.1.

    Реши сам »

    Ячейка на три строки Ячейка 1
    Ячейка 2
    Ячейка 3

    Убрать двойную рамку таблицы

    По умолчанию граница таблицы имеет эффект двойной рамки, измените код так, чтобы все линии этой рамки стали одинарными.

    Широкая таблица

    Сделайте чтобы эта таблица отображалось полностью на всю ширину окна браузера вне зависимости от ее ширины.

    Заголовок таблицы

    Измените приведенный код так, чтобы над таблицей появился основной заголовок (подпись), как показано на рис.1.

    Поле внутри ячеек

    Измените приведенный код так, чтобы между текстом внутри ячеек и их границей появился зазор (поле) шириной 25px, как показано на рис.1.

    Объединение строк

    Попробуйте написать разметку для таблицы, изображенной на рис.1. Совет: Строки всегда объединяются сверху вниз, поэтому ячейка с «ананасами» является частью первой строки.

    Table — HTML тег таблицы

    В этой лекции подробно рассматриваются принципы применения таблиц в HTML-разметке. Это и табличная организация текста, и табличная координатная сетка, и организованная в таблицы графика.

    Средства описания таблиц в HTML

    По мере развития WWW стало ясно, что средств, которые заложены в НТМL, недостаточно для качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц. Для этой цели обычно использовался предформатированный текст (тег
    Использование таблиц в дизайне

    Заголовки столбцов таблицы — тег

    Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка (Таblе Неаder, заголовок таблицы). Эти теги подобны . Отличие состоит в том, что текст, заключенный между тегами , автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться с тегом и атрибутом , текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью .

    Использование заголовков таблицы — тег

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

    Атрибут NOWRAP

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

    Атрибут СОLSPAN

    Теги и модифицируются с помощью атрибута СОLSPAN (Column Span, соединение столбцов). Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом СОLSPAN, чтобы растянуть ее над любым количеством обычных ячеек.

    Атрибут ROWSPAN

    Атрибут ROWSPAN, используемый в тегах и , подобен атрибуту СОLSPAN=, только он задает число строк, на которые растягивается ячейка. Если вы указали в атрибуте ROWSPAN=s число, большее единицы, то соответствующее количество строк должно находиться под растягиваемой ячейкой. Внизу таблицы ее поместить нельзя.

    Атрибут WIDТН

    Атрибут WIDТН применяется в двух случаях. Можно поместить его в тег , чтобы дать ширину всей таблицы, а можно использовать в тегах или , чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах. Например, если вы задали в теге W > таблица будет занимать половину ширины страницы при любом размере изображения на экране. Так что, указывая ширину таблицы в процентах, имейте в виду, что если у пользователя узкая область просмотра, ваша страница может выглядеть несколько странно. Если вы пользуетесь пикселами, и таблица оказывается шире области просмотра, внизу появится полоса прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и другой способ задания ширины таблицы может оказаться полезным.

    Применение пустых ячеек

    Если ячейка не содержит данных, она не будет иметь границ. Если требуется, чтобы у ячейки были границы, но не было содержимого, необходимо поместить в нее что-то, что не будет видно при просмотре. Можно воспользоваться пустой строкой . Можно даже задать пустые столбцы, определив их ширину в пикселах или относительных единицах и не введя в полученные ячейки никаких данных. Это средство может оказаться полезным при размещении на странице текста и графики.

    Атрибут СЕLLРАDDING

    Данный атрибут определяет ширину пустого пространства между содержимым ячейки и ее границами, то есть задает поля внутри ячейки.

    Атрибуты АLIGN и VALIGN

    Теги , и можно модифицировать с помощью атрибутов ALIGN и VALIGN. Атрибут АLIGN определяет выравнивание текста и графики по горизонтали, то есть по левому или правому краю, либо по центру. Горизонтальное выравнивание может быть задано несколькими способами:

    ALIGN=blееdleft прижимает содержимое ячейки вплотную к левому краю.

    ALIGN=left выравнивает содержимое ячейки по левому краю с учетом отступа, заданного атрибутом СЕLLPADDING.

    АLIGN=сеnter располагает содержимое ячейки по центру.

    АLIGN=right выравнивает содержимое ячейки по правому краю с учетом отступа, заданного атрибутом СЕLLPADDING.

    Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. Вертикальное выравнивание может быть задано несколькими способами:

    VALIGN=top выравнивает содержимое ячейки по ее верхней границе.

    VALIGN=middle центрирует содержимое ячейки по вертикали.

    VALIGN=bottom выравнивает содержимое ячейки по ее нижней границе.

    Атрибут BORDER

    В теге часто определяют, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пространство под них будет отведено. Того же результата можно добиться, задав . Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится делать для разных таблиц границы различной толщины, чтобы их легче было различать.

    Атрибут CELLSPACING

    Атрибут СЕLLSPACING определяет ширину промежутков между ячейками в пикселах. Если этот атрибут не указан, по умолчанию задается величина, равная двум пикселам. С помощью атрибута СЕLLSPACING= можно размещать текст и графику там, где вам нужно. Если вы хотите оставить пустое место, можно вписать в ячейку пробел.

    Атрибут BGCOLOR

    Данный атрибут позволяет установить цвет фона. В зависимости от того, с каким тегом (TABLE, TR, TD) он применяется, цвет фона может быть установлен для всей таблицы, для строки или для отдельной ячейки. Значением данного атрибута является RGB-код или стандартное название цвета.

    Атрибут BACKGROUND

    Данный атрибут задает фоновое изображение для таблиц. Применим к тегам TABLE и TD. Его значением является URL файла с фоновым изображением. Применение этого атрибута рассматривается ниже.

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

    Таблицы хороши тем, что при желании можно сделать их границы невидимыми. Это позволяет с помощью тега красиво размещать на странице текст и графику. Пока тег остается единственным мощным средством форматирования в HTML. Дизайнеры Web-страниц сейчас обладают практически той же свободой в отношении использования «пустого пространства», что и создатели печатных страниц. Таблицы лучше всего помогают отойти от иерархического размещения текста на Web-страницах.

    Если браузер поддерживает таблицы, он обычно правильно отображает наиболее интересные эффекты, полученные с их помощью


    Использование таблиц в дизайне

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

    Некоторые браузеры позволяют отображать цвета. Есть несколько способов раскрасить таблицу, в основном они зависят от используемого браузера.

    Цветные границы в Netscape Navigator. Вы не только можете окружить таблицу красивой рамкой, но еще и задать для нее цвет, отличный от цветов текста и фона. Создайте простой серый GIF (или любой GIF, который вы хотели бы иметь в качестве фона) и определите его в теге как фон страницы. Затем задайте цвет фона страницы. В результате ваш тег будет выглядеть примерно так:

    Вы создали двойной фон — GIF и заданный цвет. В результате фоновый цвет будет виден на всех границах таблиц и горизонтальных линиях ( ). Вне зависимости от того, является ваш фоновый GIF серым или нет, цветные линии и границы таблиц будут заметно выделяться. Если фоновый GIF устроен не слишком сложно, время загрузки страницы возрастет лишь немного.

    Table — HTML тег таблицы

    Также для этого элемента доступны универсальные атрибуты и события.

    Пример

    Результат данного примера показан на рис. 1.

    Рис. 1. Вид таблицы

    Спецификация ?

    Спецификация Статус
    WHATWG HTML Living Standard Живой стандарт
    HTML5 Рекомендация
    HTML 4.01 Specification Рекомендация

    Спецификация

    Каждая спецификация проходит несколько стадий одобрения.

    • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
    • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
    • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
    • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
    • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
    • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

    Особняком стоит живой стандарт HTML ( Living ) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

    Браузеры ?

    3 12 1 3.5 1 1

    Браузеры

    В таблице браузеров применяются следующие обозначения.

    • — элемент полностью поддерживается браузером;
    • — элемент браузером не воспринимается и игнорируется;
    • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

    Работа с HTML таблицами

    Учебник HTML CSS

    Практика

    Продвинутый курс

    Практика

    Адаптив

    Продвинутые вещи

    Практика

    Начиная с этого урока, я больше не буду приводить структуру всей страницы, считайте, что мы всегда работаем внутри тега body.

    Блок . Структура простейшей таблицы

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

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

    Сама таблица имеет жесткую структуру: главным является тег

    , внутри которого должны лежать теги

    , которые создают ряды (строки) таблицы, а внутри них — теги

    , которые создают ячейки.

    Как вы видите, нету тегов, которые создавали бы столбцы — таблицы создаются по рядам: сначала первый ряд, потом второй и так далее.

    Изучите внимательно следующий пример с таблицей (тегу table добавлен атрибут border, который задает границу таблице и ее ячейкам):

    Так код будет выглядеть в браузере:

    Ячейка 1 Ячейка 2 Ячейка 3
    Ячейка 4 Ячейка 5 Ячейка 6
    Ячейка 7 Ячейка 8 Ячейка 9

    Блок . Ячейки-заголовки

    Кроме тегов td существуют также теги

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

    В следующем примере ячейки «Иван» и «Николай» должны быть обычными ячейками td, а ячейка «Имя» по логике должна быть ячейкой-заголовком th, так как «Имя» — это общее название содержимого этого столбца:

    Так код будет выглядеть в браузере:

    Имя Фамилия Зарплата
    Иван Иванов 200$
    Николай Сидоров 1000$

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

    Блок . Атрибут cellspacing

    Вы обратили внимание на то, что между ячейками есть некоторое расстояние, из-за которого видно то, что каждая ячейка имеет свою границу? Это расстояние регулируется атрибутом cellspacing. При этом, если мы не напишем этот атрибут, то его значение будет совсем не ноль (в этом случае все ячейки слиплись бы друг с другом). То есть, атрибут cellspacing по умолчанию имеет некоторое ненулевое значение, из-за которого ячейки не слипаются (это расстояние равно нескольким пикселям).

    Давайте посмотрим на примере. Сейчас я увеличу отступ между ячейками до 10 пикселей:

    Так код будет выглядеть в браузере:

    Имя Фамилия Зарплата
    Иван Иванов 200$
    Николай Сидоров 1000$

    То, что cellspacing имеет некоторое значение по умолчанию, зачастую может мешать вам. В этом случае следует просто поставить его в ноль.

    В HTML5 этот атрибут считается устаревшим (но он по-прежнему придает отступ по умолчанию). Вместо него следует использовать специальное CSS свойство, о котором мы поговорим попозже.

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

    Блок . Атрибут cellpadding

    Атрибут cellpadding задает отступ между текстом и границей ячейки. В следующем примере я поставлю значение этого атрибута в 20px и теперь текст отойдет от границы ячеек:

    Так код будет выглядеть в браузере:

    Имя Фамилия Зарплата
    Иван Иванов 200$
    Николай Сидоров 1000$

    Для сравнения привожу то, как таблица будет выглядеть по умолчанию:

    Имя Фамилия Зарплата
    Иван Иванов 200$
    Николай Сидоров 1000$

    Атрибут cellpadding также имеет некоторое значение по умолчанию. Если оно вам мешает — обнулите его.

    Этот атрибут, так же, как и cellspacing, считается устаревшим в HTML5.

    Блок . Обнуляем cellpadding и cellspacing

    Давайте обнулим cellpadding и cellspacing и посмотрим, что станет с таблицей в этом случае:

    Так код будет выглядеть в браузере:

    Имя Фамилия Зарплата
    Иван Иванов 200$
    Николай Сидоров 1000$

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

    Блок . Добавляем ширину и высоту

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

    Посмотрите на пример их применения:

    Так код будет выглядеть в браузере:

    Имя Фамилия Зарплата
    Иван Иванов 200$
    Николай Сидоров 1000$

    Значениями атрибутов могут выступать пиксели или проценты. Значения в процентах задаются таким образом: w — в этом случае таблица займет 30% ширины родителя.

    Что вам делать дальше:

    Приступайте к решению задач по следующей ссылке: задачи к уроку.

    Когда все решите — переходите к изучению новой темы.

    Как создавать HTML таблицы — примеры и видео

    Друзья! На этой странице Вас ждёт полный практический курс по изучению таблиц. Посмотрите его, и создание таблиц больше не будет для Вас проблемой. На самом деле их создавать очень легко.

    Раньше HTML таблицы использовались для вёрстки сайтов. Она так и называлась – табличная вёрстка. Потом на смену ей пришла вёрстка дивами (при помощи тегов div ) которая оказалась намного удобнее и проще. А сейчас наступает эра вёрстки сайтов по технологии flexbox, которая призвана еще больше упростить жизнь web-мастерам.

    Однако, несмотря на всё выше сказанное, таблицы в html по-прежнему современны, актуальны и вовсю используются на сайтах. Правда уже не как структура, а как элемент статей сайта.

    Создание таблиц в html примеры

    Перед началом обучения создания таблицы в HTML, что бы мои и ваши таблицы смотрелись одинаково — сделайте 3 простые вещи:

    1. Создайте файл index.html
    2. Откройте его в браузере
    3. Добавьте туда следующий код:

    Создание простой HTML таблички

    Прежде всего нам необходимо указать тег table. Это парный тег, который указывает браузеру, что именно в нём будет располагаться вся HTML таблица.

    Но использование одного этого тега мало, ведь таблицу ещё надо наполнить. И там тоже есть свои правила, которые надо неукоснительно соблюдать.

    Как вы знаете, в каждой таблице есть свои строки и колонки, которые на пересечении формируют ячейки. Однако в HTML – таблицы строятся немного по другому принципу. Изначально мы задаём им строки, а внутри строк задаём ячейки. И именно от количества ячеек в строке и будет завесить количество столбцов. Давайте попробуем сделать таблицу в html в блокноте.

    Создание строк и ячеек

    Строки задаются при помощи тегов tr. И внутри строк мы задаём ячейки тегами td. А сейчас мы по-быстрому забабахаем простую таблицу, с одной строкой и четырьмя ячейками. Вот её код:

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

    Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4


    А сейчас я предлагаю немного её усложнить, и добавить ещё три строки!

    Выглядеть она у нас будет вот так:

    Строка1 Ячейка1 Строка1 Ячейка2 Строка1 Ячейка3 Строка1 Ячейка4
    Строка2 Ячейка1 Строка2 Ячейка2 Строка2 Ячейка3 Строка2 Ячейка4
    Строка3 Ячейка1 Строка3 Ячейка2 Строка3 Ячейка3 Строка3 Ячейка4
    Строка4 Ячейка1 Строка4 Ячейка2 Строка4 Ячейка3 Строка4 Ячейка4

    Кода получилось довольно много, однако оно того стоило! Думаю, теперь вам ясно, как работает создание таблиц в HTML. Однако это далеко не всё, мы ещё с вами только начали и дальше нас ждёт еще много интересного

    Название таблицы — тег caption

    Давайте мы немного модернизируем табличку и добавим ей небольшое название. Это делается при помощи тега caption. Этот тег надо размещать самым первым, сразу после открывающего тега table. Вот как это выглядит в коде:

    А вот, что у нас получится в итоге:

    Пример таблицы с названием

    Строка1 Ячейка1 Строка1 Ячейка2 Строка1 Ячейка3 Строка1 Ячейка4
    Строка2 Ячейка1 Строка2 Ячейка2 Строка2 Ячейка3 Строка2 Ячейка4
    Строка3 Ячейка1 Строка3 Ячейка2 Строка3 Ячейка3 Строка3 Ячейка4
    Строка4 Ячейка1 Строка4 Ячейка2 Строка4 Ячейка3 Строка4 Ячейка4

    Как видите, несмотря на то, что мы разместили тег caption внутри таблицы. Он располагается над ней.

    Для закрепления материала на практике, я рекомендую вам посмотреть создание базовой таблички в видео ниже.

    Видео 1: HTML таблицы – тег table

    Управление ячейками таблицы

    И так друзья, теперь мы будем понемногу усложнять нашу таблицу. И повышать ваши умения и практику. HTML-таблица, которую мы сделали с вами выше очень проста. Однако, чаще всего, надо предоставить данные в более сложном формате:

    1. Вывести заголовочную строку
    2. Объединить некоторые ячейки по вертикали
    3. А другие объединить по горизонтали

    Вот этим мы и займёмся. И начнем мы, пожалуй, с…

    Ячейки-заголовки в таблице

    Конечно, мы могли бы всунуть внутрь ячеек первой строки какие-нибудь заголовки, или оформить их жирными через стили. Однако это будет неправильно!

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

    Давайте в таблице из прошлого примера в первой строке заменим теги td на th . А также чуточку изменим их содержимое:

    А вот и результат кода выше, выполненный в браузере:

    Таблица с тегом th

    Столбец 1 Столбец 2 Столбец 3 Столбец 4
    Строка2 Ячейка1 Строка2 Ячейка2 Строка2 Ячейка3 Строка2 Ячейка4
    Строка3 Ячейка1 Строка3 Ячейка2 Строка3 Ячейка3 Строка3 Ячейка4
    Строка4 Ячейка1 Строка4 Ячейка2 Строка4 Ячейка3 Строка4 Ячейка4

    Как видите, текст в этих ячейках автоматически делается жирным.

    Объединение ячеек по горизонтали и вертикали

    Довольно часто ячейки в HTML таблицах приходится объединять по горизонтали и вертикали. Для удобства, я называю это объединение по столбцам и по строкам. Так новичкам понятнее, что они делают.

    Для этого мы будем использовать 2 атрибута, которые задаются непосредственно самим ячейкам:

    1. Атрибут colspan – указывает сколько надо объединить ячеек по столбцам (горизонталь), начиная с текущей
    2. Атрибут rowspan – указывает сколько надо объединить ячеек по стокам (вертикаль) начиная с текущей

    Эти атрибуты должны иметь целое число, начиная с 1 и более.

    Это правило очень важно, так как если вы не удалите ячейки, которое были объединены, таблица будет отображаться в браузере некорректно.

    Давайте попробуем в нашей таблице объединить 2 ячейки:

    1. Ячейку 1 в строке 2 объединим по столбцам (горизонталь) с ячейками 2 и 3 в той же строке. Для этого мы зададим ей атрибут rowspan=“3”
    2. Ячейку 4 в строке 2 объединим по строкам (вертикаль) с ячейками 4 в строках 3 и 4. Для этого мы зададим ей атрибут colspan=“3”

    И теперь, для правильного отображения таблицы, нам необходимо удалить из кода ячейки, которые были добавлены при объединении. То есть для первого примера мы удаляем из кода ячейки 2 и 3 в строке 2. А для второго – удаляем ячейку 4 в строке 3 и ячейку 4 в строке 4.

    В итоге у нас получится вот такой код:

    А на деле, наша таблица будет выглядеть следующим образом:

    Объединение ячеек таблицы

    Столбец 1 Столбец 2 Столбец 3 Столбец 4
    Строка2 Ячейка1 (соединена с ячейками 2 и 3) Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)
    Строка3 Ячейка1 Строка3 Ячейка2 Строка3 Ячейка3
    Строка4 Ячейка1 Строка4 Ячейка2 Строка4 Ячейка3

    Как видите, всё отображается ровно и красиво, как и было задумано. Для закрепления материала, советую посмотреть практическое видео ниже.

    Видео 2: HTML таблицы — ячейки и управление ими

    Объединение ячеек сразу по 2-ум направлениям

    Так же мы можем объединять ячейки не только по какой-либо одной стороне. Но и сразу по двум! Что мы сейчас и проделаем с нашей таблицей.

    Давайте объединим ячейку 1 строки 3:

    1. С ячейкой 2 строки 3
    2. С ячейкой 1 строки 4
    3. С ячейкой 2 строки 4

    Для этого мы пропишем ячейке 1 строки 3 следующие 2 атрибута:

    Помним, что объединённые ячейки замещаются, поэтому ячейки из списка выше, нам надо будет удалить из кода. В итоге вот такой код будет у нашей таблички:

    А вот так, будет выглядеть наша таблица сейчас:

    Объединение ячеек по 2-ум направлениям

    Столбец 1 Столбец 2 Столбец 3 Столбец 4
    Строка2 Ячейка1 (соединена с ячейками 2 и 3) Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)
    Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4) Строка3 Ячейка3
    Строка4 Ячейка3

    Шапка, тело и подвал HTML таблицы.

    Как и сам сайт, наша табличка может иметь свои шапку, тело и подвал. И если вы хотите, чтобы ваш код выглядел семантически правильно для поисковых систем. Советую применять эти знания на практике.

    Все 3 тега, которые мы будем изучать далее, должны содержать в себе весь контент таблицы. Который условно мы можем разбить на три большие части.

    Тег thead — шапка HTML таблицы

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

    Фишки тега thead:

    1. Он должен встречаться только один раз на одну таблицу!
    2. Независимо от того, где мы его располагаем в таблице — строки, находящиеся в этом теге, будут выводиться в начале таблицы.

    Теперь вернёмся к нашей таблице, и давайте первую строку завернём в этот тег:

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

    Тег tfoot – подвал HTML таблицы

    Хоть это и подвальчик, но помните, что этот тег рекомендуется размещать сразу после тега thead .

    Фишки тега tfoot:

    1. Он должен встречаться только один раз на одну таблицу!
    2. Независимо от того, где мы его располагаем в таблице — строки, находящиеся в этом теге, будут выводиться в конце таблицы.

    Давайте мы заведём ещё одну строку в таблице, и завернём её с ячейками сразу в тег tfoot :

    А вот и наша табличка:

    Тег tfoot в таблице

    Столбец 1 Столбец 2 Столбец 3 Столбец 4
    Подвал столбец 1 Подвал столбец 2 Подвал столбец 3 Подвал столбец 4
    Строка2 Ячейка1 (соединена с ячейками 2 и 3) Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)
    Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4) Строка3 Ячейка3
    Строка4 Ячейка3

    Посмотрите внимательно, несмотря на то, что мы разместили тег tfoot в середине таблицы, его содержимое выводится в её конце!

    Тег tbody – тело таблицы.

    В отличии от первых двух – этот тег может встречать в таблице сколько угодно раз. Фишек у него никаких нет. Он просто семантически указывает для поисковых роботов, что в нём идёт контент таблицы.

    Вот такой код получится в итоге:

    Внешне, наша таблица никак не изменилась! Поэтому и приводить её я здесь не буду.

    И как обычно, для закрепления материала на практике, советую Вам глянуть видео №3.

    Видео 3. HTML таблицы – шапка, тело и подвал

    Кроме разбора на практике самих тегов, в этом видео, дополнительно, вы увидите, как оформить шапку, контент и подвал таблицы при помощи стилей.

    Управление колонками в HTML таблицах

    Осталось совсем немного ребята. Уже очень скоро таблицы полностью покоряться ваши рукам, головам, ногам или что там у вас ещё имеется в арсенале?

    Мы рассмотрим ещё 2 тега, которые позволяют управлять колонками в таблицах.

    Тег col

    Этот тег позволяет задать определённые стили и атрибуты для определённой колонки. Задаётся он сразу после тега caption . И количество этих тегов может быть столько, сколько и колонок в таблице. То есть каждый последующий тег col отвечает за следующую колонку.

    Что бы понять, как это всё работает, давайте первым двум колонкам — зададим ширину в 100 пикселей, третьей 150, а четвертой 200 пикселей. Для этого мы заведём 4 тега col , и каждому из них пропишем свой атрибут style с определённым значением ширины:

    В итоге наша таблица выглядит уже так (обратите внимание на ширину каждой колонки):

    Тег col в таблице

    Столбец 1 Столбец 2 Столбец 3 Столбец 4
    Подвал столбец 1 Подвал столбец 2 Подвал столбец 3 Подвал столбец 4
    Строка2 Ячейка1 (соединена с ячейками 2 и 3) Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)
    Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4) Строка3 Ячейка3
    Строка4 Ячейка3

    Тег col можно сократить, если у него одинаковые параметры при помощи атрибута span . В нашем случае, у нас заданы одинаковые параметры для первой и второй колонки. Давайте сократим эти теги и допишем атрибут, вот такой код выйдет:

    Таблицу приводить в пример не буду, так как она совершенно не поменялась.

    Тег colgroup

    Этот тег используется для объединения колонок по группам. Что бы понять, как он работает, давайте мы первые 3 колонки объединим в этот тег и зададим им какой-нибудь общий стиль. Например, сделаем заливку ячеек другим цветом.

    Вот какой код ввёл я:

    В результате ячейки первых 3-ёх колонок окрасились в указанный нами цвет:

    Тег colgroup в таблице

    Столбец 1 Столбец 2 Столбец 3 Столбец 4
    Подвал столбец 1 Подвал столбец 2 Подвал столбец 3 Подвал столбец 4
    Строка2 Ячейка1 (соединена с ячейками 2 и 3) Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)
    Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4) Строка3 Ячейка3
    Строка4 Ячейка3

    Для закрепления материала рекомендую посмотреть последнее видео из этой серии под номером 4.

    Видео 4. HTML таблицы – управление колонками

    Как видите, ничего сложного в том, чтобы создать сложную функциональную таблицу нет. Главное знать теги и применять их в правильном назначении. Всё остальное – дело техники

    На этом всё, мои дорогие друзья. Если будут вопросы касательно создания HTML таблиц – задавайте их в комментариях.

    Топ-пост этого месяца:  Как найти и исправить битые ссылки WordPress плагинами
    Добавить комментарий