- •Введение
- •Поздравляю, Вы написали свою первую страничку!!! Что такое html язык и с чем его едят..
- •Полезные советы:
- •Глава 2 Редактируем текст на своей странице..
- •Параграф.
- •Заголовки
- •Стиль текста
- •Предварительно отформатированный текст.
- •Полезные советы:
- •Глава 3 Рисунки.
- •Путь к файлу
- •Выравнивание рисунка.
- •Полезные советы:
- •Глава 4
- •Рисуем таблицу
- •Объединение ячеек.
- •Размеры таблицы.
- •Верстка страницы с использованием таблицы.
- •Полезные советы:
- •Глава 5 Ссылки
- •Текстовые ссылки.
- •Ссылка на e-mail
- •Закладки.
- •Глава1 Глава2 Глава3
- •Полезные советы:
- •Глава 6
- •Спецсимволы
- •Горизонтальная линия
- •Бегущая строка
- •Комментарии
- •Глава 7 Фреймы.
- •Приводим фреймы в опрятный вид.
- •Фреймы и ссылки.
- •Плавающий фрейм
- •Полезные советы:
- •Глава 8 Навигационные карты
- •Прямоугольная область
- •Полигон (многоугольник).
- •Окружность
- •Доводим до ума..
- •Пересечение областей
- •"Не область"
- •Карта на сервере.
- •Полезные советы:
- •Глава 9 Списки
- •Неупорядоченные списки
- •Упорядоченные списки
- •Списки определений
- •Полезные советы:
- •Глава 10 Meta теги
- •Кодировка символов и язык
- •Информация о документе
- •Описание страницы и ключевые слова
- •Обновление страницы
- •Время действия документа и кэш
- •Команды для робота
- •Автоматический переход на другую страницу
- •Эффекты при переходе по ссылке
- •Полезные советы:
- •Глава 11
- •Полезные советы:
- •Глава 12 и снова таблицы..
- •Заголовки таблиц.
- •Название таблицы и её описание
- •Группировка строк.
- •Группировка столбцов.
- •Границы таблицы.
- •Полезные советы:
- •Фоновая музыка. .. Или то чего лучше не делать.
- •Полезные советы:
- •Глава 14 Текст - логика и физика..
- •Теги физического форматирования текста.
- •Логическая разметка текста.
- •Теги логического форматирования текста.
- •Полезные советы:
Глава 4
Таблицы
Помимо прочих объектов в свой сайт Вы можете вставить таблицы.. и сразу забегая вперёд скажу о том что они имеют не малую значимость при создании сайта. С помощью таблицы можно не только выложить ту или иную информацию, тарифную сетку или график дежурств к примеру, но и взяв ёе за основу полностью построить на ней свой сайт, таблицы порой незаменимы при верстке страницы, но об этом позже. А сейчас давайте научимся её рисовать..
Рисуем таблицу
Тег <table> задаёт начало и конец таблицы, любая таблица, как известно, состоит из строк и столбцов, для этого есть ещё два тега:
<tr> - строка таблицы <td> - столбец таблицы
Вместе эти теги пишутся так:
<table> <tr> <td>ячейка</td> </tr> </table>
Такая запись это самая маленькая таблица, в ней всего одна строка, содержащая один столбец - ячейку
Поставим перед собой задачу нарисовать таблицу из трёх строк и трёх столбцов, а заодно вспомним атрибут border "рамка", который добавит нам наглядности.
<html> <head> <title>Таблица</title> </head> <body> <table border="1"> <tr> <td>строка1 ячейка1</td> <td>строка1 ячейка2</td> <td>строка1 ячейка3</td> </tr> <tr> <td>строка2 ячейка1</td> <td>строка2 ячейка2</td> <td>строка2 ячейка3</td> </tr> <tr> <td>строка3 ячейка1</td> <td>строка3 ячейка2</td> <td>строка3 ячейка3</td> </tr> </table> </body> </html>
смотреть пример
Разобрались? Если да, идем дальше..
Объединение ячеек.
Часто при работе с таблицами возникает необходимость объединить те или иные ячейки в одну.
На самом деле слово "объединить" здесь неуместно, использовал я его лишь для того, что бы вызвать ассоциации в Вашей голове. Вспомните тот же Word, добавив там таблицу Вы выделяете нужные ячейки и нажимаете кнопку "объединить".. здесь всё происходит не совсем так, и правильнее было бы говорить не "объединить" а "растянуть".
Эту задачу решают атрибуты colspan и rowspan
colspan - определяет какое количество столбцов будет занимать данная ячейка
rowspan - количество рядов занимаемое ячейкой
Предположим что в нашем примере нам необходимо "объединить" в третьей строке вторую и третью ячейку, для этого атрибуту colspan присваиваем значение 2 (растянуть на два столбца) и вставляем его в нужное место.
<html> <head> <title>Таблица</title> </head> <body> <table border="1"> <tr> <td>строка1 ячейка1</td> <td>строка1 ячейка2</td> <td>строка1 ячейка3</td> </tr> <tr> <td>строка2 ячейка1</td> <td>строка2 ячейка2</td> <td>строка2 ячейка3</td> </tr> <tr> <td>строка3 ячейка1</td> <td colspan="2">строка3 ячейка2</td> <td>строка3 ячейка3</td> </tr> </table> </body> </html>
смотреть пример
Как видите ячейка растянулась на два столбца, но при этом сдвинула третью ячейку, которая собственно нам теперь не нужна, а по сему мы её просто напросто удаляем. Специально допустил эту оплошность, чтобы Вы поняли принцип данного действия.
Исправленный пример:
<html> <head> <title>Таблица</title> </head> <body> <table border="1"> <tr> <td>строка1 ячейка1</td> <td>строка1 ячейка2</td> <td>строка1 ячейка3</td> </tr> <tr> <td>строка2 ячейка1</td> <td>строка2 ячейка2</td> <td>строка2 ячейка3</td> </tr> <tr> <td>строка3 ячейка1</td> <td colspan="2">строка3 ячейка2</td> </tr> </table> </body> </html>
смотреть пример
Теперь попробуем объединить весь первый столбец в одну ячейку, используя атрибут rowspan, ну точнее растянем ячейку первой строчки первого столбца на три строки и на сей раз сразу уберём лишнее.
<html> <head> <title>Таблица</title> </head> <body> <table border="1"> <tr> <td rowspan="3">строка1 ячейка1</td> <td>строка1 ячейка2</td> <td>строка1 ячейка3</td> </tr> <tr> <td>строка2 ячейка2</td> <td>строка2 ячейка3</td> </tr> <tr> <td colspan="2">строка3 ячейка2</td> </tr> </table> </body> </html>
смотреть пример
Всё просто.. главное быть внимательным!