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



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

В CSS2 допускаются создавать таблицы с озвучиванием.

Простой пример таблицы, созданной в соответствие со стандартом HTML 4.0.

  1.<TABLE>
  2.<CAPTION>Простой пример простой таблицы</CAPTION>
  3.<TR id="row1">
  4. <TH>Заголовок 1<TD>Первая ячейка<TD>Вторая ячейка
  5.<TR id="row2">
  6. <TH>Заголовок 2<TD>Третья ячейка<TD>Четвертая ячейка
  7.<TR id="row3">
  8. <TH>Заголовок 2<TD>пятая ячейка<TD>Шестая ячейка
  9.</TABLE>
10.
В приведенном выше примере таблица состоит из трёх строк (TR), сопровождаемых заголовками (TH) и шести ячеек (TD).

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Таблица с заголовком</TITLE>
  5.<STYLE type="text/css">
  6.TABLE, TD,TR,TH {
  7. border:2px solid grey;
  8.}
  9.</STYLE>
10.</HEAD>
11.<BODY>
12.<TABLE>
13.<CAPTION>Простой пример простой таблицы</CAPTION>
14.<TR id="row1">
15. <TH>Заголовок 1<TD>Первая ячейка<TD>Вторая ячейка
16.<TR id="row2">
17. <TH>Заголовок 2<TD>Третья ячейка<TD>Четвертая ячейка
18.<TR id="row3">
19. <TH>Заголовок 2<TD>пятая ячейка<TD>Шестая ячейка
20.</TABLE>
21.
22.
23.</BODY>
24.</HTML>
25.
Таблица с заголовком
Таблица с заголовком
Если добавить к данной таблице следующее свойство:
  1.TH {text-align: center; font-weight: bold}
  2.
то все заголовки таблицы будут выровнены по центру с выделением текста, создаваемым с помощью свойства font-weight: bold.

Добавим ещё несколько css правил:

  1.TH { vertical-align: baseline }
  2.TD { vertical-align: middle }
в этом случае каждый заголовок будет выровнен по базовой вертикальной линии, а содержимое ячеек будет выровнено по вертикальной середине ячеек.

Дополнительный пример таблицы, в которой верхняя рамка первой строки будет выделена синей линией размером 3px, верхние рамки остальных строк так же будут выделены, но другим цветом и другими параметрами:

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Свойство border-collapse</TITLE>
  5.<STYLE type="text/css">
  6.TABLE { border-collapse: collapse }
  7.TR#row1 { border-top: 3px solid blue }
  8.TR#row2 { border-top: 1px solid black }
  9.TR#row3 { border-top: 1px solid black }
10.
11.</STYLE>
12.</HEAD>
13.<BODY>
14.<TABLE>
15.<CAPTION>Таблицы и border-collapse</CAPTION>
16.<TR id="row1">
17. <TH>Заголовок 1<TD>Первая ячейка<TD>Вторая ячейка
18.<TR id="row2">
19. <TH>Заголовок 2<TD>Третья ячейка<TD>Четвертая ячейка
20.<TR id="row3">
21. <TH>Заголовок 2<TD>пятая ячейка<TD>Шестая ячейка
22.</TABLE>
23.
24.
25.</BODY>
26.</HTML>
27.
Пример свойства border-collapse
Пример свойства border-collapse

Данное свойство заставляет отображать заголовок таблицы сверху таблицы:

  1.CAPTION { caption-side: top }
  2.

Следующее свойство предназначено для использования, если стиль создан для озвучивания таблицы и браузер поддерживает функции озвучивания текста таблиц:

  1.TH {speak-header: once}
  2.

В вышеуказанном примере текст должен звучать как: «Заголовок 1 Первая ячейка Вторая ячейка».

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

  1.TH {speak-header: always}
  2.


Александр Ермаков. Хостинг - www.pwstudio.org