Как сделать таблицу на веб странице. Атрибуты АLIGN и VALIGN
РЕЗУЛЬТАТ:
Таблица без рамок
Таблица 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?»
. В этой статье я отвечу вам на этот вопрос и приведу вам множество примеров различных html таблиц.
Как создать таблицу используя HTML
HTML-таблицы создаются в четыре шага.
1. На первом шаге в html-коде с помощью парного тега
указываем браузеру, что в web-страницу вставлена таблица:
. Элемент table является блочным элементом web-страницы. Следовательно таблица всегда выводится с новой строки с отступами по вертикали от соседних элементов, поэтому нет необходимости помещать ее в абзац.
2. На втором шаге формируем строки
таблицы, помещая парные теги
внутрь . Каждый элемент создает отдельную строку:
3. Далее, на третьем шаге формируем ячейки
таблицы с помощью парных тегов
и
, которые помещаются внутрь элемента . Тег создает обычную
ячейку, а ячейку заголовка
, т.е. шапку соответствующего столбца:
4. Ну и на последнем шаге помещаем внутрь элементов
и содержимое ячеек. HTML-код вставки таблицы на веб-страницу выглядит примерно так:
Столбец 1 Столбец 2 Столбец 3
Ячейка 1-1 Ячейка 1-2 Ячейка 1-3
Ячейка 2-1 Ячейка 2-2 Ячейка 2-3
Более тонко настроить отображение границ помогут . С помощью можно изменить толщину и цвет рамок, а также изменить тип границ.
Текст, который необходимо поместить внутрь ячеек, заключать в необязательно, но, если текст большой, его можно разбить на абзацы, применив тег
Если понадобиться как-то оформить вставляемый текст, то можно использовать .
Кроме текста мы можем помещать в ячейки картинки с помощью тега ![]()
:
В качестве содержимого ячейки может даже выступать другая таблица. В этом случае создание вложенной таблицы ничем не отличается от создания обычной таблицы. Просто между тегами
и вставляются теги и
, и в нее вставляются строки и ячейки.
При создании таблиц необходимо учитывать некоторые правила:
- для создания таблицы используется только тег
;
- тег
может находиться только внутри тега ;
- теги
и могут находиться только внутри тега , любое другое содержимое тега игнорируется браузером;
- содержимое таблицы(текст или картинки) может находиться только в тегах
и ;
- ячейки таблицы должны иметь хоть какое-то содержимое, иначе браузер может их вообще не отобразить, если же какая-то ячейка должна быть пустой, то в нее обычно помещают неразрывный пробел (HTML-литерал);
- таблица относится к блочным элементам web-страницы;
- размеры таблицы и ее ячеек зависят от содержимого, т.е. таблица растягивается по ширине и высоте так, чтобы все уместилось;
- между границами отдельных ячеек и между границей каждой ячейки и ее содержимым делается небольшой отступ;
- текст ячеек заголовка(элемент th) выводится полужирным шрифтом и выравнивается по центру;
- границы вокруг таблицы и ее ячеек по умолчанию не рисуются.
Заголовок таблицы
Начнем с парного тега ,
который задает таблице заголовок. Текст заголовка помещается внутрь этого тега, а тот должен находится внутри тега
. Причем без разницы в каком месте html-кода таблицы поместить тег , браузер все равно отобразит заголовок над таблицей и выровняет по ее центру. Но обычно тег помещают сразу после открывающего тега :
Это таблица
Ячейка 1.1 Ячейка 1.2
Ячейка 2.1 Ячейка 2.2
Отображение:
Секции таблицы
Таблицу html можно логически разбить на части — секции. Всего существует три вида секций:
- секция заголовка
, в которую помещают ячейки заголовка, которые формируют шапку таблицы;
- секция тела
, в которой располагают ячейки с основными данными;
- секция завершения
, в которую помещают ячейки с итоговыми данными.
Секция заголовка таблицы формируется с помощью парного тега . Причем допустимо использовать не более одного элемента в пределах одной таблицы, и он должен идти в html коде сразу после тега .
Секцию тела создают парным тегом
. Одна html таблица может содержать несколько секций тела, что позволяет создавать структурные блоки к которым могут применяться единые стили оформления.
Секция завершения формируется парным тегом
и в пределах одного контейнера может быть только одна.
Все эти парные теги должны содержать теги
, которые формируют строки, относящиеся к соответствующим секциям:
Столбец 1 Столбец 2 Столбец 3
Ячейка 1.1 Ячейка 1.2 Ячейка 1.3
Ячейка 2.1 Ячейка 2.2 Ячейка 2.3
Итог 1 Итог 2 Итог 3
Объединение ячеек таблицы
Осталось рассказать о самой важной возможности таблиц — объединении ячеек.
Для объединения нескольких ячеек в одну используются атрибуты colspan
и rowspan
тегов
и . Атрибут colspan задает количество ячеек объединенных по горизонтали, а rowspan — по вертикали:
1.1 1.2-1.3
2.1 2.2 2.3
3.1-4.1 3.2 3.3
4.2 4.3
Результат примера:
1.1
1.2-1.3
2.1
2.2
2.3
3.1-4.1
3.2
3.3
4.2
4.3
При объединении ячеек важно проверить количество ячеек в каждой строке, чтобы не было ошибок. Так, конструкция
заменяет две ячейки, поэтому в следующей строке должно быть два тега , либо такая же конструкция! Если число ячеек во всех строках не будет совпадать, то появятся пустые лишние ячейки.
Пример неправильного html-кода при объединении ячеек:
ячейка 1.1 ячейка 1.2
ячейка 2.1 ячейка 2.2
И результат отображения в браузере:
Т.е. если проанализировать html-код, то вы заметите, что в первой строке задано три ячейки, две из которых объединены с помощью атрибута colspan, а во второй строке добавлено только две ячейки. По этому во второй строке возникает третья пустая ячейка.
Атрибуты тега
В этом посте мы уже столкнулись с одним атрибутом тега
. С атрибутом border, который задает толщину рамки в пикселях. По умолчанию он равен 0 и следовательно ячейки по умолчанию отображаются без рамки.
Кроме атрибута border есть еще несколько важных атрибутов поддерживаемых тегом
. Давайте их рассмотрим.
Атрибут align
— задает выравнивание
таблицы на странице. Может принимать значения left, center, right, которые задают выравнивание соответственно по левому краю, по центру и по правому краю. По умолчанию равен left.
Атрибут background
, который задает фоновый рисунок
к таблице. В качестве значения принимает адрес файла с изображением.
bgcolor
— устанавливает цвет фона
таблицы. Можно использовать совместно с атрибутом background.
Атрибут bordercolor
задает цвет рамки
таблицы.
Cellpadding
— определяет расстояние между границей ячейки и ее содержимым
. Позволяет улучшить читабельность таблицы. В качестве значения может быть любое положительное число.
Cellspacing
— задает расстояние между внешними границами ячеек
.
На этом рассказывать о том как вставить таблицу в html страницу
я закончу, только подведу итоги:
- для вставки таблицы используются теги
— обозначение таблицы, — добавление строки и — вставка ячейки;
- таблица представляет из себя блочные элемент web-страницы;
- в качестве содержимого ячеек может быть не только текст, но и картинки и другие таблицы;
- таблица может содержать три вида секций: секция заголовка — , секция завершения и секция тела — ;
- для объединения ячеек используем атрибуты тега
colspan и rowspan.
На этом все, в следующем посте я расскажу о средствах навигации на html-сайте. Чтобы не пропустить этот пост подписывайтесь на обновления моего блога ! Все, до новых встреч!
находится тело таблицы. Тело состоит из строк и столбцов. Таблица заполняется построчно.
Каждый тег
создает новую строку. Далее во вложенных
создаются столбцы. Можно создавать множество столбцов. При этом нужно следить за количеством столбцов в каждой строке. Например, если в первой строке было 5 столбцов, то и в следующих строках должно быть 5 столбцов. Иначе таблица поплывет. Есть возможность объединять ячейки.
Как сделать таблицу в html
Приведем пример, html код:
Пример таблицы
Столбец 1
Столбец 2
Обратите внимание на ячейку
. Мы используем специальный атрибут colspan
для объединения ячеек по горизонтали. Его численное значение указывает число объединяемых столбцов. Также существует аналог этого атрибута: тег
(заголовок таблицы), где нужно также прописать colspan. Результат будет таким же. Но зачастую используют обычный td.
Теперь рассмотрим подробно все атрибуты тега
.
Атрибуты и свойства тега
К открывающему тегу
можно прописывать различные атрибуты.
1. Свойство align="параметр"
- задает выравнивание таблицы. Может принимать следующие значения:
В разобранном выше примере мы выравнивали таблицу по центру 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
:
...
Уважаемый читатель, теперь Вы узнали гораздо больше о html теге table. Теперь советую перейти к следующему уроку.
Благодаря универсальности таблиц, большому числу параметров, управляющих их видом, таблицы надолго стали определенным стандартом для верстки веб-страниц. Таблица с невидимой границей представляет собой словно модульную сетку, в блоках которой удобно размещать элементы веб-страницы. Тем не менее, это не совсем правильный подход, ведь каждый объект HTML определен для своих собственных целей и если он используется не по назначению, причем повсеместно, это значит, что альтернатив нет. Так оно и было долгое время, пока на смену таблицам при верстке сайтов не пришли слои. Это не значит, что слои теперь используются сплошь и рядом, но тенденция уже наметилась четко — таблицы применяются для размещения табличных данных, а слои — для верстки и оформления.
Создание таблицы
Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений.
Для добавления таблицы на веб-страницу используется тег
. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов
и
. Таблица должна содержать хотя бы одну ячейку (пример 12.1). Допускается вместо тега
использовать тег
. Текст в ячейке, оформленной с помощью тега
, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги
и
нет.
Пример 12.1. Создание таблицы
Тег TABLE
Ячейка 1
Ячейка 2
Ячейка 3
Ячейка 4
Порядок расположения ячеек и их вид показан на рис. 12.1.
То таблицы играют очень важную роль в создании невидимого каркаса для веб-страницы. А это поможет равномерно и красиво расположить текст, меню, картинки и т.д.
Для лучшего понимания, о чем я пытаюсь вам рассказать, посмотрите на пример каркаса веб-страницы:
Итак, как в HTML сделать простую таблицу
?
Для постройки таблицы необходимо использовать три тега:
TABLE
–
этот тег нужен для открытия таблицы. Это, своего рода, контейнер, в котором содержатся другие элементы. Вот загнул так, что без пончика не разобраться. Ничего, разберетесь, когда увидите пример.
Закрывающий тег
обязателен.
Таблица состоит из ряда
ряд 1
ряд 1
ряд 2
ряд 2
ряд 3
ряд 3
ячейка 1
ячейка 2
ячейка 1
ячейка 2
ячейка 1
ячейка 2
TR
–
создает новый ряд таблицы. Закрывающий тег
обязателен.
TD
–
создает новую ячейку в ряду. Закрывающий тег
обязателен.
Давайте рассмотрим пример, чтобы лучше понять все выше сказанное:
Таблицы в HTML
ряд 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»
, тогда границы таблицы будут невидимые.
Посмотрите парочку примеров созданных таблиц
и можно идти дальше:
Таблицы в HTML
ряд 1 ячейка 1
ряд 2 ячейка 1
Результат:
Для того чтобы вставить картинку в таблицу, нужно владеть элементарными начальными знаниями о том, как вставляется изображение в HTML файл. Об этом я рассказываю в . Теперь, когда вы знаете основные нюансы об изображении в HTML, можно попробовать вставить картинку в таблицу. Это можно сделать следующим образом:
в строку между тегами
вставить изображение.
Таблицы в HTML
ряд 1 ячейка 1
ряд 1 ячейка 2
Результат:
ряд 1 ячейка 1
ряд 1 ячейка 2
А как объединить ячейки в таблице?
Чтобы объединить ячейки в таблице, вам нужно использовать такие атрибуты:
COLSPAN
– определяет количество столбцов.
По умолчанию значение 1.
ROWSPAN
– определяет количество рядов.
По умолчанию значение 1.
объединяем ячейки
в верхнем ряду с помощью атрибута colspan
:
Таблицы в HTML
ряд 1 ячейка 1+2
ряд 2 ячейка 1 ряд 2 ячейка 2
Результат:
Как установить размер таблицы?
Чтобы задать высоту и ширину таблицы, воспользуйтесь такими атрибутами:
WIDTH
– ширина таблицы. Размер задается в пикселях или в процентах.
HEIGHT
– высота таблицы. Размер задается в пикселях или в процентах.
Таблицы в HTML
ряд 1 ячейка1 ряд1 ячейка2
ряд 2 ячейка 1 ряд 2 ячейка 2
Результат:
Выравнивание содержимого в таблице
Чтобы выровнять внутри таблицы содержимое (текст, картинки), можно воспользоваться такими атрибутами:
ALIGN
– горизонтальное выравнивание содержимого в таблице.
К атрибуту ALIGN
присваивается значения: left
(по умолчанию)
, center
,
right
.
left
-
прижать содержимое к левой части;
center
–
установить по центру;
right
-
прижать содержимое к правой части
VALIGN
– вертикальное выравнивание содержимого в таблице.
К атрибуту VALIGN
присваивается значения: top
, bottom
, middle
.
top
–
прижать содержимое к верху;
bottom
–
прижать содержимое к низу;
middle
–
установить содержимое посередине
Таблицы в HTML
ряд 1 ячейка1
ряд1 ячейка2
ряд 2 ячейка 1
ряд 2 ячейка 2
Результат:
Как сделать фон таблицы?
Можно также задать фон таблице для всех ее ячеек вместе взятых, а также для каждой ячейки по отдельности. Можно задать фон цветом, а можно и картинкой. Для фона существуют два атрибута:
BGCOLOR
– цвет фона всей таблицы или к каждой ячейке по отдельности. Цвет задается кодом или словом.
BACKGROUND
–фон в таблице заполняется рисунком.
Внимание:
если вы ходите задать фон цветом или фоновым рисунком всей таблице, атрибуты нужно установить в теге
. А если только к определенной ячейке, тогда в тег
.
Для лучшего понимания посмотрите пример:
Таблицы в HTML
ряд 1 ячейка1
ряд1 ячейка2
ряд 2 ячейка 1
ряд 2 ячейка 2
Результат:
Внимание:
если картинка по размеру меньше за ячейку, тогда она будет повторяться, пока не заполнит ячейку до конца. Если картинка больше за ячейку, тогда фон картинки будет обрезан по размерам ячейки.
И напоследок расскажу еще о двух полезных атрибутах
.
В случае, если вам вдруг захочется увеличить расстояние между всеми ячейками, помогут следующие атрибуты:
CELLPADDING
–расстояние между рамкой каждой ячейки html таблицы и содержимым в ней материалом.
Таблицы в HTML
ряд 1 ячейка1
ряд1 ячейка2
ряд 2 ячейка 1
ряд 2 ячейка 2
Результат:
ряд 1 ячейка1
ряд1 ячейка2
ряд 2 ячейка 1
ряд 2 ячейка 2
CELLSPACING
–расстояние между границами соседних ячеек.
Таблицы в HTML
ряд 1 ячейка1
ряд1 ячейка2
ряд 2 ячейка 1
ряд 2 ячейка 2
Результат:
ряд 1 ячейка1
ряд1 ячейка2
ряд 2 ячейка 1
ряд 2 ячейка 2
Фух, рассказал!
Надеюсь, с задачей я справился и доступно объяснил все, что я знал про html таблицы
. А вам, рекомендую хорошо закрепить материал.
Попробуйте создать собственную таблицу, а лучше целый каркас для веб-страницы из таблицы html.
Всего вам хорошего!
Спасибо, что посетили мой блог
Похожие статьи
-
-
17 апреля 2015
Ламповый звук - мифы и факты
-
17 апреля 2015
Браузер Амиго – полное удаление с компьютера
-
17 апреля 2015
Установка драйвера 1с
Популярные статьи
-
-
-
-
-
-
Пример
| хорьки | ||
| вес | размер | |
| самцы | 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?» . В этой статье я отвечу вам на этот вопрос и приведу вам множество примеров различных html таблиц.
Как создать таблицу используя HTML
HTML-таблицы создаются в четыре шага.
1. На первом шаге в html-коде с помощью парного тега 2. На втором шаге формируем строки
таблицы, помещая парные теги 3. Далее, на третьем шаге формируем ячейки
таблицы с помощью парных тегов 4. Ну и на последнем шаге помещаем внутрь элементов Более тонко настроить отображение границ помогут . С помощью можно изменить толщину и цвет рамок, а также изменить тип границ. Текст, который необходимо поместить внутрь ячеек, заключать в необязательно, но, если текст большой, его можно разбить на абзацы, применив тег Если понадобиться как-то оформить вставляемый текст, то можно использовать . Кроме текста мы можем помещать в ячейки картинки с помощью тега В качестве содержимого ячейки может даже выступать другая таблица. В этом случае создание вложенной таблицы ничем не отличается от создания обычной таблицы. Просто между тегами При создании таблиц необходимо учитывать некоторые правила: Начнем с парного тега Отображение: Таблицу html можно логически разбить на части — секции. Всего существует три вида секций: Секция заголовка таблицы формируется с помощью парного тега . Причем допустимо использовать не более одного элемента в пределах одной таблицы, и он должен идти в html коде сразу после тега Секцию тела создают парным тегом Секция завершения формируется парным тегом Все эти парные теги должны содержать теги Осталось рассказать о самой важной возможности таблиц — объединении ячеек.
Для объединения нескольких ячеек в одну используются атрибуты colspan
и rowspan
тегов Результат примера: При объединении ячеек важно проверить количество ячеек в каждой строке, чтобы не было ошибок. Так, конструкция Пример неправильного html-кода при объединении ячеек: И результат отображения в браузере: Т.е. если проанализировать html-код, то вы заметите, что в первой строке задано три ячейки, две из которых объединены с помощью атрибута colspan, а во второй строке добавлено только две ячейки. По этому во второй строке возникает третья пустая ячейка. В этом посте мы уже столкнулись с одним атрибутом тега Кроме атрибута border есть еще несколько важных атрибутов поддерживаемых тегом Атрибут align
— задает выравнивание
таблицы на странице. Может принимать значения left, center, right, которые задают выравнивание соответственно по левому краю, по центру и по правому краю. По умолчанию равен left. Атрибут background
, который задает фоновый рисунок
к таблице. В качестве значения принимает адрес файла с изображением. bgcolor
— устанавливает цвет фона
таблицы. Можно использовать совместно с атрибутом background. Атрибут bordercolor
задает цвет рамки
таблицы. Cellpadding
— определяет расстояние между границей ячейки и ее содержимым
. Позволяет улучшить читабельность таблицы. В качестве значения может быть любое положительное число. Cellspacing
— задает расстояние между внешними границами ячеек
. На этом рассказывать о том как вставить таблицу в html страницу
я закончу, только подведу итоги: На этом все, в следующем посте я расскажу о средствах навигации на html-сайте. Чтобы не пропустить этот пост подписывайтесь на обновления моего блога ! Все, до новых встреч! Каждый тег Приведем пример, html код: Обратите внимание на ячейку Теперь рассмотрим подробно все атрибуты тега К открывающему тегу 1. Свойство align="параметр"
- задает выравнивание таблицы. Может принимать следующие значения: В разобранном выше примере мы выравнивали таблицу по центру align="center"
. Этот атрибут можно применять не только к таблице, но и к отдельным ячейкам таблицы Например
2. Свойство background="URL"
- задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения. Пример
Преобразуется на странице в следующее: В рассмотренном примере наше фоновое изображение находится в папке 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="параметр"
- как отображать границы вокруг таблицы. Может принимать следующие значения: 10. Свойство height="число"
- задает высоту таблицы: либо в пикселях, либо в процентах. 11. Свойство rules="параметр"
- где отображать границы между ячейками. Может принимать следующие значения: 12. Свойство width="число"
- задает ширину таблицы: либо в пикселях, либо в процентах. 13. Свойство class="имя_класса"
- можно указать имя класса, которому принадлежит таблица. 14. Свойство style="стили"
- стили можно задать индивидуально для каждой таблицы. Теперь настало время погрузиться внутрь таблицы и рассмотреть атрибуты ячеек таблицы. Эти атрибуты надо писать в открывающем теге 1. Свойство align="параметр"
- задает выравнивание отдельной ячейки таблицы. Может принимать следующие значения: 2. Свойство background="URL"
- задает фоновое изображение ячейки. Вместо URL должен быть написан адрес фонового изображения. 3. Свойство bgcolor="цвет"
- задает цвет фона ячейки. 4. Свойство bordercolor="цвет"
- задает цвет рамки ячейки. 5. Свойство char="буква"
- задает букву, от которой нужно сделать выравнивание. Значение атрибута align должно быть установлено как char. 6. Свойство colspan="число"
- задает число объединяемых горизонтальных ячеек. 7. Свойство height="число"
- задает высоту таблицы: либо в пикселях, либо в процентах %. 8. Свойство width="число"
- задает ширину таблицы: либо в пикселях, либо в процентах %. 9. Свойство rowspan="число"
- задает число объединяемых вертикальных ячеек. 10. Свойство valign="параметр"
- выравнивание содержимого ячейки по вертикали. Для тега В случае использования border (граница ячеек) и нулевых отступов между ячейками, они все равно склеиваются и получается удвоенный border . Чтобы это избежать нужно прописать в стилях таблице border-collapse: collapse
: Уважаемый читатель, теперь Вы узнали гораздо больше о html теге table. Теперь советую перейти к следующему уроку. Благодаря универсальности таблиц, большому числу параметров, управляющих их видом, таблицы надолго стали определенным стандартом для верстки веб-страниц. Таблица с невидимой границей представляет собой словно модульную сетку, в блоках которой удобно размещать элементы веб-страницы. Тем не менее, это не совсем правильный подход, ведь каждый объект HTML определен для своих собственных целей и если он используется не по назначению, причем повсеместно, это значит, что альтернатив нет. Так оно и было долгое время, пока на смену таблицам при верстке сайтов не пришли слои. Это не значит, что слои теперь используются сплошь и рядом, но тенденция уже наметилась четко — таблицы применяются для размещения табличных данных, а слои — для верстки и оформления. Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений. Для добавления таблицы на веб-страницу используется тег Пример 12.1. Создание таблицы
Порядок расположения ячеек и их вид показан на рис. 12.1. То таблицы играют очень важную роль в создании невидимого каркаса для веб-страницы. А это поможет равномерно и красиво расположить текст, меню, картинки и т.д. Итак, как в HTML сделать простую таблицу
? TABLE
–
этот тег нужен для открытия таблицы. Это, своего рода, контейнер, в котором содержатся другие элементы. Вот загнул так, что без пончика не разобраться. Ничего, разберетесь, когда увидите пример. Таблица состоит из ряда TR
–
создает новый ряд таблицы. Закрывающий тег
обязателен. TD
–
создает новую ячейку в ряду. Закрывающий тег
обязателен. Давайте рассмотрим пример, чтобы лучше понять все выше сказанное:
Вот результат: Давайте все объясню. Я думаю, разобрались? Если кто-то забыл, что такое атрибут border
, который я использую вместе с тегом Посмотрите парочку примеров созданных таблиц
и можно идти дальше:
Результат: Для того чтобы вставить картинку в таблицу, нужно владеть элементарными начальными знаниями о том, как вставляется изображение в HTML файл. Об этом я рассказываю в . Теперь, когда вы знаете основные нюансы об изображении в HTML, можно попробовать вставить картинку в таблицу. Это можно сделать следующим образом: в строку между тегами
Результат: Чтобы объединить ячейки в таблице, вам нужно использовать такие атрибуты:
Результат: Чтобы задать высоту и ширину таблицы, воспользуйтесь такими атрибутами: WIDTH
– ширина таблицы. Размер задается в пикселях или в процентах.
Результат: Чтобы выровнять внутри таблицы содержимое (текст, картинки), можно воспользоваться такими атрибутами: ALIGN
– горизонтальное выравнивание содержимого в таблице. VALIGN
– вертикальное выравнивание содержимого в таблице.
Результат: Можно также задать фон таблице для всех ее ячеек вместе взятых, а также для каждой ячейки по отдельности. Можно задать фон цветом, а можно и картинкой. Для фона существуют два атрибута: BGCOLOR
– цвет фона всей таблицы или к каждой ячейке по отдельности. Цвет задается кодом или словом. Внимание:
если вы ходите задать фон цветом или фоновым рисунком всей таблице, атрибуты нужно установить в теге Для лучшего понимания посмотрите пример:
Результат: Внимание:
если картинка по размеру меньше за ячейку, тогда она будет повторяться, пока не заполнит ячейку до конца. Если картинка больше за ячейку, тогда фон картинки будет обрезан по размерам ячейки. И напоследок расскажу еще о двух полезных атрибутах
. В случае, если вам вдруг захочется увеличить расстояние между всеми ячейками, помогут следующие атрибуты: CELLPADDING
–расстояние между рамкой каждой ячейки html таблицы и содержимым в ней материалом.
Результат: CELLSPACING
–расстояние между границами соседних ячеек.
Результат: Фух, рассказал!
указываем браузеру, что в web-страницу вставлена таблица:
. Элемент table является блочным элементом web-страницы. Следовательно таблица всегда выводится с новой строки с отступами по вертикали от соседних элементов, поэтому нет необходимости помещать ее в абзац.
внутрь . Каждый элемент
создает отдельную строку:
и
, которые помещаются внутрь элемента . Тег создает обычную
ячейку, а ячейку заголовка
, т.е. шапку соответствующего столбца:
и содержимое ячеек. HTML-код вставки таблицы на веб-страницу выглядит примерно так:
Столбец 1 Столбец 2 Столбец 3
Ячейка 1-1 Ячейка 1-2 Ячейка 1-3
Ячейка 2-1 Ячейка 2-2 Ячейка 2-3
:
и вставляются теги и
, и в нее вставляются строки и ячейки.
;
может находиться только внутри тега ;
и могут находиться только внутри тега , любое другое содержимое тега игнорируется браузером;
и ;
Заголовок таблицы
. Причем без разницы в каком месте html-кода таблицы поместить тег
:
Ячейка 1.1 Ячейка 1.2
Ячейка 2.1 Ячейка 2.2
Секции таблицы
.
может быть только одна.
, которые формируют строки, относящиеся к соответствующим секциям:
Столбец 1 Столбец 2 Столбец 3
Ячейка 1.1 Ячейка 1.2 Ячейка 1.3
Ячейка 2.1 Ячейка 2.2 Ячейка 2.3
Итог 1 Итог 2 Итог 3
Объединение ячеек таблицы
и . Атрибут colspan задает количество ячеек объединенных по горизонтали, а rowspan — по вертикали:
1.1 1.2-1.3
2.1 2.2 2.3
3.1-4.1 3.2 3.3
4.2 4.3
1.1
1.2-1.3
2.1
2.2
2.3
3.1-4.1
3.2
3.3
4.2
4.3
заменяет две ячейки, поэтому в следующей строке должно быть два тега , либо такая же конструкция! Если число ячеек во всех строках не будет совпадать, то появятся пустые лишние ячейки.
ячейка 1.1 ячейка 1.2
ячейка 2.1 ячейка 2.2
Атрибуты тега
. С атрибутом border, который задает толщину рамки в пикселях. По умолчанию он равен 0 и следовательно ячейки по умолчанию отображаются без рамки.
. Давайте их рассмотрим.
— обозначение таблицы,
— добавление строки и — вставка ячейки;
colspan и rowspan.
создает новую строку. Далее во вложенных
создаются столбцы. Можно создавать множество столбцов. При этом нужно следить за количеством столбцов в каждой строке. Например, если в первой строке было 5 столбцов, то и в следующих строках должно быть 5 столбцов. Иначе таблица поплывет. Есть возможность объединять ячейки.
Как сделать таблицу в html
Пример таблицы
Столбец 1
Столбец 2
. Мы используем специальный атрибут colspan
для объединения ячеек по горизонтали. Его численное значение указывает число объединяемых столбцов. Также существует аналог этого атрибута: тег
(заголовок таблицы), где нужно также прописать colspan. Результат будет таким же. Но зачастую используют обычный td.
.
Атрибуты и свойства тега
можно прописывать различные атрибуты.
или строкам
. Таким образом, в разных ячейках выравнивание будет разное.
...
...
...
Пример таблицы
Столбец 1
Столбец 2
.
Атрибуты и свойства
и
Примечание 1
доступны такие же параметры, что и для . Параметры для одного тега будут иерархично применены ко всем внутри него
Как сделать, чтобы границы ячеек в таблице не склеивались
...
Создание таблицы
. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов
обязателен.
и
. Таблица должна содержать хотя бы одну ячейку (пример 12.1). Допускается вместо тега
использовать тег
. Текст в ячейке, оформленной с помощью тега
, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги
и
нет.
Ячейка 1
Ячейка 2
Ячейка 3
Ячейка 4
Для лучшего понимания, о чем я пытаюсь вам рассказать, посмотрите на пример каркаса веб-страницы:
Для постройки таблицы необходимо использовать три тега:
Закрывающий тег ряд 1
ряд 1
ряд 2
ряд 2
ряд 3
ряд 3
ячейка 1
ячейка 2
ячейка 1
ячейка 2
ячейка 1
ячейка 2
ряд 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
будет установлено значение «0»
, тогда границы таблицы будут невидимые.
ряд 1 ячейка 1
ряд 2 ячейка 1
вставить изображение.
ряд 1 ячейка 1
ряд 1 ячейка 2
ряд 1 ячейка 1
ряд 1 ячейка 2
А как объединить ячейки в таблице?
COLSPAN
– определяет количество столбцов.
По умолчанию значение 1.
ROWSPAN
– определяет количество рядов.
По умолчанию значение 1.
объединяем ячейки
в верхнем ряду с помощью атрибута colspan
:
ряд 1 ячейка 1+2
ряд 2 ячейка 1 ряд 2 ячейка 2
Как установить размер таблицы?
HEIGHT
– высота таблицы. Размер задается в пикселях или в процентах.
ряд 1 ячейка1 ряд1 ячейка2
ряд 2 ячейка 1 ряд 2 ячейка 2
Выравнивание содержимого в таблице
К атрибуту ALIGN
присваивается значения: left
(по умолчанию)
, center
,
right
.
left
-
прижать содержимое к левой части;
center
–
установить по центру;
right
-
прижать содержимое к правой части
К атрибуту VALIGN
присваивается значения: top
, bottom
, middle
.
top
–
прижать содержимое к верху;
bottom
–
прижать содержимое к низу;
middle
–
установить содержимое посередине
ряд 1 ячейка1
ряд1 ячейка2
ряд 2 ячейка 1
ряд 2 ячейка 2
Как сделать фон таблицы?
BACKGROUND
–фон в таблице заполняется рисунком.
. А если только к определенной ячейке, тогда в тег
.
ряд 1 ячейка1
ряд1 ячейка2
ряд 2 ячейка 1
ряд 2 ячейка 2
ряд 1 ячейка1
ряд1 ячейка2
ряд 2 ячейка 1
ряд 2 ячейка 2
ряд 1 ячейка1
ряд1 ячейка2
ряд 2 ячейка 1
ряд 2 ячейка 2
ряд 1 ячейка1
ряд1 ячейка2
ряд 2 ячейка 1
ряд 2 ячейка 2
ряд 1 ячейка1
ряд1 ячейка2
ряд 2 ячейка 1
ряд 2 ячейка 2
Надеюсь, с задачей я справился и доступно объяснил все, что я знал про html таблицы
. А вам, рекомендую хорошо закрепить материал.
Попробуйте создать собственную таблицу, а лучше целый каркас для веб-страницы из таблицы html.
Всего вам хорошего!
Спасибо, что посетили мой блог
