ВНИМАНИЕ! Конкурс по программированию!

Проект Programmers.kz и школа hotPen3D2D предлагает Вам курсы по веб-дизайну, веб-программированию и компьютерной графике. Подробности здесь.

 
Информация к новости
 (голосов: 1)

Сложные таблицы

Категория: WEB-Design » HTML » Уроки HTML

Конечно же на языке HTML можно создавать довольно сложные таблицы с объединением ряда ячеек, как по столбцам, так и по строкам.

Для этого у тэга <td> существуют атрибуты:

  1. colspan - значение, присвоенное этому атрибуту означает число объединенных колонок;
  2. rowspan - значение, присвоенное этому атрибуту означает число объединенных строк;

Еще один атрибут тэга <td> - это nowrap. Он означает, что переноса по словам в данной ячейке таблицы не будет и ширина столбца будет увеличена до той величины, которая удовлетворяет данному уловию.

На ряду с тэгом <td> можно использовать тэг <th>. Этот тэг полность идентичен <td> и имеет те же атрибуты. Однако, используется для создания заголовочных ячеек таблицы Браузер интерпретирует этот тэг применяя несколько иной шрифт и стиль написания текста в подчиненной ему ячейке и по умолчаниею устанавливает align равный center, т.е. центрирует текст в ячейке. Следует быть очень осторожнымс применением тэгов объединения ячеек. Обратите внимание: в приведенном ниже примере текст Текстовый элемент в объединенных ячейках по столбцам записан с применением атрибута colspan=2, означающего объединение двух ячеек столбца. И заметьте, в теле каждого из тэгов <tr>...<tr> расположены по две пары тэгов <td>...<td>. Т.е. это значит, что таблица состоит из двух столбцов. Там же, где применен атрибут colspan=2 указанная пара тэгов всего одна, так как две ячейки объеденены в одну.

Текстовые элементы Параметр и Значение помещены в тело тэга <th>, образуя заголовочные элементы таблицы.

Пример:


 <table border="1" cellpadding="2" cellspacing="2" 
width="100%">
<tr>
<td colspan=2 NOWRAP align=center>
        Текстовый элемент в объединенных 
ячейках по столбцам.
        Этот текст не будет перенесен 
на другую строку.
</td>
</tr>
<tr>
<th width="50%">Параметр</td>
<th width="50%">Значение</td>
</tr>
<tr>
<td width="50%">Ускорение свободного 
падения, м/с2</td>
<td width="50%" align=center>9.81</td>
</tr>
</table>


Источник: web-brodilka.ru


Предыдущий урок | Следующий урок
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Добавление комментария

Имя:*
E-Mail:
Комментарий:
Введите два слова, показанных на изображении: *