Теги для обозначения ячеек помещаются. Атрибуты тега TABLE, бордюры, размеры и другие. Пример: Применение атрибута colspan
Таблица - один из основных инструментов для создания web-страниц.
Без использования CSS, только с помощью таблиц
можно создавать страницы со сложным дизайном. Если вы прошли серию уроков Делаем сайт - первые шаги , то вы понимаете о чем речь.
Любая таблица представляет собой набор строк и столбцов, на пересечении которых находятся ячейки. Например:
Рассмотрим нашу таблицу с точки зрения HTML:
сама таблица задается с помощью тегов
,
у таблицы есть название - теги
,
таблица состоит из строк - теги
,
каждая строка состоит из столбцов - теги
,
столбцы имеют названия, расположенные в первой строке - теги
.
Создадим таблицу, где в качестве содержимого укажем пересечение номеров строк и столбцов:
Результат:
Как видите, получилось не очень красиво, будем украшать.
Параметры html таблиц: отступ, ширина, цвет фона, рамка
Для этого у тега
существует ряд параметров:
width
- задает ширину таблицы (в пикселах или % от ширины экрана),
bgcolor
- задает цвет фона ячеек таблицы,
background
- заливает фон таблицы рисунком,
border
- задает рамку указанной ширины (в пикселах) вокруг всей таблицы,
cellpadding
- задает отступ в пикселях между границей клетки и ее содержимым.
Применим эти параметры:
Результат:
Уже лучше, но наша таблица прижата к левому краю окна, также как и текст в ней. Исправим это, добавив еще три параметра:
align
- задает выравнивание таблицы: слева (right), справа (left), по центру (center),
cellspacing
- задает расстояние между ячейками таблицы (в пикселах),
cellpadding
- задает расстояние между текстом и внутренней границей ячейки таблицы (в пикселах).
Применим эти параметры:
Результат:
Обратите внимание, границы у таблицы двойные. Если указать cellspacing="0"
, то границы примут
привычный вид:
Результат:
Вообще, за границы отвечают два параметра:
frame
- задает вид рамки вокруг таблицы и может принимать следующие значения:
void
- рамки нет,
above
- только верхняя рамка,
below
- только нижняя рамка,
hsides
- только верхняя и нижняя рамки,
vsides
- только левая и правая рамки,
lhs
- только левая рамка,
rhs
- только правая рамка,
box
- все четыре части рамки.
rules
- задает вид внутренних границ таблицы и может принимать следующие значения:
none
- между ячейками нет границ,
groups
- границы только между группами строк и группами столбцов (будут рассмотрены чуть позже),
rows
- границы только между строками,
cols
- границы только между стобцами,
all
- отображать все границы.
С помощью этих параметров можно задавать границы так, как вам хочется. Здесь приведем только один пример, сами же
поэкспериментируйте со всеми.
Результат:
Следует заметить, что границы в разных браузерах отображаются немного по-разному.
HTML тэги tr и td
Таблицы формируются построчно. Поэтому, заданные в строке (tr) параметры распространяют свое действие на все ячейки (td) строки.
У строк можно использовать три параметра:
align
- выравнивает текст в ячейках по горизонтали, может принимать значения: слева (right), справа (left), по центру (center),
valign
- выравнивает текст в ячейках по вертикали, может принимать значения: вверх (top),
вниз (bottom), по центру (middle),
bgcolor
- задает цвет строки.
Посмотрим на примере:
width
- задает ширину столбца (в пикселах или в процентном соотношении, где за 100% принимается ширина
таблицы),
height
- задает высоту ячейки, причем все ячейки в этой же строке станут этой высоты.
Например, добавим в наш код, в теги
эти параметры
1
2
3
Результат:
Следует отметить, если не задавать ширину и высоту, то таблица будет формироваться по содержимому (так было в предыдущих
примерах).
На этом урок закончен, потренируйтесь создавать и оформлять таблицы, эти умения понадобятся вам на следующем уроке, где мы
будем создавать таблицы сложных структур.
Таблица c рамками
Имя
Фамилия
Лариса
Исаева
Дмитрий
Колесников
РЕЗУЛЬТАТ:
Таблица без рамок
Таблица c рамками
Атрибуты тегов
и
для объединения ячеек
Пример
хорьки
вес
размер
самцы
1.2 – 2.5 кг
до 70см
самки
0.7 – 1.0 кг
до 40см
РЕЗУЛЬТАТ:
хорьки
вес
размер
самцы
1.2 – 2.5 кг
до 70см
самки
0.7 – 1.0 кг
до 40см
По стандарту HTML5 все ранее используемые атрибуты таблицы, такие как border
, cellspacing
, cellpadding
и др. больше не поддерживаются и их использование
валидатор считает ошибками в коде. Для оформления таблиц нужно использовать CSS-стили, с помощью которых можно заменить все устаревшие атрибуты таблиц .
Например, вместо атрибута cellspacing
для изменения расстояния между ячейками таблицы используется свойство border-spacing
, а для выравнивания
содержимого в ячейках таблицы – свойства text-align
и vertical-aling
. CSS-стили для оформления таблиц
Теги группирования строк html таблицы
Для создания более сложных таблиц можно использовать теги:
Пример
Потребление пива
Ф.И.О.
литров
Итого
250
Иванов Иван Иванович
133
Петров Петр Петрович
117
РЕЗУЛЬТАТ:
Теги группирования столбцов html таблицы
Атрибут тегов
и
Проще всего понять, как можно использовать группировку строк и столбцов на примере таблицы Судоку .
Тег col устанавливает параметры отдельно для каждого столбца. При этом неважно, как написать в исходном коде:
или
Пример
желтый
красный
РЕЗУЛЬТАТ:
Не пытайтесь установить стиль text-align
для тегов
и
. Текст, размещенный между тегами
...
, не наследует этот стиль,
поскольку тег
не является потомком ни тега
, ни тега
.
Горизонтальное выравнивание текста в определенном столбце таблицы можно изменить, указав стиль text-align
для псевдокласса
td:nth-child(n)
,
где n – номер столбца. Однако, этот метод не сработает, если среди ячеек таблицы присутствует атрибут colspan
.
Пример
Наименование
Цена (руб.)
Поминутная оплата солярия (от 4 минут)
15
50 минут солярия (14 руб/мин, 1 мес.)
700
100 минут солярия (13 руб/мин, 2 мес.)
1300
200 минут солярия (12 руб/мин, 3 мес.)
2400
РЕЗУЛЬТАТ:
Однако, этот метод не сработает, если среди ячеек таблицы присутствует атрибут colspan
.
Стал популярен, web-дизайнеры в основном использовали метод табличной вёрстки и получали очень хороший результат.
Теги, используемые для построения таблицы в html
table
- обязательный тег, открывающий и закрывающий таблицу caption
- необязательный тег, обозначающий заголовок таблицы th
- необязательный тег, в открывающий и закрывающий теги которого вписывается название столбца. Как правило, выделяется жирным tr
- обязательный тег, с которого открывается и закрывается строка td
- обязательный тег, обозначающий открытие и закрытие ячейки в строке
Пример кода простой таблицы
Таблица html
Название таблицы
Стобец 1
Стобец 2
Текст в первой ячейке
Текст во второй ячейке
В браузере отобразится
Назначение таблиц в html
Урок по таблицам очень важен! Благодаря таблицам Вы можете расположить не только текст, но и изображения, ссылки и много другое. В таблице можно задавать фон
(или его цвет), отступ
, ширину
, границу
и другие параметры
, что придаст ей красивый внешний вид. Таблица - Ваш первый шаг к понимаю web-дизайна
! Ранее многие сайты были целиком свёрстаны как таблицы, то есть всё, что видел пользователь (боковое меню, верхнее меню, содержание) - было содержанием ячеек большой таблицы.
На этой ноте перейдём непосредственно к атрибутам, которые делают таблицу красивой...
Свойства и параметры html таблиц: отступ, ширина, цвет фона, граница (рамка)
У тега table
есть следующие атрибуты:
width
- ширина таблицы. может быть в пикселях или % от ширины экрана. bgcolor
- цвет фона ячеек таблицы background
- заливает фон таблицы рисунком border
- рамка и границы в таблице. Толщина указывается в пикселях cellpadding
- отступ в пикселях между содержимым ячейки и её внутренней границей
Как и ранее, значение атрибута прописываем в кавычках.
Рассмотрим применения данных атрибутов на примере. Для этого создадим таблицу (но уже без крайне редко применяемых тегов caption и th
) и зададим параметр атрибуту border (граница)
, width (ширина таблицы, строки или ячейки)
и bgcolor (цвет ячейки)
Таблица html
Стобец 1
Стобец 2
В результате в браузере будет выведена таблица следующего вида frame
- атрибут, обозначающий рамку вокруг таблицы. Есть следующие значения:
Void - рамки нет,
above - только верхняя рамка,
below - только нижняя рамка,
hsides - только верхняя и нижняя рамки,
vsides - только левая и правая рамки,
lhs - только левая рамка,
rhs - только правая рамка,
box - все четыре части рамки.
rules
- атрибут, обозначающий границы внутри таблицы, между ячейками. Есть следующие значения:
None - между ячейками нет границ,
groups - границы только между группами строк и группами столбцов (будут рассмотрены чуть позже),
rows - границы только между строками,
cols - границы только между стобцами,
all - отображать все границы.
Рассмотрим пример кода
Таблица html
Стобец 1
Стобец 2
Текст в первой ячейке первого столбца
Текст во второй ячейке второго столбца
Результат
Теперь попробуем создать красивую таблицу. Для этого давайте начнём использовать выравнивание в таблице
. Для этого есть следующие уже знакомые параметры:
align
- выравнивание таблицы. Её можно расположить слева (left), справа (right), по центру (center) cellspacing
- расстояние между ячейками таблицы. Указывается в пикселях (по умолчанию 0 пикселей) cellpadding
- отступ в пикселях между содержимым ячейки и её внутренней границей (по умолчанию 0 пикселей)
Рассмотрим пример
Таблица html
Стобец 1
Стобец 2
Текст в первой ячейке первого столбца
Текст во второй ячейке второго столбца
В браузере отобразится выравненная по центру таблица следующего вида
Строки tr и ячейки td в таблицах HTML
Снова напомню о том, что таблицы формируются построчно (tr). В строках (tr) уже находятся ячейки (td). Если задавать параметр для строки (tr), то он будет действителен для всех ячеек
(td) в этой строке, если для конкретной ячейки, то только для неё. В примерах выше я указывал цвет для строки, этот параметр распространялся соответственно для всех ячеек.
Стобец 1
Стобец 2
Для тегов tr и td есть следующие
align
- выравнивание текста внутри ячейки. По левому краю (left), по правому краю (right), по центру (center) valign
- выравнивание текста внутри ячейки по вертикали. Вверх (top), вниз (bottom), по центру (middle) bgcolor
- задает цвет строки width
- ширина столбца (все ячейки ниже примут данный параметр) указывается в пикселях или в процентах, где 100% ширина всей таблицы height
- высота ячейки (все ячейки в строке примут данный параметр)
Рассмотрим код, где содержимое ячеек (td), выравнено по разным краям: в первой по левому, во второй по правому:
Таблица html
Стобец 1
Стобец 2
Текст в первой ячейке первого столбца
Текст во второй ячейке второго столбца
Результат
С помощью таблиц можно сверстать очень даже неплохую страницу. Не забывайте, что в ячейки можно вставлять не только текст, но и изображения, ссылки и прочее!)
Спасибо за внимание! Надеюсь материал был полезен!
Благодаря универсальности таблиц, большому числу параметров, управляющих их видом, таблицы надолго стали определенным стандартом для верстки веб-страниц. Таблица с невидимой границей представляет собой словно модульную сетку, в блоках которой удобно размещать элементы веб-страницы. Тем не менее, это не совсем правильный подход, ведь каждый объект HTML определен для своих собственных целей и если он используется не по назначению, причем повсеместно, это значит, что альтернатив нет. Так оно и было долгое время, пока на смену таблицам при верстке сайтов не пришли слои. Это не значит, что слои теперь используются сплошь и рядом, но тенденция уже наметилась четко — таблицы применяются для размещения табличных данных, а слои — для верстки и оформления.
Создание таблицы
Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений.
Для добавления таблицы на веб-страницу используется тег
. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов
и
. Таблица должна содержать хотя бы одну ячейку (пример 12.1). Допускается вместо тега
использовать тег
. Текст в ячейке, оформленной с помощью тега
, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги
и
нет.
Пример 12.1. Создание таблицы
Тег TABLE
Ячейка 1
Ячейка 2
Ячейка 3
Ячейка 4
Порядок расположения ячеек и их вид показан на рис. 12.1.
Таблицы в HTML настолько функциональны, что с помощью них можно верстать целые сайты (читайте ). Сейчас мы поговорим о вставке на веб-страницу несложных HTML-таблиц, разбирая только разметку, но не касаясь оформления, потому что украшать таблицы лучше с помощью CSS-стилей.
Теги и атрибуты таблиц
Вот основные элементы, которые нужны для создания таблиц:
- контейнер, внутри которого располагается таблица (такой же, как
для маркированных или для нумерованных списков).
border
- атрибут, определяющий толщину рамок. Вместо него лучше использовать свойство border CSS.
задаёт подпись таблицы. Контейнер можно не использовать, но если вы всё-таки решили озаглавить таблицу, то ставьте его сразу после тега
, вне ячеек и строк.
- парный тег, содержащий строку таблицы (ячейки, расположенные на одном уровне по горизонтали).
- тег, создающий ячейку заголовка таблицы. Внешне её содержимое отличается от контента в других ячейках - обычно текст внутри
обозреватель выделяет жирным и размещает по центру.
- контейнер, с помощью которого создаётся простая ячейка. Сколько таких тегов будет содержать строка (тег
, столько ячеек в ней и будет: один тег - одна ячейка.
позволяет группировать столбцы, быстро и не засоряя код задавать им общие характеристики. С помощью контейнера можно отделять логические части таблицы друг от друга. Располагается после тега
, если его нет, то после
.
используется для той же цели, что и
.
может содержать
, но не наоборот.
span
- атрибут, задающий число столбцов, к которым применяются свойства контейнера
.
,
и
- контейнеры, которые позволяют разделить таблицу соответственно на верхнюю (заголовки), основную (тело) и нижнюю (итоговую) части. В HTML-таблице последовательность этих тегов такая же, как последовательность контейнеров , и в HTML-документе.
colspan
нужен для объединения ячеек в строке. Значение атрибута содержит цифру, которая и задаёт количество объединяемых ячеек.
rowspan
объединяет ячейки по столбцам.
Пример создания таблицы
Создайте документ формата HTML и скопируйте в него следующий код:
Пример таблицы
Инструменты создания сайтов
Назначение
Инструмент
Разметка
HTML
XHTML
Оформление
CSS
Разработка
PHP
Python
В браузере документ будет выглядеть так:
Разберём, какие строчки кода за что отвечают.
- открыли таблицу, задав ей толщину рамок.
Инструменты создания сайтов - озаглавили её.
- открыли строку.
Назначение
- создали ячейку с оформлением заголовка.
Инструмент
- создали вторую заголовочную ячейку в строке. Параметром colspan указали, что эта ячейка должна занимать по горизонтали две.
- закрыли строку. Аналогично создали остальные строки.
Разметка
HTML
XHTML
- добавили вторую строку таблицы уже с обычными, а не заголовочными, ячейками. Аналогично вставили последующие строки и ячейки.
Следует заметить, что границы в разных браузерах отображаются немного по-разному.
