Отправляет email-рассылки с помощью сервиса Sendsay

Тег table в Вопросах и Ответах

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Пошаговая раскрутка сайта" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Июнь 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
aleksei_fomenko

Статистика

595 подписчиков
0 за неделю
←   Все выпуски   →

Тег table в Вопросах и Ответах


Спонсор Рассылки: Клуб Желающих Создать и Развивать Свой Сайт.


Здравствуйте.

Меня зовут Алексей. Я руковожу Клубом Желающих Создать и Развивать Свой Сайт. Сегодня я приготовил для вас очередную подробрку материалов по HTML.

Работа с табличными тегами


Источник: http://www.htmlbook.ru/

Тег CAPTION

Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.5 6.0 7.0 6.0 7.0 8.0 7.0 8.0 9.0 1.0 1.7 1.0 2.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да
HTML: 3.2 4 XHTML: 1.0 1.1

Описание

Тег <CAPTION> предназначен для создания заголовка к таблице и может размещаться только внутри контейнера <TABLE>, причем сразу после открывающего тега. Такой заголовок представляет собой текст, по умолчанию отображаемый перед таблицей и описывающий ее содержание.

Синтаксис

<table>
 <caption>Текст</caption>
...
</table>

Параметры

align
Определяет выравнивание заголовка по горизонтали.
valign
Устанавливает расположение заголовка до или после таблицы.

Закрывающий тег

Обязателен.

Пример 1. Использование тега <CAPTION>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег CAPTION</title>
</head>
<body>

<table width="100%" border="1" cellspacing="0" cellpadding="4">
<caption>
Таблица 3.2. Демонстрация катаболических процессов организма
</caption>

<tr>
<th>&nbsp;</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>
<tr>
<td>Смог, раз</td>
<td>5</td>
<td>5</td>
<td>1</td>
</tr>
</table>

</body>
</html>

Описание параметров тега <CAPTION>

Параметр ALIGN

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

Параметр align определяет выравнивание заголовка относительно таблицы. Результат его действия зависит от используемого браузера и установленного значения.

Синтаксис

<caption align="left | center | right | top | bottom">...</caption>

Аргументы

left
В браузере Internet Explorer и Opera располагает заголовок сверху и выравнивает его по левому краю таблицы. В Firefox заголовок располагается слева от таблицы.
right
В браузере Internet Explorer и Opera располагает заголовок сверху таблицы и выравнивает его по правому краю таблицы. В браузере Netscape параметр игнорируется, а в Firefox заголовок располагается от таблицы справа.
center
Заголовок располагается сверху таблицы по ее центру.
top
Результат аналогичен действию параметра center, но в отличие от него входит в спецификацию HTML 4 и понимается всеми браузерами.
bottom
Заголовок размещается внизу таблицы по ее центру.

Значение по умолчанию

center — для браузера Internet Explorer; top — для других браузеров.

Аналог CSS

text-align

Пример 2. Выравнивание заголовка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег CAPTION, параметр align</title>
</head>
<body>

<table width="100%" border="1" cellspacing="1" cellpadding="4">
<caption align="bottom">
Пример таблицы
</caption>
<tr>
<th>#</th>
<th>Чебурашка</th>
<th>Крокодил Гена</th>
<th>Шапокляк</th>
</tr>
<tr>
<td>1</td>
<td>FXD</td>
<td>URN</td>
<td>LWK</td>
</tr>
</table>
</body>
</html>

Параметр VALIGN

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

Параметр valign предназначен для размещения заголовка до таблицы или после нее. Этот параметр работает только в браузере Internet Explorer, а для всех остальных применяется align. Тем не менее, параметр align корректно действует и для IE, поэтому сочетание параметров align и valign необходимо только для этого браузера, когда требуется одновременное выравнивание заголовка по вертикали и горизонтали.

Синтаксис

<caption valign="bottom | top">...</caption>

Аргументы

bottom
Заголовок размещается под таблицей.
top
Заголовок размещается перед таблицей.

Значение по умолчанию

top

Пример 3. Заголовок внизу таблицы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег CAPTION, параметр valign</title>
</head>
<body>
<table width="60%" border="1" cellspacing="1" cellpadding="4">
<caption align="right" valign="bottom">
Пример таблицы
</caption>
<tr><td>...</td></tr>
</table>
</body>
</html>


Языки HTML и CSS
250 секретов HTML и Web дизайн
Полный справочник по HTML CSS и JavaScript
HTML




Для нового сайта я рекомендую вам вот эту компанию платного хостинга

Задать свой вопрос: sitesozdatu(собака)yandex.ru





Самоучитель HTML и CSS Современные технологии
Полный справочник по HTML CSS и JavaScript
HTML Популярный самоучитель
Динамический HTML




Таблицы в действии


Источник: http://www.htmlbook.ru/

Создание таблиц

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

Для добавления таблицы на веб-страницу используется тег-контейнер <TABLE>. Таблица должна содержать хотя бы одну строку и колонку (пример 1).

Пример 1. Создание таблицы
Валидный HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблица</title>
</head>
<body>

<table>
<tr>
<td>Содержимое таблицы</td>
</tr>
</table>

</body>
</html>

Для добавления строк используется тег <TR>. Чтобы разделить строки на колонки применяются теги <TD> и <TH> (пример 2). Разница между этими тегами следующая. Тег <TH> предназначен для создания заголовков, содержимое такой ячейки обозначается жирным начертанием и выравнивается по центру (пример 2). В остальном, действуют эти теги одинаково.

Пример 2. Ячейки таблицы
Валидный HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблица</title>
</head>
<body>

<table border="1">
<tr>
 <th>Ячейка 1</th>
 <td>Ячейка 2</td>
</tr>
<tr>
 <th>Ячейка 3</th>
 <td>Ячейка 4</td>
</tr>
</table>

</body>
</html>

Ниже показано расположение ячеек таблицы.

Рис. 1

Рис. 1. Вид таблицы
Особенности таблиц

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

    * Одну таблицу допускается помещать внутрь ячейки другой таблицы. Это требуется для представления сложных данных или в том случае, когда одна таблица выступает в роли модульной сетки, а вторая, внутри нее, уже как обычная таблица.
    * Размеры таблицы изначально не установлены и вычисляются на основе содержимого ячеек. Например, общая ширина определяется автоматически исходя из суммарной ширины содержимого ячеек плюс ширина границ между ячейками, поля вокруг содержимого, устанавливаемые через параметр cellpadding и расстояние между ячейками, которые определяются значением cellspacing.
    * Если для таблицы задана ее ширина в процентах или пикселах, то содержимое таблицы подстраивается под указанные размеры. Так, браузер автоматически добавляет переносы строк в текст, чтобы он полностью поместился в ячейку, и при этом ширина таблицы осталась без изменений. Бывает, что ширину содержимого ячейки невозможно изменить, как это, например, происходит при добавлении рисунков в ячейку. В этом случае ширина таблицы увеличивается, несмотря на указанные размеры.
    * Рамка таблицы, в случае добавления параметра border к тегу <TABLE>, изначально отображается как трехмерная. Присоединение параметра bordercolor превращает рамку в однотонную, ликвидируя тем самым эффект трехмерности.
    * Пока таблица не загрузится полностью, ее содержимое не начнет отображаться. Дело в том, что браузер, прежде чем показать содержимое таблицы, должен вычислить необходимые размеры ячеек, их ширину и высоту. А для этого необходимо знать, что в этих ячейках находится. Поэтому браузер и ожидает, пока загрузится все, что находится в ячейках, и только потом отображает таблицу.



Задать свой вопрос: sitesozdatu(собака)yandex.ru





HTML Самоучитель
HTML и XHTML подробное руководство
Использование HTML JavaScript и CSS руководство Web дизайнера
Полный справочник по HTML CSS и JavaScript


Дизайн таблиц


Источник: http://www.htmlbook.ru/

Таблицы и стили

Таблицы являются широко используемым элементом для представления различных данных на презентациях, лекциях, в рекламных листовках и не только. Благодаря своей наглядности, универсальности и простоте таблицы также повсеместно применяют на сайтах, чтобы лучше донести до читателя нужный материал. Однако в большинстве случаев на веб-страницах используют весьма убогие средства по представлению табличных данных. Вместе с тем воспользовавшись мощью стилей, можно весьма расширить средства по оформлению таблиц, удачно вписать их в дизайн сайта и нагляднее представить табличные данные.

Далее речь пойдет об оформлении таблиц с помощью стилей. Но в начале обговорим некоторые моменты, которые помогут лучше понять, что же мы делаем.
Цвет фона ячеек

Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background, которое применяется к селектору TABLE. При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с TABLE задать цвет у селектора TD или TH, то он и будет установлен в качестве фона (пример 1).

Пример 1. Цвет фона
Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблицы</title>
<style type="text/css">
TABLE {
 background: maroon; /* Цвет фона таблицы */
 color: white; /* Цвет текста */
}

TD {
 background: navy; /* Цвет фона ячеек */
}
</style>
</head>
<body>

<table cellpadding="4" cellspacing="1">
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
<tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
</table>

</body>
</html>

В данном примере получим синий цвет фона у ячеек (тег <TD>) и красный у заголовка (тег <TH>). Это связано с тем, что стиль для селектора TH не определен, и он заимствуется у родителя, в данном случае, у селектора TABLE. А цвет для селектора TD указан явно, вот ячейки и «заливаются» синим цветом.

То же самое происходит и с цветом текста. Для всех элементов таблицы в примере он установлен белым.


Полем называется расстояние между краем содержимого ячейки и ее границей. Обычно для этой цели применяется параметр cellpadding тега <TABLE>. Он определяет значение поля в пикселах со всех сторон ячейки. Допускается использовать стилевой параметр padding, добавляя его к селектору TD, как показано в примере 2.

Пример 2. Поля в таблицах
Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблицы</title>
<style type="text/css">
TABLE {
 background: white; /* Цвет фона таблицы */
 color: white; /* Цвет текста */
}

TD, TH {
 background: maroon; /* Цвет фона ячеек */
 padding: 5px; /* Поля вокруг текста */
}
</style>
</head>
<body>

<table cellspacing="1">
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
<tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
</table>

</body>
</html>

В данном примере с помощью группирования селектором поля установлены одновременно для селектора TD и TH.


Замечание

Если применяется стилевой параметр padding для ячеек таблицы, то действие атрибута cellpadding тега <TABLE> игнорируется.
Границы и рамки

Линии между ячейками можно установить несколькими методами, при этом рассмотрим два из них, которые непосредственно связаны со стилями.
Использование параметра cellspacing

Известно, что атрибут cellspacing тега <TABLE> задает расстояние между ячейками таблицы. Если используется разный цвет фона таблицы и ячеек, то между ячейками возникнет сетка линий, цвет которых совпадает с цветом таблицы, а толщина равна значению параметра cellspacing в пикселах. В вышеприведенном примере 2 этот эффект показан, поэтому повторять его не будем.

Заметим, что это не совсем удобный способ создания границ, поскольку он имеет ограниченную область применения. Так можно получить только одноцветную сетку, а не вертикальные или горизонтальные линии в нужных местах.
Применение атрибута border

Стилевой атрибут border одновременно задает цвет границы, ее стиль и толщину вокруг элемента. Когда требуется создать отдельные линии на разных сторонах, лучше использовать производные этого параметра — border-left, border-right, border-top и border-bottom, они соответственно определяют границу слева, справа, сверху и снизу.

Применяя border к селектору TABLE, мы добавляем рамку вокруг таблицы в целом, а к селектору TD или TH — рамку вокруг ячеек (пример 3).

Пример 3. Добавление двойной рамки
Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблицы</title>
<style type="text/css">
TABLE {
 background: #dc0; /* Цвет фона таблицы */
 border: 5px double #000; /* Рамка вокруг таблицы */
}

TD, TH {
 padding: 5px; /* Поля вокруг текста */
 border: 1px solid #fff; /* Рамка вокруг ячеек */
}
</style>
</head>
<body>

<table>
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
<tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
</table>

</body>
</html>

В данном примере используется двойная рамка черного цвета вокруг самой таблицы и сплошная рамка белого цвета вокруг каждой ячейки.

Обратите внимание, что в месте состыковки ячеек образуются двойные линии. Они получаются опять же за счет параметра cellspacing тега <TABLE>. Хотя в коде примера этот атрибут нигде не фигурирует, браузер использует его по умолчанию. Если задать <table cellspacing=”0”>, то получим не двойные, а одинарные линии, но удвоенной толщины. Для изменения указанной особенности применяется стилевой атрибут border-collapse со значением collapse, который добавляется к селектору TABLE (пример 4).

Пример 4. Создание одинарной рамки
Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблицы</title>
<style type="text/css">
TABLE {
 border-collapse: collapse; /* Убираем двойные границы между ячейками */
 background: #dc0; /* Цвет фона таблицы */
 border: 4px solid #000; /* Рамка вокруг таблицы */
}

TD, TH {
 padding: 5px; /* Поля вокруг текста */
 border: 2px solid green; /* Рамка вокруг ячеек */
}
</style>
</head>
<body>

<table>
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
<tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
</table>

</body>
</html>

В данном примере создается сплошная линия зеленого цвета между ячейками и черная вокруг таблицы. Все границы внутри таблицы имеют одинаковую толщину.


Замечание

При добавлении border-collapse: collapse значение параметра cellspacing тега <TABLE> игнорируется.
Выравнивание содержимого ячеек

По умолчанию текст в ячейке таблицы выравнивается по левому краю. Исключением из этого правила служит тег <TH>, он определяет заголовок, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align (пример 5).

Пример 5. Выравнивание содержимого ячеек по горизонтали
Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблицы</title>
<style type="text/css">
TABLE {
 border-collapse: collapse; /* Убираем двойные линии между ячейками */
 width: 300px; /* Ширина таблицы */
}

TH {
 background: #fc0; /* Цвет фона ячейки */
 text-align: left; /* Выравнивание по левому краю */
}

TD {
 background: #fff; /* Цвет фона ячеек */
 text-align: center; /* Выравнивание по центру */
}

TH, TD {
 border: 1px solid black; /* Параметры рамки */
 padding: 4px; /* Поля вокруг текста */
}
</style>
</head>
<body>

<table>
<tr><th>Заголовок 1</th><td>Ячейка 1</td><td>Ячейка 2</td></tr>
<tr><th>Заголовок 2</th><td>Ячейка 3</td><td>Ячейка 4</td></tr>
</table>

</body>
</html>

В данном примере содержимое тега <TH> выравнивается по левому краю, а содержимое тега <TD> — по центру. Результат примера показан ниже.

Выравнивание по вертикали в ячейке всегда происходит по ее центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью атрибута vertical-align, как показано в примере 6.

Пример 6. Выравнивание содержимого ячеек по вертикали
Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблицы</title>
<style type="text/css">
TABLE {
border-collapse: collapse; /* Убираем двойные линии между ячейками */
width: 300px; /* Ширина таблицы */
}

TH, TD {
border: 1px solid black; /* Параметры рамки */
text-align: center; /* Выравнивание по центру */
padding: 4px; /* Поля вокруг текста */
}

TH {
background: #fc0; /* Цвет фона ячейки */
height: 40px; /* Высота ячеек */
vertical-align: bottom; /* Выравнивание по нижнему краю */
padding: 0; /* Убираем поля вокруг текста */
}
</style>
</head>
<body>

<table>
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
<tr><td>Ячейка 1</td><td>Ячейка 2</td></tr>
</table>

</body>
</html>

В данном примере устанавливается высота заголовка <TH> как 40 пикселов и выравнивание текста происходит по нижнему краю.



Задать свой вопрос: sitesozdatu(собака)yandex.ru





Полный справочник по HTML CSS и JavaScript
100 Самоучитель по созданию WEBстраниц и WEBсайтов HTML и JavaScript
HTML 4 для чайников
HTML и CSS на 100


Полезные АудиоМатериалы


Поиск платного хостинга

Почему Платный хостинг php

Интернет магазин шаг 1

Архив Аудиоматериалов

Спонсор Рассылки: Клуб Желающих Создать и Развивать Свой Сайт.


В избранное