Создать сайт с нуля

  В HTML таблицы применяются не только привычным нам образом (как набор данных, распределенных по ячейкам, строкам и столбцам), но и для удобства размещения информации на странице. Проще говоря, можно представить всю html-страницу в виде таблицы и, например, поместить меню в её левый столбец, основную информацию в средний столбец, а дополнительные ссылки в правый столбец. Количество столбцов, строк и, соответственно, ячеек выбирается только тобой и может быть любым.

    Страница, которую ты сейчас читаешь, изначально была построена по этому принципу: она разбита на несколько строк, а каждая строка на столбцы (причём, в разных строках разное количество столбцов). В некоторые из получившихся ячеек, в свою очередь, помещены ещё таблицы (таблицы вставлены в таблицы). Ты можешь это увидеть даже чисто визуально.

    В общем, использование таблиц в HTML значительно упрощает создание сайта. Впрочем, ты сам всё увидишь! Поэтому давай перейдем непосредственно к практике.

§ 1. Создание таблицы

    Сама таблица в HTML создаётся тегами < TABLE> и < /TABLE>, строки таблицы (помещаются между тегами < TABLE> и < /TABLE>) тегами < TR> и < /TR>, а столбцы таблицы (помещаются между тегами < TR> и < /TR>) тегами < TD> и < /TD>.

    Например, создадим таблицу, состоящую из одной строки и двух столбцов. HTML-код будет выглядеть так:

    Этот же код можно записать и так:

    Но обычно строк и столбцов в таблице много и при такой записи ты будешь постоянно путаться. Поэтому, поначалу, рекомендую использовать первый способ.

§ 2. Рамка таблицы (границы)

    По-умолчанию, таблица в браузерах представляется без рамки. Чтобы рамка таблицы была видна, используется уже знакомый тебе по предыдущим разделам атрибут «border»:

    И тогда браузер покажет:

    Значение атрибута «border» влияет только на внешнюю рамку, границы между ячейками изменять нельзя. Их можно либо показывать, либо нет. Например, если изменить значение атрибута «border» с «1» на «5»:

, то мы получим:

    Можно поменять цвет рамки таблицы с помощью атрибута «bordercolor». Например:

    Тогда в браузере мы увидим:

§ 3. Отступы в таблице

    Чтобы изменить отступы между соседними ячейками таблицы, в HTML используется атрибут «cellspacing». Давай для наглядности усложним таблицу: сделаем две строки по три столбца и применим атрибут «cellspacing»:

    Браузер покажет:

    Для того, чтобы задать отступы внутри ячеек применяется атрибут «cellpadding». Если в нашем HTML-коде поменять первую строку:

, то мы получим:

§ 4. Объединение ячеек таблицы

    Чтобы объединить ячейки таблицы по горизонтали (столбцам) или по вертикали (строкам), в HTML применяются следующие атрибуты:

colspan — объединение ячеек по горизонтали (столбцам);

rowspan — объединение ячеек по вертикали (строкам).

    Например, изменим наш HTML-код так:

    Тогда в браузере мы увидим:

    А если так:

, то получим:

§ 5. Заголовок таблицы

    В случае использования таблицы для упорядочивания данных (а не для разметки страницы), может понадобиться использование заголовка. Заголовок таблицы задаётся тегом < caption>< /caption>. Например:

    В браузере это выглядит так:

    К заголовку таблицы можно применить атрибут «align». Для выравнивания относительно таблицы.

    У атрибута «align» бывают следующие значения:

• left — выравнивает заголовок по левому краю таблицы;


• right — выравнивает заголовок по правому краю таблицы;


• center — выравнивает заголовок по центру таблицы (значение по умолчанию);


• top — то же, что и «center», только работает во всех браузерах;


• bottom — заголовок размещается под таблицей по центру.

    Пример:

    В браузере:

§ 6. Размеры таблицы

    Изменить размеры таблицы и ячеек можно с помощью следующих атрибутов:

• width — ширина таблицы, столбца, ячейки;


• height — высота таблицы, строки, ячейки.

    Их значения задаются в пикселах или процентах. Например:

    Выглядеть это будет так:

§ 7. Выравнивание таблицы

    В HTML горизонтальное выравнивание таблицы относительно страницы производится с помощью уже известного тебе атрибута «align». Его значения также тебе уже знакомы:

• center — выравнивание таблицы по центру;


• left — выравнивание таблицы по левому краю;


• right — выравнивание таблицы по правому краю.

    По умолчанию, выравнивание происходит по левому краю. Пример:

    В браузере:

    Для того, чтобы выровнять текст в таблице (и другое её содержимое), нужно использовать атрибут «align» для каждой конкретной ячейки! Т.к. именно в ячейках располагается всё содержимое таблицы. Пример:

    В браузере:

    Для вертикального выравнивания содержимого ячеек предназначен атрибут «valign», у которого есть следующие значения:

• baseline — выравнивание по базовой линии;


• bottom — выравнивание по нижнему краю;


• middle — выравнивание по середине (значение по умолчанию);


• top — выравнивание по верхнему краю.

    Пример:

§ 8. Фон таблицы

    В HTML цвет фона таблицы или отдельных её ячеек устанавливается с помощью атрибута «bgcolor». О том, как в HTML выбрать нужный цвет того или иного элемента мы говорили в уроке про атрибуты тега body. Пример:

    В браузере мы увидим:

    В качестве фона таблицы или отдельной ячейки можно использовать картинки. В HTML это делается при помощи атрибута «background». Значением атрибута «background» является адрес до изображения (как в HTML вставляется графика мы изучали в этом уроке). Пример картинки-фона для всей таблицы:

    В браузере:

    Для отдельной ячейки картинка-фон задаётся так:

    В браузере:

§ 9. Заключение

    В HTML таблицы, как я уже говорил в самом начале, используются, главным образом, для разметки страниц. В этом их основное предназначение. В каждую ячейку таблицы можно вставить любые другие данные: текст, картинки или другую таблицу. Именно поэтому они так удобны для разметки html-страниц и разбивки их на отдельные блоки. Например, можно создать такую «композицию»:

Эх, где моя молодость!

    И это самое простое из того, что можно сделать с помощью таблиц! Создание сайта на основе табличной вёрстки под силу абсолютно любому новичку! Этот урок тому доказательство.

    В общем, сейчас настало самое время для самостоятельных экспериментов. Так как урок о создании таблиц в HTML закончен. А вместе с ним закончен и мой рассказ об основах HTML.

    Имея эти знания, я начал варганить весь этот сайт. Поэтому тебе я настоятельно рекомендую применить полученные знания на практике. Хотя впереди ещё предстоит раздел о метатегах в HTML, но они прямого отношения к созданию сайта не имеют. Так что закрепляй знания из этой части и жми кнопку «Дальше».