Меню

Теги для построения таблиц

Теги для построения таблиц

+++++

В HTML для создания таблиц используются теги группы table. К ним относятся:

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

Далее будет рассмотрена практика создания HTML таблиц с примером исходного кода и описанием на русском языке.

Простая HTML таблица

Чтобы создать простую таблицу HTML достаточно 3 тега: , и .

Далее необходимо определить строки и ячейки — структуру таблицы.

Пример простой таблицы HTML

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

Исходный код простой таблицы HTML

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

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

Пример HTML таблицы с заголовком th

Volkswagen AG Daimler AG BMW Group
Audi Mercedes-Benz BMW
Skoda Mercedes-AMG Mini
Lamborghini Smart Rolls-Royce

Исходный код таблицы HTML с заголовками th

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

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

Чтобы объединить ячейки по горизонтали используйте атрибут colspan=»х» , у ячейки или , где x — количество ячеек для объединения.

Чтобы объединить ячейки по вертикали используйте атрибут rowspan=»х» , у ячейки или , где x — количество ячеек для объединения.

Ячейки можно объединять по горизонтали и вертикали одновременно. Для этого используйте оба атрибута colspan и rowspan для нужной ячейки:

Пример HTML таблицы с объединением ячеек

Nissan
Модель Комплектация Наличие
Nissan Qashqai VISIA +
TEKNA +
Nissan X-Trail ACENTA +
CONNECTA

Исходный код таблицы HTML с объединенными ячейками

Колонтитулы и подпись в HTML таблицах

HTML таблицы можно поделить на 3 области: верхний колонтитул, основная часть, нижний колонтитул.

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

По необходимости к таблице можно добавить подпись. Для этого используйте тег .

Подпись , при использовании, ставится сразу после открывающего тега .

Пример HTML таблицы с колонтитулами и подписью

Комплектации Renault Sandero Stepway

Характеристика SUTA 09H 6R SUTA 09HR6R SUTA 15H 5R
Наличие + + +
Мощность двигателя 0,9 (90 л.с.) 0,9 (90 л.с.) 1,5 (90 л.с.)
Топливо бензин бензин дизель
Норма токсичности Евро-6 Евро-6 Евро-5

Исходный код таблицы с колонтитулами и подписью

Колонки и группы колонок

HTML таблицу можно делить на колонки и группы колонок с помощью тегов и .

Такое разделение позволяет задать стили для таблицы используя минимальное количество CSS свойств, тем самым уменьшая объем кода таблицы (вместо определения стилей для каждой ячейки колонки, можно задать стили для одной или нескольких колонок сразу).

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

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

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

Пример HTML таблицы с разделением на колонки

ZEN 2E2C AL A ZEN 2E2C J5 A INTENSE 2E3C AL A Характеристика
1.5 (90 л.с.) 1.2 (115 л.с.) 1.5 (90 л.с.) Мощность двигателя
дизель бензин дизель Топливо
АКП6 (EDC) АКП6 (EDC) АКП6 (EDC) Трансмиссия

Исходный код таблицы HTML c и

Таблицы в макете страниц сайта

На современных сайтах немаловажно корректное отображение страниц как на компьютерах, так и на мобильных устройствах. Использовать таблицы для создания каркаса HTML страницы не целесообразно, так как теряется возможность адаптирования контента под экрыны разного размера (компьютеры, смартфоны, планшеты).

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

Источник



HTML теги таблицы, теги для создания таблиц, атрибуты тега TABLE

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

Например твой сайт состоит из трех столбцов и двух строк. Первую строку из 3 столбцов мы можем объеденить в одну общую, где разместим название нашего сайта и логотип, во второй строке в первом столбце мы можем разместить левое меню, во втором столбце текст сайта или же текст определенной страницы, ну а в последнем столбце правое меню. Не запутался? 🙂 Да вот простой пример: эта страница, которую ты сейчас читаешь. Она тоже сделана именно по такому принципу. Думаю, лучше перейти к практике, и на примерах наглядно увидеть, как это все реализовать.

Чтобы создать таблицу, нам сперва потребуюся теги

и
, для создания строк нужны теги и , которые пишутся между тегами TABLE, ну а столбы создаются тегами и , и как вы уже поняли — помещаются между тегами TR.

Давайте создадим простую таблицу, которая состоит из 3 столбцов. HTML-код таблицы:

На странице в браузере таблица будет выглядеть вот так:

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

На странице мы увидем нашу таблицу без рамки:

Атрибут border изменяет вечиличину лишь внешней рамки нашей таблицы. Значение 0 как вы поняли делает её невидимой, а значение от 1 до 10 задает её толщину. Примедем пример таблицы с рамкой 6:

На выходе страницы получим такую таблицу:

При помощи атрибута bordercolor можно задать цвет нашей рамки в таблице. На HTML примере покажу таблицу с зеленой рамкой и толщиной 4:

Получим вот что:

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

Наш браузер выведет такую таблицу:

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

Столбец 1 Столбец 2 Столбец 3

Полученная таблица в браузере:

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

  • colspan — объединение ячеек по горизонтали;
  • rowspan — объединение ячеек по вертикали.

Довольно сложно представить, поэтому приведу простой пример HTML-код:

В браузере получим такую таблицу:

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

Чтобы рзменить размеры таблицы и ячеек, надо использовать атрибуты width (ширина) и height (высота). Значения этих атрибутов можно указывать либо в пикселях, либо в процентах. Приведу пример HTML-кода:

C ячейками попробуй сам по такому же принципу. Выравнивать ттаблицу а также текст в ячейчах можно при помощи атрибута align. Значения могут быть знакомые нам: center (по центру), left (по левому краю) и right (по правому краю). Давай выравним таблицу по правому краю:

Чтобы выранивать содержимое ячеек по вертикали, нам понадобится атрибут для ячейки valign. Приведу его значения:

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

Попробуйте сделать пример HTML-кода сами, мне кажется на данном этапе урока данное задание полезно 🙂

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

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

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

← Теги HTML для создания ссылок Метатеги в HTML →

Дата публикации: 15 мая, 2012

Раньше я говорил: «Я надеюсь, что все изменится». Затем я понял, что существует единственный способ, чтобы все изменилось — измениться мне самому.
© Джим Рон

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

Источник

Таблицы в 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» бывают следующие значения:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

HTML тег

Синтаксис тега

Между открывающим тегом

и закрывающим тегом

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

Пример таблицы html

Как сделать таблицу в html

Приведем пример, html код:

Преобразуется на странице в следующее:

Пример таблицы
Столбец 1 Столбец 2

Обратите внимание на ячейку

. Мы используем специальный атрибут colspan для объединения ячеек по горизонтали. Его численное значение указывает число объединяемых столбцов. Также существует аналог этого атрибута: тег

(заголовок таблицы), где нужно также прописать colspan. Результат будет таким же. Но зачастую используют обычный td.

Атрибуты и свойства тега

1. Свойство align=»параметр» — задает выравнивание таблицы. Может принимать следующие значения:

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

В разобранном выше примере мы выравнивали таблицу по центру align=»center» .

2. Свойство background=»URL» — задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения.

Преобразуется на странице в следующее:

Пример таблицы
Столбец 1 Столбец 2

В рассмотренном примере наше фоновое изображение находится в папке img (которая находится в той же директории, что и html-страница), а называется изображение fon.gif . Обратите внимание на то, что в теге мы добавили style=»color:white;» . Поскольку фон почти черный, то для того, чтобы текст не слился с фоном, мы сделали текст белым.

Более подробно про фон читайте в статье: как сделать фон для сайта

3. Свойство bgcolor=»цвет» — задает цвет фона таблицы. В качестве цвета можно выбрать любой из всей палитры (см. коды и названия html цветов)

4. Свойство border=»число» — задает толщину рамки таблицы. В предыдущих примерах мы указывали border=»1″ , что означает толщина рамки — 1 пиксель.

5. Свойство bordercolor=»цвет» — задает цвет рамки. Если border=»0″ , то рамки не будет и цвет рамки не будет иметь смысла.

6. Свойство cellpadding=»число» — отступ от рамки до содержимого ячейки в пикселях.

7. Свойство cellspacing=»число» — расстояние между ячейками в пикселях.

8. Свойство cols=»число» — число столбцов. Если его не задать, то браузер сам определит число столбцов. Разница лишь в том, что указание этого параметра, скорее всего, ускорит загрузку таблицы.

9. Свойство frame=»параметр» — как отображать границы вокруг таблицы. Может принимать следующие значения:

  • void — не отрисовывать границы
  • border — граница вокруг таблицы
  • above — граница по верхнему краю таблицы
  • below — граница снизу таблицы
  • hsides — добавить только горизонтальные границы (сверху и снизу таблицы)
  • vsides — рисовать только вертикальные границы (слева и справа от таблицы)
  • rhs — граница только на правой стороне таблицы
  • lhs — граница только на левой стороне таблицы

10. Свойство height=»число» — задает высоту таблицы: либо в пикселях, либо в процентах.

11. Свойство rules=»параметр» — где отображать границы между ячейками. Может принимать следующие значения:

  • all — линия рисуется вокруг каждой ячейки таблицы
  • groups — линия отображается между группами, которые образуются тегами , ,

    , или
  • cols — линия отображается между колонками
  • none — все границы скрываются
  • rows — граница рисуется между строками таблицы, созданными через тег

12. Свойство width=»число» — задает ширину таблицы: либо в пикселях, либо в процентах.

13. Свойство class=»имя_класса» — можно указать имя класса, которому принадлежит таблица.

14. Свойство style=»стили» — стили можно задать индивидуально для каждой таблицы.

Атрибуты и свойства

и

1. Свойство align=»параметр» — задает выравнивание отдельной ячейки таблицы. Может принимать следующие значения:

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

2. Свойство background=»URL» — задает фоновое изображение ячейки. Вместо URL должен быть написан адрес фонового изображения.

3. Свойство bgcolor=»цвет» — задает цвет фона ячейки.

4. Свойство bordercolor=»цвет» — задает цвет рамки ячейки.

5. Свойство char=»буква» — задает букву, от которой нужно сделать выравнивание. Значение атрибута align должно быть установлено как char.

6. Свойство colspan=»число» — задает число объединяемых горизонтальных ячеек.

7. Свойство height=»число» — задает высоту таблицы: либо в пикселях, либо в процентах %.

8. Свойство width=»число» — задает ширину таблицы: либо в пикселях, либо в процентах %.

9. Свойство rowspan=»число» — задает число объединяемых вертикальных ячеек.

10. Свойство valign=»параметр» — выравнивание содержимого ячейки по вертикали.

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

Примечание 1

Как сделать, чтобы границы ячеек в таблице не склеивались

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

Более подробно про это свойство читайте в специальной статье border-collapse CSS

Уважаемый читатель, теперь Вы узнали гораздо больше о html теге table. Теперь советую перейти к следующему уроку.

Источник

Таблицы в HTML

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

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

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

Пример таблицы в HTML

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

> заголовок таблицы вверху

> заголовок таблицы внизу

Атрибуты тега

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

bgcolor — атрибут устанавливает цвет фона таблицы, в качестве значений используются цвета системы RGB, либо названия цвета.

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

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

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

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

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

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

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

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

— основная часть таблицы. Содержит основной набор строк и столбцов которые необходимо вывести браузеру.

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

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

Пример использования тегов структуры таблицы:

Работа данного примера

Атрибуты тегов и

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

COLSPAN — Атрибут тега ? служит для объединения нескольких столбцов в один. Значением данного атрибута является количество столбцов которые необходимо соединить в один. Например: colspan=3, говорит о том, что данный столбец замещает собой три столбца таблицы (себя и еще два следующих), столбцы которые были соединены создавать данной строке больше не нужно.

ROWSPAN — атрибут тега позволяющий объединять строки таблицы для данного столбца. Значение атрибута является число строк в столбце необходимое для объединения.

ALIGN — атрибут позволяет задать выравнивание текста в ячейке, может принимать три значения: по центру (center), по левому краю (left), по правому краю (right).

VALIGN — позволяет установить вертикальное выравнивание содержимого ячейки. по умолчанию содержимое ячейки располагается по вертикали в центре. Может принимать четыре значения: по центру (middle), по верхнему краю (top), по нижнему краю (bottom), по базовой линии (baseline, при этом происходит привязка содержимого ячейки к одной линии).

BGCOLOR — позволяет установить цвет фона отдельной ячейки таблицы. Может принимать значения в виде названия цвета, либо код в шестнадцатеричной системе счисления по модели RGB.

Источник

Читайте также:  Спортбокс таблица чемпионата италии
Adblock
detector