Опубликован: 17.06.2010 | Уровень: для всех | Доступ: платный | ВУЗ: Саратовский государственный университет им. Н.Г. Чернышевского
Лекция 9:

Таблицы

< Лекция 8 || Лекция 9: 1234 || Лекция 10 >

Перенос слов в ячейках: атрибут nowrap

Добавление атрибута nowrap к элементу TD заставляет браузер отображать текст внутри ячейки без переносов. Неправильное использование этого атрибута может привести к тому, что таблица будет слишком широкой и не поместится целиком на веб-странице. Как следствие, появится горизонтальная полоса прокрутки, и пользоваться подобной таблицей будет неудобно. В Спецификации HTML 4.01 данный атрибут помечен как не рекомендуемый, и его применение осуждается. Для достижения аналогичной функциональности рекомендуется использовать свойство CSS white-space.

Ширина и высота ячейки: атрибуты width и height

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

В заключение этого раздела следует отметить, что официальная спецификация HTML не рекомендует все атрибуты, касающиеся оформления таблиц и ячеек. Устанавливать такие свойства таблиц и ячеек, как выравнивание самой таблицы относительно окна браузера, текста в ячейках, цвет и стиль рамки вокруг ячеек таблицы, фона и многое другое рекомендуется только с использованием свойств CSS. Подробно эти вопросы будут освещены в "Оформление таблиц с помощью CSS" .

Дополнительная структуризация таблицы

Сложные таблицы со множеством столбцов и строк возможно дополнительно структурировать, определив верхний колонтитул, тело и нижний колонтитул таблицы. В сложных таблицах использование этих элементов позволит структурировать содержимое таблицы не только для разработчика, но и для браузеров и других устройств. Для добавления данной структуры к таблице используются элементы THEAD, TBODY и TFOOT соответственно.

Элемент THEAD предназначен для хранения одной или нескольких строк, представленных вверху таблицы. Допустимо использовать не более одного элемента THEAD в пределах одной таблицы, и он должен идти в исходном коде сразу после элемента TABLE.

Элемент TBODY позволяет создавать структурные блоки внутри таблицы, к которым можно применять единое оформление через стили. Допускается применять несколько элементов TBODY внутри контейнера TABLE. Элемент TBODY не должен перекрываться с другими видами группировок строк (т.е. с TFOOT и THEAD ).

Элемент TFOOT предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы, и служит для создания нижнего колонтитула таблицы. Хотя этот элемент в исходном коде должен быть определен до элемента TBODY, браузеры отображают его в самом низу таблицы. В пределах таблицы разрешается использовать только один элемент TFOOT.

Пример использования элементов THEAD, TBODY и TFOOT, представлен в следующем ниже листинге. Результат выполнения данного кода иллюстрирует рисунок 9.4.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Таблицы в HTML</TITLE>
</HEAD>
<BODY>
<TABLE border="1" width="75%" cellspacing="2" 
            summary="Статистика поисковых систем Рунета">
   <CAPTION>Статистика поисковых систем</CAPTION>
   <THEAD>
    <TR>
        <TH>Поисковая система</TH>
        <TH>Декабрь 2009 г.</TH>
        <TH>Ноябрь 2009 г.</TH>
    </TR>
   </THEAD>
   <TFOOT>
    <TR>
        <TD colspan="4">Результаты сайта "Сайты Рунета"</TD>
    </TR>
   </TFOOT> 
   <TBODY>
    <TR>
        <TD>Яндекс</TD>
        <TD>48.0%</TD>
        <TD>47.9%</TD>
    </TR>
    <TR>
        <TD>Google</TD>
        <TD>34.9%</TD>
        <TD>34.7%</TD>
    </TR>
    <TR>
        <TD>Search.Mail.ru</TD>
        <TD>8.6%</TD>
        <TD>8.6%</TD>
    </TR>
   </TBODY>
</TABLE>
</BODY>
</HTML>
Результат дополнительной структуризации таблицы

Рис. 9.4. Результат дополнительной структуризации таблицы
< Лекция 8 || Лекция 9: 1234 || Лекция 10 >
Галина Башкирова
Галина Башкирова

Здравствуйте, недавно закончила курс по проф веб программиованию, мне прислали методические указания с примерами тем, однако темы там для специальности 

Системный администратор информационно-коммуникационных» систем.
Мне нужно самой найти тему? или делать по высланным темам

 

Константин Моренко
Константин Моренко
Виктория Шевченко
Виктория Шевченко
Россия
Имиль Шахмаев
Имиль Шахмаев
Россия, г. Зеленодольск