2. Работа с таблицами - тег table

ЗАДАНИЕ. Изучить материал данного раздела. Выполнить примеры так, чтобы они были расположены в одном файле, задавая таблицам разные названия (caption). Полученный htm - файл будет являться приложением к отчету.

Содержание:

Создаем таблицу

Таблица - один из основных инструментов для создания web-страниц.Без использования CSS, только с помощью таблиц можно создавать страницы со сложным дизайном.

Любая таблица представляет собой набор строк и столбцов, на пересечении которых находятся ячейки. Например:

Название таблицы
столбец 1столбец 2столбец 3
первый столбец первой строкивторой столбец первой строки третий столбец первой строки
первый столбец второй строкивторой столбец второй строки третий столбец второй строки
первый столбец третьей строкивторой столбец третьей строки третий столбец третьей строки


Рассмотрим нашу таблицу с точки зрения HTML:

Создадим таблицу, где в качестве содержимого укажем пересечение номеров строк и столбцов:

Результат:

Название таблицы
123
111213
212223
313233
Как видите, получилось не очень красиво, будем украшать.

Оформляем таблицу

Для этого у тега <table> существует ряд параметров:

Применим эти параметры:

Результат:

Название таблицы
123
111213
212223
313233
Уже лучше, но наша таблица прижата к левому краю окна, также как и текст в ней. Исправим это, добавив еще три параметра:

Применим эти параметры:

Результат:

Обратите внимание, границы у таблицы двойные. Если указать cellspacing="0", то границы примут привычный вид:

Результат:

Вообще, за границы отвечают два параметра:

С помощью этих параметров можно задавать границы так, как вам хочется. Здесь приведем только один пример, вы должны самостоятельно создать еще несколько примеров с различными значениями frame и rules (не менее трех примеров).



Результат:

Следует заметить, что границы в разных браузерах отображаются немного по-разному.

Оформляем строки (tr) и ячейки (td)

Таблицы формируются построчно. Поэтому, заданные в строке (tr) параметры распространяют свое действие на все ячейки (td) строки. У строк можно использовать три параметра:

Пример:

Результат:

Эти же параметры можно применять и к отдельным ячейкам, т.е. к любому тегу <td>, действие будет распространяться только на саму ячейку.

Например, в предыдущем коде добавьте в любой тег <td> параметр bgcolor="red".



Результат:

К ячейкам можно применять еще два параметра:

Например, добавим в наш код, в теги <th> эти параметры

Результат:

Следует отметить, если не задавать ширину и высоту, то таблица будет формироваться по содержимому (так было в предыдущих примерах).

Синтаксис создания таблиц в краткой форме приведен здесь.