 |
Закрывающий тег Не обязателен.
|
|
|
|
Описание
Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.
Таблицы с невидимой границей долгое время использовались для верстки веб-страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашел воплощение на многих сайтах, пока ему на смену не пришел более современный способ верстки с помощью слоев.
Синтаксис
<table> <tr> <td>...</td> </tr></table>Атрибуты
| align | Задает выравнивание таблицы по краю окна браузера. <table align="left | center | right">...</table> Значение по умолчанию left |
| background | Определяет изображение, которое будет использоваться в качестве фонового рисунка таблицы. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше ширины или высоты таблицы, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и содержимым таблицы. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей. <table background="URL">...</table> <table background="images/snow.gif" width="600"> |
| bgcolor | Устанавливает цвет фона таблицы. Можно использовать этот атрибут совместно с background, подобрав цвет фона близкий к фоновому рисунку <table bgcolor="цвет">...</table><table bgcolor="#ffcc00" width="600"> |
| border | Толщина рамки в пикселах. Устанавливает толщину рамки в пикселах. По умолчанию рамка изображается трехмерной, но если используется атрибут bordercolor тега <table>, то вид рамки меняется в зависимости от браузера. Когда в теге <table> используется атрибут border без значений (<table border>), то браузер отображает рамку толщиной один пиксел. Синтаксис <table border="толщина">...</table> Любое положительное целое число. Значение по умолчанию 0 <table cellspacing="2" border="1" cellpadding="5" width="600"> |
| bordercolor | Цвет рамки. |
| cellpadding | Отступ от рамки до содержимого ячейки. |
| cellspacing | Расстояние между ячейками. |
| cols | Число колонок в таблице. |
| frame | Сообщает браузеру, как отображать границы вокруг таблицы. Сообщает браузеру, как отображать границы вокруг таблицы. Толщина границы указывается с помощью атрибута border. Синтаксис <table frame="значение">...</table> void Не отрисовывать границы. border Граница вокруг таблицы. above Граница по верхнему краю таблицы. below Граница снизу таблицы. hsides Добавить только горизонтальные границы (сверху и снизу таблицы). vsides Рисовать только вертикальные границы (слева и справа от таблицы). rhs Граница только на правой стороне таблицы. lhs Граница только на левой стороне таблицы. Значение по умолчанию border |
| height | Высота таблицы. (уст) |
| rules | Сообщает браузеру, где отображать границы между ячейками. Сообщает браузеру, где отображать границы между ячейками. Толщина границы и ее цвет указывается с помощью атрибутов border и bordercolor. По умолчанию рамка рисуется вокруг каждой ячейки, образуя тем самым сетку. <table rules="значение">...</table> all Линия рисуется вокруг каждой ячейки таблицы. groups Линия отображается между группами, которые образуются тегами <thead>, <tfoot>, <tbody>, <colgroup> или <col>. cols Линия отображается между колонками. none Все границы скрываются. rows Граница рисуется между строками таблицы, созданых через тег <tr>. Значение по умолчанию none (если border="0"); all (если значение атрибута border отлично от нуля). |
| summary | Краткое описание таблицы. содержимое summary никак не отображается и в браузере не выводится, однако может использоваться поисковыми системами или речевыми браузерами. |
| width | Ширина таблицы. Задает ширину таблицы. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в таблице находятся изображения, атрибут width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого. <table width="значение">...</table> <table cellpadding="10" border="1" width="80%"> Любое целое значение в пикселах или процентах от доступного пространства. Значение по умолчанию Ширина вычисляется на основе содержимого таблицы. |
|
|
|
|
|
|
Теги, используемые в <table>
Тег <caption>
Тег <caption> предназначен для создания заголовка к таблице и может размещаться только внутри контейнера <table>, причем сразу после открывающего тега. Такой заголовок представляет собой текст, по умолчанию отображаемый перед таблицей и описывающий ее содержание.
|
|
|
<table>
<caption>Текст</caption>
<tr>
<td>...</td>
</tr>
</table>
Атрибуты
align Определяет выравнивание заголовка по горизонтали.
valign Устанавливает расположение заголовка до или после таблицы.
Закрывающий тег Обязателен.
<table width="100%" border="1" cellspacing="0" cellpadding="4"> <caption>Таблица 3.2. Демонстрация катаболических процессов организма</caption> <tr> <th> </th><th>Чебурашка</th> <th>Крокодил Гена</th><th>Шапокляк</th> </tr> <tr> <td>Съел, кг</td><td>5</td> <td>2</td><td>1</td> </tr> <tr> <td>Выпил, л</td><td>6</td> <td>8</td><td>2</td> </tr> </table>
Тег <col>
Тег <col> задает ширину и другие характеристики одной или нескольких колонок таблицы. При наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки. Тег <col> можно использовать совместно с тегом <colgroup>, который задает группу колонок, обладающих общими характеристиками.
Синтаксис
HTML
<table>
<col атрибуты>
<tr>
<td>...</td>
</tr>
</table>
Атрибуты
align Устанавливает выравнивание содержимого колонки по краю.
char Выравнивает содержимое колонки по заданному символу.
charoff Сдвигает содержимое ячейки относительно заданного символа.
span Количество колонок, к которым следует применять параметры.
valign Задает вертикальное выравнивание содержимого колонки.
<col valign="baseline | bottom | middle | top">
width Ширина колонок.
Верстка в две колонки
<table width="400" border="0" cellpadding="5" cellspacing="0"> <col width="150" valign="top"> <col width="250" valign="top"> <tr> <td style="background: #B0B28E">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </td> <td style="background: #CCCCCC">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </td> </tr> </table>
|
|
|
Можно объединять в группы – <colgroup>
<table width="450" cellpadding="2" cellspacing="0" border="1" rules="groups"> <colgroup width="150"> <colgroup span="9" align="center" width="50"> <col span="5"> <col span="4"> </colgroup> <tr>
Элемент <tbody>
Элемент <tbody> предназначен для хранения одной или нескольких строк таблицы. Это позволяет создавать структурные блоки, к которым можно применять единое оформление через стили, а также управлять их видом через скрипты.
Атрибуты
align Определяет выравнивание текста в строке.
char Выравнивание содержимого ячеек относительно заданного символа.
charoff Смещение содержимого ячеек относительно указанного символа.
bgcolor Цвет фона ячеек, которые расположены внутри контейнера <tbody>.
valign Выравнивание содержимого ячеек по вертикали.
<table width="600" border="1"> <tbody align="right"> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> </tr> </tbody> </table>
Тег <tr>
Описание
Тег <tr> служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега <th> или <td>.
Синтаксис
<table> <tr> <td>...</td> </tr></table>Атрибуты
align Определяет выравнивание содержимого ячеек по горизонтали.
bgcolor Цвет фона ячеек.
bordercolor Цвет рамки.
char Выравнивание содержимого ячеек относительно заданного символа.
charoff Смещение содержимого ячеек относительно указанного символа.
valign Выравнивание содержимого ячеек по вертикали.
Закрывающий тег Не обязателен.
<table width="100%" border="0" cellpadding="4"> <tr align="right" valign="top"> <td><img src="images/book.png" width="199" height="133" alt="Книга"></td> <td>Lorem ipsum dolor sit amet...</td> </tr> </table>Предназначен для создания одной ячейки таблицы. Тег <td> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.
Синтаксис
<table> <tr> <td>...</td> </tr></table>Атрибуты
abbr Краткое описание содержимого ячейки.
align Определяет выравнивание содержимого ячейки по горизонтали.
axis Группирует ячейки связанные между собой похожей информацией.
background Задает фоновый рисунок в ячейке.
bgcolor Цвет фона ячейки.
bordercolor Цвет рамки.
char Выравнивает содержимое ячейки по заданному символу.
charoff Смещает содержимое ячейки относительно заданного символа.
colspan Объединяет горизонтальные ячейки.
headers Позволяет связать ячейки с заголовком.
height Высота ячейки.
nowrap Запрещает перенос строк.
rowspan Объединяет вертикальные ячейки.
|
|
|
scope Позволяет связать ячейки простой таблицы с заголовками в речевых браузерах.
valign Выравнивание содержимого ячейки по вертикали.
width Ширина ячейки.
|
|
|
