Как сделать вертикальную таблицу в html. Атрибуты АLIGN и VALIGN
23.10.2023
Благодаря универсальности таблиц, большому числу параметров, управляющих их видом, таблицы надолго стали определенным стандартом для верстки веб-страниц. Таблица с невидимой границей представляет собой словно модульную сетку, в блоках которой удобно размещать элементы веб-страницы. Тем не менее, это не совсем правильный подход, ведь каждый объект 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
- добавили вторую строку таблицы уже с обычными, а не заголовочными, ячейками. Аналогично вставили последующие строки и ячейки.
- закрыли таблицу.
Таблица
- набор данных, распределенных по строкам и ячейкам. В большинстве ячеек размещаются табличные данные, остальные содержат заголовки для строк и столбцов, описывающие содержимое.
Для создания таблицы в HTML-документе используется тег
, он представляет собой контейнер, в котором находится все содержимое таблицы.
Создание таблицы всегда начинается со строк, которые определяются с помощью тега
, каждая строка, в свою очередь, состоит из ячеек. Тег
может содержать в себе только теги для создания ячеек.
В HTML существует два разных тега для создания ячеек, первым из них является
, он создает обычные ячейки с данными. По умолчанию, содержимое тегов
выравнивается по левому краю. Второй тег для создания ячеек - это тег
, он позволяет определять ячейки, которые содержат заголовки для столбцов или строк, содержимое таких ячеек отображается жирным текстом и выравнивается по центру. Теги
и
могут включать в себя любые HTML-элементы, которые доступны для использования в теле документа.
Первый заголовок
Второй заголовок
строка 1, ячейка 1
строка 1, ячейка 2
строка 2, ячейка 1
строка 2, ячейка 2
Попробовать »
Таблица внутри таблицы
В HTML есть возможность создания вложенных таблиц, то есть таких таблиц, которые расположены внутри других таблиц. Чтобы сделать вложенную таблицу надо код таблицы, которую требуется сделать вложенной, поместить внутрь любого тега
.
Для примера, возьмём уже созданную ранее нами таблицу и поместим этот код во вторую ячейку второй строки:
Первый заголовок
Второй заголовок
строка 1, ячейка 1
строка 1, ячейка 2
строка 2, ячейка 1
строка 2, ячейка 2
Первый заголовок
Второй заголовок
строка 1, ячейка 1
строка 1, ячейка 2
строка 2, ячейка 1
строка 2, ячейка 2
Таблица - один из основных инструментов для создания 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
Результат:
Следует отметить, если не задавать ширину и высоту, то таблица будет формироваться по содержимому (так было в предыдущих
примерах).
На этом урок закончен, потренируйтесь создавать и оформлять таблицы, эти умения понадобятся вам на следующем уроке, где мы
будем создавать таблицы сложных структур.
Тег colspan - объединение столбцов
Самым распространенным применением таблиц сложных структур является разметка web-страницы. Посмотрите на рисунок:
Получается, что нам нужно, чтобы в первой и третьей строках было по одному столбцу. Это достигается при помощи параметра
colspan
тега
. Этот параметр указывает браузеру объединить несколько столбцов
в один. Значением этого параметра является число, указывающее сколько столбцов будет объединено.
Например,
Этот столбец включает в себя два столбца.
Для нашего примера:
Заголовок документа
шапка сайта
меню
контент
низ сайта
Обратите внимание, что первая и третья строки теперь содержат по одному столбцу.
Рассмотрим другой пример разметки web-страницы:
шапка сайта
меню
меню
меню
меню
меню
меню
новости
контент
Посчитайте - сколько строк и столбцов в этой таблице? Для этого наложите мысленно сетку на рисунок.
Получится три строки и шесть столбцов.
Первая строка состоит из одного столбца, включающего в себя шесть столбцов. Запишем это:
шапка сайта
Вторая строка состоит из шести столбцов:
меню
меню
меню
меню
меню
меню
Третья строка состоит из двух столбцов, причем, первый включает в себя два столбца, а второй - четыре:
новости
контент
Не так и сложно. Накладываем зрительно сетку на рисунок и прописываем строки по очереди сверху вниз, описывая в каждой
нужное количество столбцов.
Тег rowspan - объединение строк
А если нам понадобится вот такая разметка?
Обратите внимание, во второй строке у нас только один столбец, т.к. первый столбец тянется из первой строки, просто включает в
себя две.
На первый взгляд, это может показаться сложным, на самом деле немного практики и вы будете создавать таблицы любой сложности.
Рассмотрим еще один пример:
шапка
меню
контент
низ сайта
Итак, в первой строке у нас два столбца, причем второй столбец объединяет две строки. Запишем это:
шапка
меню
Вторая строка - это один столбец (просто его часть скрыта вторым столбцом первой строки):
контент
Наконец, третья строка - это один столбец, включающий в себя три столбца:
низ сайта
Используя эти два параметра rowspan
и colspan
можно создавать таблицы любой сложности.
Потренируйтесь.
Вложенные таблицы
Как следует из названия одну таблицу можно поместить внутрь другой, а имеено внутрь любого столбца. Сделаем это на примере
нашей последней разметки.
Следует заметить, что границы в разных браузерах отображаются немного по-разному.
.png "Можно ли найти потерянный телефон андроид")
