Отправляет 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>&nbsp;</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>. Общий синтаксис следующий.

<table параметр1="..." параметр2="...">

Описание параметров таблицы и их значений приведено в табл. 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>&nbsp;</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>&nbsp;</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>&nbsp;</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

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

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


В избранное