ВНИМАНИЕ! Конкурс по программированию!
Проект Programmers.kz и школа hotPen3D2D предлагает Вам курсы по веб-дизайну, веб-программированию и компьютерной графике. Подробности здесь.
- Просмотров: 4431
- Автор: КазКиберГетик
Сложные таблицы
Категория: WEB-Design » HTML » Уроки HTML
Конечно же на языке HTML можно создавать довольно сложные таблицы с объединением ряда ячеек, как по столбцам, так и по строкам.
Для этого у тэга <td> существуют атрибуты:
- colspan - значение, присвоенное этому атрибуту означает число объединенных колонок;
- 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
Предыдущий урок | Следующий урок
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.




