Скрипты для сайта
Главная | Регистрация | Вход Приветствую Вас Гость | RSS
Меню сайта
Теги HTML
Терминология языка HTML
Теги HTML по алфавиту
Теги HTML по типу
Уроки HTML начинающим
CSS
Введение в стили CSS
Параметры шрифта и фона
Отображения текста
Отступы,рамки и выделение
Параметры абзацев,списков
Параметры таблиц
Специальные селекторы
Реклама
Зарабатываю на smmka.ru
Все для сайта
Все для графики
Меню и навигация
Слайдеры и слайдшоу
Кнопки и иконки
Tooltips
Аудио и видео плееры
Формы и таблицы

Таблицы

Объединение ячеек таблиц



Для объединения двух и более ячеек в одну используются атрибуты colspan и rowspan тега <td>.

Атрибут
colspan устанавливает число ячеек объединяемых по горизонтали. Аналогично работает и атрибут rowspan, с тем лишь отличием, что объединяет ячейки по вертикали. Перед добавлением атрибутов проверьте число ячеек в каждой строке, чтобы не возникло ошибок. HTML-код которой приведен в листинге 5.13.


Листинг 5.13


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Объединение ячеек</title>
</head>
<body>
<table border="1" cellpadding="4" cellspacing="0">
<tr>
<td rowspan="2">Браузер</td>
<th colspan="2">Internet Explorer</th>
<th colspan="3">Opera</th>
<th colspan="2">Firefox</th>
</tr>
<tr>
<th>6.0</th><th>7.0</th><th>7.0</th><th>8.0</th><th>9.0</th><th>1.0</th><th>2.0</th>
</tr>
<tr align="center">
<td>Поддерживается</td>
<td>Нет</td><td>Да</td><td>Нет</td><td>Да</td><td>Да</td><td>Да</td><td>Да</td>
</tr>
</table>



В данной таблице установлено восемь колонок и три строки. Часть ячеек с надписями «Internet Explorer» , «Opera» и «Firefox» объединены где по две, а где и по три ячейки. В ячейке с надписью «Браузер» применено объединение по вертикали.



Листинг 5.14


<html>
<head>
<title>Таблицы</title>
</head>
<body>
<h5>Основные элементы таблиц</Н5>
<table border>
<caption ALIGN=ТОР>Список сотрудников</caption>
<tr><th colspan=2>Имя и должность</th><th>Оклад</th>
</tr>
ИванДиректор
<tr><td>Петр</td><td>Бухгалтер</td><td>800</td>
</tr>
<tr><td>Федор</td><td rowspan=2>Pa6oчий</td><td>50</td>
</tr>
<TR><td>Bacилий</td><td>70</td>
</tr>
</table>
</body>
</html>



Как шириной всей таблицы, так и шириной каждой отдельной ячейки можно управлять. Ширину всей таблицы можно задать как в пикселах, так и в процентах от ширины окна. Ширину ячеек можно задать также двумя способами: в пикселах и в процентах от ширины таблицы.

Следует иметь в виду, что ячейки в одном столбце имеют одинаковую ширину, а ячейки одной строки — разную ширину. Ширина таблицы задается атрибутом WIDTH в теге
<table>, ширина ячейки указывается тем же атрибутом в теге </th> или </td>.


Пример:

Список сотрудников
Имя и должностьОклад
ПетрБухгалтер800
ФедорPa6oчий50
Bacилий70



Заработай сейчас!
Заработай сейчас
Навигация по сайту






Поиск по сайту

Друзья сайта
Самоучитель html
Все для веб-мастера
Музыка для души
Мир развлечений
Скачать кино бесплатно!
Видеоклипы online
Хостинг от uCoz
Avon
Присоединяйтесь
к   Avon
img