Отправляет 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	31

Автор

aleksei_fomenko

Статистика

595 подписчиков
0 за неделю

← Все выпуски →

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

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

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

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

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

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

Тег COL

     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
Описание

Тег <COL> задает ширину и другие атрибуты одной или нескольких колонок таблицы. При наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки. Тег <COL> можно использовать совместно с тегом <COLGROUP>, который задает группу колонок, обладающих общими параметрами.
Синтаксис

<table>
<col ...>
<tr><td>...</td></tr>
</table>
Параметры

align
    Устанавливает выравнивание содержимого колонки по краю.
span
    Количество колонок, к которым следует применять параметры.
valign
    Задает вертикальное выравнивание содержимого колонки.
width
    Ширина колонок.

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

Не требуется.

Пример 1. Использование тега <COL>
Валидный код<!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>Тег COL</title>
</head>
<body>

<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>

</body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1

Рис. 1. Применение тега <COL> для создания колонок
Описание параметров тега COL
Параметр ALIGN
HTML:     3.2     4     XHTML:     1.0     1.1
Описание

Задает выравнивание содержимого колонок по горизонтали. Этот параметр действует на все ячейки в колонке, в том числе и на заголовки таблицы, которые определяются тегом <TH>. Чтобы управлять выравниванием содержимого разных элементов воспользуйтесь стилями или устанавливайте параметр align для отдельных ячеек таблицы.
Синтаксис

<col align="left | center | right">
Аргументы

left
    Выравнивание контента по левому краю.
center
    Выравнивание по центру.
right
    Выравнивание по правому краю.

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

left
Аналог 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>Тег COL, параметр align</title>
</head>
<body>

<table border="1">
<col align="left">
<col span="3" width="50" align="center">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>

</body>
</html>
Параметр SPAN
HTML:     3.2     4     XHTML:     1.0     1.1
Описание

Определяет число колонок, к которым будут применяться заданные параметры. Если этот атрибут отсутствует, то тег <COL> работает для одной колонки. Допускается применять параметр span к нескольким колонкам и таким образом формировать группы колонок с одинаковыми характеристиками.
Синтаксис

<col span="число">
Аргументы

Целое положительное значение.
Значение по умолчанию

1

Пример 3. Использование параметра span
Валидный код<!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>Тег COL, параметр span</title>
</head>
<body>

<table width="700" cellspacing="0" border="1">
<col width="150">
<col span="5" width="50" align="center">
<col span="4" width="75" align="center">
<tr>
<td> </td><td>1995</td><td>1996</td><td>1997</td>
<td>1998</td><td>1999</td><td>2000</td><td>2001</td>
<td>2002</td><td>2003</td>
</tr>
<tr>
<td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td>
<td>3</td><td>34</td><td>62</td><td>74</td><td>57</td>
</tr>
<tr>
<td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td>
<td>4</td><td>69</td><td>72</td><td>56</td><td>47</td>
</tr>
<tr>
<td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td>
<td>7</td><td>73</td><td>79</td><td>34</td><td>86</td>
</tr>
</table>

</body>
</html>
Параметр VALIGN
HTML:     3.2     4     XHTML:     1.0     1.1
Описание

Устанавливает вертикальное выравнивание содержимого колонки. По умолчанию контент ячеек в колонке располагается по центру вертикали.
Синтаксис

<col valign="baseline | bottom | middle | top">
Аргументы

baseline
    Выравнивание по базовой линии, при этом происходит привязка содержимого колонки к одной линии.
bottom
    Выравнивание по нижнему краю.
middle
    Выравнивание по середине.
top
    Выравнивание по верхнему краю строки.

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

middle

Пример 4. Выраванивание в колонках
Валидный код<!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>Тег COL, параметр valign</title>
</head>
<body>

<table width="700" border="1">
<col width="150">
<col valign="top">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>

</body>
</html>
Параметр WIDTH
HTML:     3.2     4     XHTML:     1.0     1.1
Описание

Задает ширину колонки. Если общая ширина содержимого превышает указанную ширину, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в колонке находятся изображения, параметр width будет проигнорирован, и новая ширина колонки будет вычислена на основе ее содержимого.
Синтаксис

<col width="значение">
Аргументы

Обычно применяется любое целое значение в пикселах или процентах от доступного пространства. Альтернативный вариант основан на использовании символа *, который обозначает всю доступную ширину. Допустимо использовать кратные значения, например 3*. Например, если для таблицы установлена ширина 600 пикселов, а для колонок — 1*, 2*, то в пикселах это будет соответственно 200 и 400. При использовании подобных единиц браузеру требуется загрузить таблицу целиком, чтобы вычислить необходимую ширину ячеек, что приводит к задержке вывода больших таблиц.
Значение по умолчанию

Ширина вычисляется на основе содержимого ячейки.
Аналог CSS

width

Пример 5. Ширина колонок
Валидный код<!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>Тег COL, параметр width</title>
</head>
<body>

<table cellpadding="10" border="1">
<col width="20%">
<col width="80%">
<tr>
<td> ... </td>
<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/

Параметры таблиц

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

Описание параметров таблицы и их значений приведено в табл. 1.

Табл. 1. Параметры тега <TABLE>
Свойство	Значение	Описание	Пример
align	left right center	Выравнивание таблицы.	<table align="center">
background	URL	Определяет изображение, которое будет использоваться в качестве фонового рисунка таблицы.	<table background="pic.gif">
bgcolor	#rrggbb	Цвет фона таблицы.	<table bgcolor="#ff9900">
border	n	Толщина рамки в пикселах.	<table border="2">
cellpadding	n	Расстояние между ячейкой и ее содержимым.	<table cellpadding="7">
cellspacing	n	Дистанция между ячейками.	<table cellspacing="3">
cols	n	Задает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению.	<table cols="3">
nowrap		Запрещает переносы строк в тексте.	<table nowrap>
frame	void above below lhs rhs hsides vsides box	Задание типа рамки таблицы	<table frame="hsides">
rules	all groups cols none rows	Определяет, где рисовать границы между ячейками.	<table rules="cols">
width	n n%	Минимальная ширина таблицы, можно задавать в пикселах или процентах.	<table width="90%">

Примечание

Таблица, если не указано особо, всегда выравнивается по левому краю.
По умолчанию таблица выводится без рамки.
Если ширина таблицы не указана, она подгоняется под содержание ячеек.
Возможна ситуация, когда между ячеек таблицы возникают ненужные пустые промежутки. Это связано с тем, что перенос строк в коде HTML автоматически создает и дополнительный пробел в таблице. Чтобы избавиться от этого поместите код внутри тега <TR> в одну строку.

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

HTML Самоучитель

HTML и XHTML подробное руководство

Использование HTML JavaScript и CSS руководство Web дизайнера

Полный справочник по HTML CSS и JavaScript

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

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

Таблица без рамки

Хотя линии между ячейками позволяют четко отделить одни данные от других, ту же самую функцию выполняет и пустое пространство вокруг текста. А чтобы таблица выделялась на веб-страницы, для нее устанавливают определенный цвет фона. Заголовок при этом допустимо задать другого цвета, как показано на рис. 1.

Для изменения цвета фона таблицы используем атрибут background, добавляя его к селектору TABLE. Для красоты внизу таблицы рисуем линию с помощью параметра border-bottom (пример 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 {
width: 300px; /* Ширина таблицы */
border-bottom: 2px solid maroon; /* Линия внизу таблицы */
background: #fffacd; /* Цвет фона таблицы */
}

TH {
background: maroon; /* Цвет фона заголовка */
color: white; /* Цвет текста */
text-align: left; /* Выравнивание по левому краю */
}

TD, TH {
padding: 3px; /* Поля вокруг текста */
}
</style>
</head>
<body>

<table cellspacing="0">
<tr>
<th> </th>
<th>2004</th>
<th>2005</th>
<th>2006</th>
</tr>
<tr>
<td>Рубины</td>
<td>43</td>
<td>51</td>
<td>79</td>
</tr>
<tr>
<td>Изумруды</td>
<td>28</td>
<td>34</td>
<td>48</td>
</tr>
<tr>
<td>Сапфиры</td>
<td>29</td>
<td>57</td>
<td>36</td>
</tr>
</table>

</body>
</html>

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

Первый метод заключается в использовании тега <COL>, он добавляется в контейнер <TABLE> и устанавливает, в частности, выравнивание для отдельных колонок (пример 2).

Пример 2. Выравнивание с помощью тега <COL>
Валидный 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 {
width: 300px; /* Ширина таблицы */
border-bottom: 2px solid maroon; /* Линия внизу таблицы */
background: #fffacd; /* Цвет фона таблицы */
}

TH {
background: maroon; /* Цвет фона заголовка */
color: white; /* Цвет текста */
}

TD, TH {
padding: 3px; /* Поля вокруг текста */
}
</style>
</head>
<body>

<table cellspacing="0">

<col align="left">


<col span="3" align="center">
<tr>
<th> </th>
<th>2004</th>
<th>2005</th>
<th>2006</th>
</tr>
<tr>
<td>Рубины</td>
<td>43</td>
<td>51</td>
<td>79</td>
</tr>
<tr>
<td>Изумруды</td>
<td>28</td>
<td>34</td>
<td>48</td>
</tr>
<tr>
<td>Сапфиры</td>
<td>29</td>
<td>57</td>
<td>36</td>
</tr>
</table>

</body>
</html>

Аргумент align тега <COL> указывает, по какой стороне выравнивать ячейки колонки, а span определяет число колонок, к которым будут применяться заданные параметры. Если этот атрибут отсутствует, то тег <COL> работает только для одной колонки.

Замечание

Выравнивание содержимого колонок с помощью тега <COL> работает в браузере Internet Explorer и не действует в браузере Firefox и некоторых других.

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

Создаем стилевой класс, например, с именем jewel и применяем его к ячейкам левой колонки (пример 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 {
width: 300px; /* Ширина таблицы */
border-bottom: 2px solid maroon; /* Линия внизу таблицы */
background: #fffacd; /* Цвет фона таблицы */
}

TH {
background: maroon; /* Цвет фона заголовка */
color: white; /* Цвет текста */
}

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

TD.jewel {
text-align: left; /* Выравнивание по левому краю */
background: #ccc; /* Цвет фона */
}
</style>
</head>
<body>

<table cellspacing="0">
<tr>
<th> </th>
<th>2004</th>
<th>2005</th>
<th>2006</th>
</tr>
<tr>
<td class="jewel">Рубины</td>
<td>43</td>
<td>51</td>
<td>79</td>
</tr>
<tr>
<td class="jewel">Изумруды</td>
<td>28</td>
<td>34</td>
<td>48</td>
</tr>
<tr>
<td class="jewel">Сапфиры</td>
<td>29</td>
<td>57</td>
<td>36</td>
</tr>
</table>

</body>
</html>

В данном примере изменяется цвет фона и способ выравнивания для всех ячеек, где установлен параметр class="jewel".

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

Полный справочник по HTML CSS и JavaScript

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

HTML 4 для чайников

HTML и CSS на 100

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

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

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

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

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

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

В избранное