В этой статье Вы познакомитесь с важнейшим моментом при создании своего сайта - таблицами! Я
думаю, что Вы обратили внимание на то, что в предыдущих статьях мы не
занимались выравниванием, если, конечно, не считать выравнивание по
левому краю, по центру и по правому краю браузера. Собственно, этого
крайне недостаточно для красивого оформления страницы. Яркий тому пример
- наша форма, которую мы создали в предыдущей статье. Как можно видеть,
форма ОЧЕНЬ НЕРОВНАЯ. Вот, как раз для того, чтобы выравнивать элементы
страницы более точно, чем просто по краям браузера, и были придуманы html таблицы. Давайте для начала создадим простую html таблицу. Но прежде, чем это делать, давайте восстановим код, который у нас остался после создания формы, то есть вот этот: 
Создание форм в HTML Принцип создания таблиц в html
таков: создаётся таблица, потом создаётся строка, потом все столбцы
данной строки, потом очередная строка, снова все очередные столбцы
данной строки и так далее. Таблица создаётся с помощью тега <table>, а заканчивается тегом </table>.
Это, думаю, понятно. У таблицы есть строки и столбцы, поэтому их
необходимо создать. Теперь согласно принципу создания таблиц, необходимо
создать строку. Строка создаётся с помощью тега <tr>. Соответственно, сигналом к окончанию строки является закрывающий тег </tr>. Внутри тега <tr> необходимо создавать столбцы, которые создаются с помощью тега <td>.
И уже внутри этого тега находятся те элементы, которые должны быть
расположены внутри данной ячейки. После того, как все элементы уложили,
то можно закрывать столбец с помощью тега </td>. Дальше открывается новый тег <td>. В него снова помещаются элементы, после этого закрывается </td>. Это сигнал к концу второго столбца. И так далее, столько столбцов, сколько Вам нужно. В конце закрывается строка тегом </tr>. Затем следующая строка и так далее. А заканчивается всё закрывающим тегом </table>. Чтобы стало понятнее, давайте сразу после формы напишем следующие строки: <table> <tr> <td>(1, 1)</td> <td>(1, 2)</td> </tr> <tr> <td>(2, 1)</td> <td>(2, 2)</td> </tr> </table> Здесь мы создали таблицу, состоящую из двух строк (два тега <tr>) и двух столбцов (по два тега <td> в каждом теге <tr>).
В качестве элемента я решил взять обычный текст, в виде координат
ячейки. Соответственно, первая цифра означает номер строки, а вторая -
номер столбца. Это был яркий пример таблицы. Теперь поговорим об атрибутах. Сначала атрибуты тега <table>. 1) Атрибут "border",
значение которого задаёт толщину рамку таблицы в пикселях. По
умолчанию, рамки вообще нет. Давайте поставим значение этого атрибута в "2". 2) Атрибуты "width" и "height" задают ширину и высоту таблицы соответственно. Размер может быть указан, как в абсолютных единицах (пиксели, px), так и в относительных (проценты, %).
Относительный размер, чем хорош, так это тем, что он всегда подстроится
под любое разрешение монитора пользователя и любой браузер. А
абсолютные тем хороши, что при любых браузерах и любых разрешениях
монитора не будет сюрпризов с дизайном, связанные, например, с
растягиванием элементов (если монитор широкоэкранный, к примеру). Какой
выбрать: решать Вам, но я, лично, предпочитаю, в основном, относительные
размеры, изредка разбавляя абсолютными, в зависимости от ситуации.
Давайте поставим значение атрибутов "width" и "height" по "30%". Думаю, что атрибутов Вам дал достаточно. Таким образом, тег <table> выглядит так: <table border = "2" width = "30%" height = "30%"> Посмотрите в браузере, как выглядит теперь наша таблица. Теперь поговорим об атрибутах тега <tr>: 1) Атрибут "height". Заметьте, что у тега <tr> нет атрибута "width", впрочем, это логично, ведь тег <tr> отвечает за строку, а, следовательно, за высоту. А за ширину отвечают столбцы. Собственно, даже атрибут "height" не особо-то и используется, поэтому можно сказать, что атрибутов у тега <tr> и вовсе нету. Наиболее богатым по количеству атрибутов является тег <td>, отвечающий за ячейку таблицы: 1) Атрибут "width". Объяснение то же, что и для атрибута тега <tr>. Соответственно, атрибута "height" нет. 2) Атрибут "colspan". Значение этого атрибута означает количество столбцов, которое занимает данная ячейка. Поставьте этот атрибут в значение "2", где у нас координаты "(1, 1)". Сразу посмотрите на результат. 3) Атрибут "rowspan". Значение этого атрибута означает количество строк, которое занимает данная ячейка. Поставьте этот атрибут в значение "2", где координаты "(1, 2)". Сразу посмотрите на результат. 4) Атрибут "align". Значение этого атрибута означает выравнивание элемента внутри ячейки по горизонтали. Бывают три значения: "left" (по левому краю), "center" (по центру), "right" (по правому краю). По умолчанию стоит выравнивание по левому краю. Давайте выравняем координаты "(1, 1)" по центру, а координаты "(2, 1)" по правому краю. Посмотрите результат. 5) Атрибут "valign". Значение этого атрибута означает выравнивание элемента внутри ячейки по вертикали. Снова имеются только три значения: "top" (по верху), "middle" (по середине), "bottom" (по низу). По умолчанию стоит значение "middle". Давайте поменяем значение этого атрибута у элемента "(2, 1)" на "top". А также у элемента "(2, 2)" поставим значение "bottom". Сразу посмотрите на результат. Таким образом, Ваша таблица имеет такой HTML-код: <table border = "2" width = "30%" height = "30%"> <tr> <td colspan = "2" align = "center">(1, 1)</td> <td rowspan = "2">(1, 2)</td> </tr> <tr> <td align = "right" valign = "top" >(2, 1)</td> <td valign = "bottom">(2, 2)</td> </tr> </table> В
принципе, с теорией всё. А вот на практике необходимо научиться
применять эти знания. И в качестве практики, мы сейчас выравняем нашу
форму. Для начала сотрите все теги <br>, так как теперь на новую строку у нас будет переходить тег <tr>. Теперь помещаем всё содержимое формы в таблицу, то есть сразу после тега <form> пишем тег <table>, а сразу перед тегом </form> закрываем таблицу с помощью тега </table> (не забываем про принцип вложенности!).
Рекомендую поставить временно рамку у таблицы, чтобы видеть, как всё
выравнивается, и как делится общее пространство между элементами
таблицы. Теперь каждую строку формы помещаем в отдельный тег <tr>. И делаем два столбца: первый для описания элемента, а второй для самого элемента формы. И так делаем вплоть до <textarea>. С текстовой областью поступаем так: во-первых, пояснение (далее буду называть меткой)
запихиваем в одну строку, причём ширину делаем в два столбца. Текстовую
область на следующей строке таблицы, и также шириной в два столбца.
Более того, выравниваем и метку, и текстовую область по центру. Далее всё помещаем в одну строку и одну ячейку, но шириной эта ячейка будет в два столбца. Вот
и всё, что необходимо знать для успешного использования таблиц, а
дальше лишь надо набивать руку. Я Вам скажу так: таблица наиболее часто
используемая возможность при создании HTML-страницы, и без них не обходится почти ни один сайт. Правда, таблицы и наиболее сложная тема в основных знаниях по HTML,
для усвоения которой необходимо потренироваться, а также избавиться от
стереотипа о том, что элементом таблицы может быть только текст (уж, так
нас научили в школе, учебниках и вообще в жизни). И когда Вы избавитесь
от этого стереотипа и поймёте, что под элементом может подразумеваться
не только текст, но и картинки, ссылки, формы, элементы формы, и даже
целые таблицы, тогда можно считать, что дело сделано.
Источник: http://rahman. html |