- •Добавление фона в документ html
- •Обтекание графики текстом в документе html
- •Создание таблицы документа html
- •Обрамление таблицы документа html
- •Заголовок таблицы документа html
- •Группирование столбцов документа html
- •Группирование строк документа html
- •Задание цвета элементов таблицы html страницы
- •Графический фон таблицы html страницы
- •Выравнивание данных в таблице html страницы
- •Изменение размеров таблицы html страницы
- •Слияние ячеек таблицы html-страницы
- •Улучшение внешнего вида таблицы html-страницы
- •Отображение границ таблицы html-страницы
- •Вложенные таблицы html-страницы
- •Обтекание таблицы текстом
- •Гиперссылки html-страницы Гиперссылка на другую html страницу
- •Гиперссылка в пределах html страницы
- •Почтовая гиперссылка
- •Открытие html страниц в новом окне
Изменение размеров таблицы html страницы
Ширина таблицы задается атрибутом WIDTH. Значение можно задавать как в абсолютных единицах (WIDTH=250), так и в относительных (WIDTH="80%"). Например, задав значение ширины в 600 пикселей, можно быть уверенным, что таблица поместится в окне браузера при любом разрешении монитора.
То же самой можно делать и с высотой таблицы при помощи атрибута HEIGHT.
При задании чрезмерно малых величин ширины и высоты таблицы, браузер определяет минимальные значения, которые позволяют нормально отображать данные.
Все вышесказанное относится и к ячейкам таблицы. При этом вовсе не обязательно задавать размеры каждой отдельной ячейки. При изменении ширины ячейки все соседние ячейки в пределах столбца будут отображаться с учетом нового значения. То же справедливо и в отношении высоты ячейки.
Пример:
HTML-код:
<table border="1" width="200"> <tr> <td><p>Ширина 200 пикселей</p></td> </tr> </table> <br> <table border="1" width="60%"> <tr> <td><p>Ширина 60%</p></td> </tr> </table> |
Отображение в браузере:
|
Слияние ячеек таблицы html-страницы
При помощи атрибутов COLSPAN, ROWSPAN можно объединять несколько соседних ячеек столбца или строки в одну большую ячейку.
Атрибут COLSPAN тэгов <TH>, <TD> позволяет сделать слияние ячеек нескольких столбцов в пределах одной строки.
Атрибут ROWSPAN - ячеек из нескольких строк в пределах одного столбца.
Цифра, указываемая в этих атрибутах, указывает количество ячеек, которые будут подвергнуты слиянию.
Т.к. при выполнении операций слияния очень легко запутаться, то настоятельно рекомендую сделать предварительный эскиз таблицы на бумаге.
Пример:
HTML-код:
<table border="1"> <tr> <td rowspan="3">1111</td> <td colspan="2">22222</td> <td colspan="2">33333</td> </tr> <tr> <td>44444</td> <td colspan="2" rowspan="2">55555</td> <td>66666</td> </tr> <tr> <td>77777</td> <td>88888</td> </tr> <tr> <td colspan="5">99999</td> </tr> </table> |
Отображение в браузере:
|
Улучшение внешнего вида таблицы html-страницы
Атрибут CELLSPACING дает возможность задавать размер полосы чистого пространства, обрамляющих таблицу извне. По умолчанию браузер разделяет ячейки таблицы полосой в 2 пикселя.
Атрибут CELLPADDING задает размеры полос чистого пространства внутри ячейки, отделяя ее содержимое от внешних границ. По умолчанию эта величина равна 1 пикселю.
Чтобы графические изображения, помещенные в соседние ячейки таблицы, выглядели как единое целое, надо задать атрибутам CELLSPACING, CELLPADDING нулевые значения.