1) Атрибут "border", задает ширину рамки всей таблицы в пикселях, записывается так:
2) Атрибуты "width" и "height" - этот атрибут задаёт рекомендуемую ширину и высоту вашей таблицы, записывается так:
4) Атрибут "align"
- выравнивание таблицы, align=left
- таблица будет выравниваться по левому краю, align=right
- по правому, записывается так:
).
3) Атрибут тега
"colspan". Значение этого атрибута означает количество столбцов, которое занимает данная ячейка. Другими словами этот атрибут позволяет объединить нескольких смежных ячеек по вертикали в одну.
4) Атрибут тега | "rowspan". Значение этого атрибута означает количество строк, которое занимает данная ячейка. Соответственно этот атрибут позволяет объединить несколько ячеек в одну по горизонтали.
5) Атрибут тега | "align". Этот атрибут позволяет выравнивать элементы внутри ячейки по горизонтали. Имеет три значения: "left" (по левому краю ячейки), "center" (по центру), "right" (по правому краю ячейки). Если ничего не указано, выравнивание будет по левому краю.
6) Атрибут тега | "valign". Этот атрибут позволяет выравнивать элементы внутри ячейки по вертикали. Также как и "align" имеет всего три значения: "top" (по верху), "middle" (по середине), "bottom" (по низу). По умолчанию имеет значение "middle" по середине.
Давайте применим то, что мы сейчас узнали.
На рисунке 2 изображена наша сложная таблица.
Сложная таблица рис.2
Вот в принципе и всё, то что необходимо знать про HTML таблицы и успешно ими пользоваться.
Cоздание html таблицы в редакторе Joomla.
Для создания таблицы в Joomla можно использовать редактор TinyMce который находится в Joomla по умолчанию.
Теперь используя визуальный редактора Jооmla - Вы можете создавать простые, или сложные варианты таблиц, но будьте внимательны и не забывайте про ширину области для контента на Вашем сайте, чтобы при создании таблицы её ширина не привышала это значение.
Скачать файлы:
Видеокурс по HTML от Евгения Попова
Бесплатный видеокурс содержит 33 урока по HTML.
Видеокурс, раскрывает базовые знания по HTML и будет полезен не только для начинающих сайтостроителей, которые еще не знакомы с HTML, но и для более опытных вебмастеров.
Благодаря универсальности таблиц, большому числу параметров, управляющих их видом, таблицы надолго стали определенным стандартом для верстки веб-страниц. Таблица с невидимой границей представляет собой словно модульную сетку, в блоках которой удобно размещать элементы веб-страницы. Тем не менее, это не совсем правильный подход, ведь каждый объект 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 коде
Ниже представлены 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.
|
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам:
|
| |
| |
