Slyweb
На разработку сайта! Скидки 50%!
Поиск CSS свойств и HTML элементов:
поиск



Все CSS свойства и HTML элементы справочника
<TH>...</TH>

Пример таблицы, содержащей три строки с четырьмя столбцами, каждый из которых сопровождается заголовком:

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3.<HEAD>
  4. <TITLE>Заголовок столбца таблицы - TH</TITLE>
  5.</HEAD>
  6.<BODY>
  7.<TABLE border="border" >
  8.<COLGROUP style="background:#cadceb;border-top:5px solid grey;">
  9.<col><col><col>
10.<TR><TH>Заголовок 1 <TH>Заголовок 2<TH>Заголовок 3<TH>Заголовок 4
11.<TR><TD>Lettuce<TD><TD>Lettuce<TD>
12.<TR><TD>Silver carrots <TD>.50<TD>Lettuce<TD>
13.<TR><TD>Golden turnips <TD>0.30<TD>Lettuce<TD>
14.</TABLE>
15.</BODY>
16.</HTML>
17.
Заголовок столбца таблицы
Заголовок столбца таблицы

Значение некоторых атрибутов

rowspan Атрибут определяет количество строк, на которых располагается ячейка. Его значение по умолчанию 1. Значение равное 0 означает, что ячейка будет охватывать все строки, начиная от текущей строки и заканчивая последней строки таблицы.
colspan Атрибут определяет количество столбцов, на которых располагается ячейка. Его значение по умолчанию 1. Значение равное 0 означает, что ячейка будет охватывать все столбцы, начиная от текущего столбца и заканчивая последним столбцом таблицы.
nowrap Данный атрибут не рекомендован к применению. Данный атрибут запрещает перенос строк в ячейке, вместо него рекомендовано применять CSS свойство word-spacing.

Атрибут colspan определяет количество столбцов, на которых располагается ячейка.

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Сolspan</TITLE>
  5.
  6. </HEAD>
  7. <BODY>
  8.<TABLE border="border">
  9.<CAPTION>Cups of coffee consumed by each senator</CAPTION>
10.<TR> <TH>Name <TH>Cups <TH>Type of Coffee <TH>Sugar?
11.<TR> <TD>T. Sexton <TD>10 <TD>Espresso <TD>No
12.<TR> <TD>J. Dinnen <TD>5 <TD>Decaf <TD>Yes
13.<TR> <TD>A. Soria <TD colspan="3"><em>Not available</em>
14.</TABLE>
15.
16. </BODY>
17.</HTML>
18.
Пример свойства colspan
Пример свойства colspan

Атрибут rowspan определяет количество столбцов, на которых располагается ячейка.

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>rowspan</TITLE>
  5.
  6. </HEAD>
  7. <BODY>
  8.<TABLE border="border" width="200px">
  9.<TR><TD>1 <TD rowspan="2">2 <TD>3
10.<TR><TD>4 <TD>6
11.<TR><TD>7 <TD>8 <TD>9
12.</TABLE>
13. </BODY>
14.</HTML>
15.
Пример свойства rowspan
Пример свойства rowspan

Атрибут align имеет следующие значения

left выравнивание внутри ячейки по левому краю
right выравнивание внутри ячейки по правому краю
justify выравнивание внутри ячейки по ширине ячейки
char выравнивание внутри ячейки по определенному символу

Атрибут valign имеет следующие значения

top выравнивание внутри ячейки по верхнему краю
bottom выравнивание внутри ячейки по нижнему краю
middle выравнивание внутри ячейки по центру вертикальной оси
baseline выравнивание внутри ячейки по центру вертикальной оси

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3.<HEAD>
  4. <TITLE>Вертикальное и горизонтальное выравнивание в ячейках таблицы</TITLE>
  5.</HEAD>
  6.<BODY>
  7.<TABLE border="border" width="300px">
  8.<COLGROUP style="background:#cadceb;border-top:5px solid grey;">
  9.<col><col><col>
10.<TR><TH>Вертикальное и горизонтально выравнивание в ячейках таблицы
11.<TR><TD align="center">Выравнивание по центру
12.<TR><TD align="left">Выравнивание по левому краю
13.<TR><TD align="right">Выравнивание по правому краю
14.<TR><TD align="justify">Выравнивание по ширине
15.<TR><TD align="char" char=".">Выравнивание по символу "."
16.<TR><TD height="70px" valign="top">Выравнивание по верхнему краю
17.<TR><TD height="70px" valign="bottom">Выравнивание по нижнему краю
18.<TR><TD height="70px" valign="baseline">Выравнивание по базовой линии
19.<TR><TD height="70px" valign="middle">Выравнивание по середине
20.</TABLE>
21.</BODY>
22.</HTML>
23.
 Вертикальное и горизонтальное выравнивание в ячейках таблицы
Вертикальное и горизонтальное выравнивание в ячейках таблицы

Правила выравнивания и наследование

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

  1. Выравнивание, установленное для элемента, находящегося внутри ячейки (например, элемент p с атрибутом align).
  2. Выравнивание, установленное с помощью элементов TH и TD.
  3. Выравнивание установленное элементами группировки столбцов – COL и COLGROUP.
  4. Выравнивание установленное элементами строк и элементами группировки строк– (TR, THEAD, TFOOT, and TBODY).
  5. Выравнивание установленное таблице (TABLE).
  6. Исходное выравнивание, установленное для ячейки таблицы.

Если браузер не поддерживает выравнивание по ширине (justify), то данное выравнивание будет заменено выравниванием по левому краю.


Доступ и установка с jQuery

  • Получить коллекцию элементов TH: val = $("TH");
  • Получить класс элементаTH: val = $("TH").attr("class");
  • Установить несколько CSS свойств HTML элементу TH: $("TH").css({"...":"..."});
  • Установить единичное CSS свойство HTML элементу TH: $("TH").css("...","...");
  • Как использовать jQuery для HTML, - читайте статью "jQuery и HTML для начинающих".
Александр Ермаков. Хостинг - www.pwstudio.org