Разные таблицы в html. Атрибуты АLIGN и VALIGN

Стал популярен, web-дизайнеры в основном использовали метод табличной вёрстки и получали очень хороший результат.

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

table - обязательный тег, открывающий и закрывающий таблицу
caption - необязательный тег, обозначающий заголовок таблицы
th - необязательный тег, в открывающий и закрывающий теги которого вписывается название столбца. Как правило, выделяется жирным
tr - обязательный тег, с которого открывается и закрывается строка
td - обязательный тег, обозначающий открытие и закрытие ячейки в строке

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

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

Стобец 1	Стобец 2
Текст в первой ячейке	Текст во второй ячейке

В браузере отобразится

Назначение таблиц в html

Урок по таблицам очень важен! Благодаря таблицам Вы можете расположить не только текст, но и изображения, ссылки и много другое. В таблице можно задавать фон (или его цвет), отступ , ширину , границу и другие параметры , что придаст ей красивый внешний вид. Таблица - Ваш первый шаг к понимаю web-дизайна ! Ранее многие сайты были целиком свёрстаны как таблицы, то есть всё, что видел пользователь (боковое меню, верхнее меню, содержание) - было содержанием ячеек большой таблицы.
На этой ноте перейдём непосредственно к атрибутам, которые делают таблицу красивой...

Свойства и параметры html таблиц: отступ, ширина, цвет фона, граница (рамка)

У тега table есть следующие атрибуты:

width - ширина таблицы. может быть в пикселях или % от ширины экрана.
bgcolor - цвет фона ячеек таблицы
background - заливает фон таблицы рисунком
border - рамка и границы в таблице. Толщина указывается в пикселях
cellpadding - отступ в пикселях между содержимым ячейки и её внутренней границей
Как и ранее, значение атрибута прописываем в кавычках.

Рассмотрим применения данных атрибутов на примере. Для этого создадим таблицу (но уже без крайне редко применяемых тегов caption и th ) и зададим параметр атрибуту border (граница) , width (ширина таблицы, строки или ячейки) и bgcolor (цвет ячейки)

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

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

Void - рамки нет,
above - только верхняя рамка,
below - только нижняя рамка,
hsides - только верхняя и нижняя рамки,
vsides - только левая и правая рамки,
lhs - только левая рамка,
rhs - только правая рамка,
box - все четыре части рамки.

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

None - между ячейками нет границ,
groups - границы только между группами строк и группами столбцов (будут рассмотрены чуть позже),
rows - границы только между строками,
cols - границы только между стобцами,
all - отображать все границы.

Рассмотрим пример кода

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

Результат

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

align - выравнивание таблицы. Её можно расположить слева (left), справа (right), по центру (center)
cellspacing - расстояние между ячейками таблицы. Указывается в пикселях (по умолчанию 0 пикселей)
cellpadding - отступ в пикселях между содержимым ячейки и её внутренней границей (по умолчанию 0 пикселей)
Рассмотрим пример

Стобец 1	Стобец 2
Текст в первой ячейке первого столбца	Текст во второй ячейке второго столбца

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

Строки tr и ячейки td в таблицах HTML

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

Для тегов tr и td есть следующие

align - выравнивание текста внутри ячейки. По левому краю (left), по правому краю (right), по центру (center)
valign - выравнивание текста внутри ячейки по вертикали. Вверх (top), вниз (bottom), по центру (middle)
bgcolor - задает цвет строки
width - ширина столбца (все ячейки ниже примут данный параметр) указывается в пикселях или в процентах, где 100% ширина всей таблицы
height - высота ячейки (все ячейки в строке примут данный параметр)

Рассмотрим код, где содержимое ячеек (td), выравнено по разным краям: в первой по левому, во второй по правому:

Стобец 1	Стобец 2
Текст в первой ячейке первого столбца	Текст во второй ячейке второго столбца
Стобец 1	Стобец 2

Результат

С помощью таблиц можно сверстать очень даже неплохую страницу. Не забывайте, что в ячейки можно вставлять не только текст, но и изображения, ссылки и прочее!)

Спасибо за внимание! Надеюсь материал был полезен!

Таблица c рамками

Стобец 1	Стобец 2
Текст в первой ячейке первого столбца	Текст во второй ячейке второго столбца

Имя	Фамилия
Лариса	Исаева
Дмитрий	Колесников

РЕЗУЛЬТАТ:

Таблица без рамок

Таблица 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 .

Ячейку-заголовок или - обычную ячейку в каждой строке.

Таблица, созданная тегом

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

К таблице можно добавить подпись, используя тег .

Внутри таблицу

можно делить не только по строкам, но и по колонкам используя теги и .

HTML таблицы

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

Синтаксис

HTML контент таблицы

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

Ниже представлены 2 варианта HTML таблиц.

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

HTML код сложной таблицы

Подпись таблицы

Ячейка колонтитула 1	Ячейка колонтитула 2	Ячейка колонтитула 3
Ячейка колонтитула 4	Ячейка колонтитула 5	Ячейка колонтитула 6
Ячейка 1	Ячейка 2	Ячейка 3
	Ячейка 4

Поддержка браузерами

создает новую строку. Далее во вложенных вставить изображение.

Тег
Да Да Да Да Да Атрибуты В HTML5 тег не имеет атрибутов. Устаревшие атрибуты тега table Атрибут Значения Описание align left right center justify Задает правило выравнивания содержимого таблицы по горизонтали. В HTML5 используйте CSS. bgcolor rgb HTML hex HTML colorname Фоновый цвет. В HTML5 используйте CSS. Примеры: RGB: rgb(226,112,017), rgb(0, 40, 129). HTML hex: #1a2a2c, #eee. HTML colorname: black, yellow; border число Ширина границ таблицы в пикселях. По умолчанию: 0 - границы не выводятся. В HTML5 используйте CSS. cellpadding число Отступ от границ ячеек до их содержимого. Значение указывает количество пикселей. В HTML5 используйте CSS. cellspacing число Отступ между границами ячеек. Значение указывает количество пикселей. В HTML5 используйте CSS. frame void above below lhs rhs vsides hsides box border Определяет какие внешние границы будут отображены: void - все границы скрыты; above - только верхняя граница; below - только нижняя граница; lhs - только левая граница; rhs - только правая граница; vsides - вертикальные границы; hsides - горизонтальные границы; box или border - все границы. В HTML5 используйте CSS. rules none groups rows cols all Определяет какие внутренние границы будут отображены: none - все скрыты; groups - границы групп; rows - границы строк; cols - границы колонок; all - все; В HTML5 используйте CSS. summary текст Описание таблицы. width пиксели проценты Ширина таблицы. В HTML5 используйте CSS. находится тело таблицы. Тело состоит из строк и столбцов. Таблица заполняется построчно. Каждый тег
создаются столбцы. Можно создавать множество столбцов. При этом нужно следить за количеством столбцов в каждой строке. Например, если в первой строке было 5 столбцов, то и в следующих строках должно быть 5 столбцов. Иначе таблица поплывет. Есть возможность объединять ячейки. Как сделать таблицу в html Приведем пример, html код: Пример таблицы Столбец 1 Столбец 2 Обратите внимание на ячейку	. Мы используем специальный атрибут colspan для объединения ячеек по горизонтали. Его численное значение указывает число объединяемых столбцов. Также существует аналог этого атрибута: тег		(заголовок таблицы), где нужно также прописать colspan. Результат будет таким же. Но зачастую используют обычный td. Теперь рассмотрим подробно все атрибуты тега . Атрибуты и свойства тега К открывающему тегу можно прописывать различные атрибуты. 1. Свойство align="параметр" - задает выравнивание таблицы. Может принимать следующие значения: В разобранном выше примере мы выравнивали таблицу по центру align="center" . Этот атрибут можно применять не только к таблице, но и к отдельным ячейкам таблицы . Таким образом, в разных ячейках выравнивание будет разное. Например , , , или cols - линия отображается между колонками none - все границы скрываются rows - граница рисуется между строками таблицы, созданными через тег 12. Свойство width="число" - задает ширину таблицы: либо в пикселях, либо в процентах. 13. Свойство class="имя_класса" - можно указать имя класса, которому принадлежит таблица. 14. Свойство style="стили" - стили можно задать индивидуально для каждой таблицы. Теперь настало время погрузиться внутрь таблицы и рассмотреть атрибуты ячеек таблицы. Эти атрибуты надо писать в открывающем теге и доступны такие же параметры, что и для будут иерархично применены ко всем обязателен. TD – создает новую ячейку в ряду. Закрывающий тег обязателен. Давайте рассмотрим пример, чтобы лучше понять все выше сказанное: или строкам ... ... ... 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 - линия отображается между группами, которые образуются тегами . Атрибуты и свойства 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 : ... Уважаемый читатель, теперь Вы узнали гораздо больше о html теге table. Теперь советую перейти к следующему уроку. То таблицы играют очень важную роль в создании невидимого каркаса для веб-страницы. А это поможет равномерно и красиво расположить текст, меню, картинки и т.д. Для лучшего понимания, о чем я пытаюсь вам рассказать, посмотрите на пример каркаса веб-страницы: Итак, как в HTML сделать простую таблицу ? Для постройки таблицы необходимо использовать три тега: TABLE – этот тег нужен для открытия таблицы. Это, своего рода, контейнер, в котором содержатся другие элементы. Вот загнул так, что без пончика не разобраться. Ничего, разберетесь, когда увидите пример. Закрывающий тег обязателен. Таблица состоит из ряда ряд 1 ряд 1 ряд 2 ряд 2 ряд 3 ряд 3 ячейка 1 ячейка 2 ячейка 1 ячейка 2 ячейка 1 ячейка 2 TR – создает новый ряд таблицы. Закрывающий тег ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 ряд 3 ячейка 1 ряд 3 ячейка 2 Вот результат: ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 ряд 3 ячейка 1 ряд 3 ячейка 2 Давайте все объясню. Перед каждым созданием новой таблицы открывается тег . Дальше, размещаем в середине контейнера тег , что говорит о начале нового ряда. В этом ряду вставляем две ячейки с содержанием при помощи тега Закрываем ряд тегом . Открываем другой ряд тегом Закрываем ряд тегом . Открываем третий ряд тегом и вставляем в него снова две ячейки. Закрываем ряд тегом . Закрываем таблицу тегом ряд 1 ячейка1 ряд1 ячейка2 . Я думаю, разобрались? Если кто-то забыл, что такое атрибут border , который я использую вместе с тегом , напоминаю, что это толщина рамки. Если в border будет установлено значение «0» , тогда границы таблицы будут невидимые. Посмотрите парочку примеров созданных таблиц и можно идти дальше: ряд 1 ячейка 1 ряд 2 ячейка 1 Результат: Для того чтобы вставить картинку в таблицу, нужно владеть элементарными начальными знаниями о том, как вставляется изображение в HTML файл. Об этом я рассказываю в . Теперь, когда вы знаете основные нюансы об изображении в HTML, можно попробовать вставить картинку в таблицу. Это можно сделать следующим образом: в строку между тегами

ряд 1 ячейка 1

ряд 1 ячейка 2

Результат:

ряд 1 ячейка 1

ряд 1 ячейка 2

А как объединить ячейки в таблице?

Чтобы объединить ячейки в таблице, вам нужно использовать такие атрибуты:
COLSPAN – определяет количество столбцов.
По умолчанию значение 1.
ROWSPAN – определяет количество рядов.
По умолчанию значение 1.

объединяем ячейки в верхнем ряду с помощью атрибута colspan :

ряд 1 ячейка 1+2
ряд 2 ячейка 1	ряд 2 ячейка 2

Результат:

Как установить размер таблицы?

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

WIDTH – ширина таблицы. Размер задается в пикселях или в процентах.
HEIGHT – высота таблицы. Размер задается в пикселях или в процентах.

ряд 1 ячейка1	ряд1 ячейка2
ряд 2 ячейка 1	ряд 2 ячейка 2

Результат:

Выравнивание содержимого в таблице

Чтобы выровнять внутри таблицы содержимое (текст, картинки), можно воспользоваться такими атрибутами:

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

VALIGN – вертикальное выравнивание содержимого в таблице.
К атрибуту VALIGN присваивается значения: top , bottom , middle .
top – прижать содержимое к верху;
bottom – прижать содержимое к низу;
middle – установить содержимое посередине

ряд 1 ячейка1	ряд1 ячейка2
ряд 2 ячейка 1	ряд 2 ячейка 2

Результат:

Как сделать фон таблицы?

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

BGCOLOR – цвет фона всей таблицы или к каждой ячейке по отдельности. Цвет задается кодом или словом.
BACKGROUND –фон в таблице заполняется рисунком.

Внимание: если вы ходите задать фон цветом или фоновым рисунком всей таблице, атрибуты нужно установить в теге

. А если только к определенной ячейке, тогда в тег

. Для лучшего понимания посмотрите пример: ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 Результат: Внимание: если картинка по размеру меньше за ячейку, тогда она будет повторяться, пока не заполнит ячейку до конца. Если картинка больше за ячейку, тогда фон картинки будет обрезан по размерам ячейки. И напоследок расскажу еще о двух полезных атрибутах . В случае, если вам вдруг захочется увеличить расстояние между всеми ячейками, помогут следующие атрибуты: CELLPADDING –расстояние между рамкой каждой ячейки html таблицы и содержимым в ней материалом. ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 Результат: ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 CELLSPACING –расстояние между границами соседних ячеек. ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 Результат: ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 Фух, рассказал! Надеюсь, с задачей я справился и доступно объяснил все, что я знал про html таблицы . А вам, рекомендую хорошо закрепить материал. Попробуйте создать собственную таблицу, а лучше целый каркас для веб-страницы из таблицы html. Всего вам хорошего! Спасибо, что посетили мой блог Рекомендуем другие статьи Теле2 Обновить framework до последней версии Теле2 Подключение факса и особенности использования Можно ли со смартфона отправить факс