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



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

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

  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.
axis Данный атрибут используется для создания описания ячейки

Атрибут 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), то данное выравнивание будет заменено выравниванием по левому краю.

Горизонтальное выравнивание в столбце

Горизонтальное выравнивание внутри столбца задаётся свойством: text-align.

Если в качестве значения свойства text-align уставлено содержимое находящееся боле чем в одной ячейки, то содержимое данных ячеек будет выровнено вдоль вертикальной оси. Пример:

Следующий CSS

  1. TD { text-align: "." }
  2. TD:before { content: "$" }
  3.
  4.

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

  1. <TABLE>
  2. <COL width="40">
  3. <TR> <TH>Long distance calls
  4. <TR> <TD> 1.30
  5. <TR> <TD> 2.50
  6. <TR> <TD> 10.80
  7. <TR> <TD> 111.01
  8. <TR> <TD> 85.
  9. <TR> <TD> 90
10. <TR> <TD> .05
11. <TR> <TD> .06
12. </TABLE>
13.

Свойство text-align может принимать значение collapse для строк, групп строк, столбцов, групп столбцов. При этом в результате строки (группы строк) или столбцы (группы столбцов) будут полностью удалены, а последующее содержимое поднимется вверх, заполнив образовавшееся пространство.

Атрибут axis

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<table border="1" width="100%">
  3. <tr>
  4. <th axis="name">Name</td>
  5. <th axis="contact">Email</td>
  6. <th axis="contact">Phone</td>
  7. <th axis="contact">Address</td>
  8. </tr>
  9. <tr>
10. <td axis="name">John Doe</td>
11. <td axis="contact">someone@example.com</td>
12. <td axis="contact">+45342323</td>
13. <td axis="contact">Rosevn 56,4300 Sandnes,Norway</td>
14. </tr>
15.</table>
16.


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

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