Главная » Создание сайта » HTML учебник. Часть 2 — работа с таблицами

HTML учебник. Часть 2 — работа с таблицами

Приветствую друзья, продолжаем осваивать HTML. Сегодня на повестке дня — добавление и форматирование таблиц. Данный материал — является кратким экскурсом по созданию таблиц в HTML, с помощью таблиц — можно построить целый сайт, причем сложной структуры. 

Таблицы в HTML

Таблицы в HTML можно использовать не только для предоставления структурированных данных, но также и для оформления сайта. Помню свой первый «серьезный» сайт — строил как раз на таблицах, была одна большая таблица из 3 столбцов — левое меню, основная колонка с новостями, правое меню — ну и шапка с футером естественно — все было построено на таблицах.

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

Таблицу в HTML создаем с помощью тега table:

Таблица будет естественно иметь строки и столбцы:

Строка открывается тегом <tr>, закрывается </tr>.

Столбец соответственно <td>, закрывается </td>.

Свойства таблицы

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

Для того, чтобы задать толщину границы используется свойство Border:

Результатом выполнения кода сверху будет «толстая таблица»:

border 5

Можем еще чуть чуть побаловаться с Border и раскрасить его с помощью атрибута bordercolor:

Результатом выполнения будет:

Раскрасили таблицу в нежно розовый цвет (как твои сосочки).

Важным свойством также являются отступы в таблицах (Расстояние между ячейками) — задается благодаря атрибуту cellspacing:

Результат выполнения:

Для того, чтобы задать отступы внутри ячейки используем атрибут cellpadding

отступы внутри таблицы

Видно разницу? Я думаю — да.

Примечание:

Любой из атрибутов работает и действует внутри тегов <tr> и <td>:

Попробуем поиграться с фоном отдельной ячейки:

Пример выполнения кода — 2ая ячейка будет желтоватого цвета:

Атрибутов для любого HTML тега очень много и таблицы не исключение, помимо выравнивания тегом align, задания фона цветом тегом bgcolor, существуют еще теги задания ширины и высоты ячейки и самой таблицы: height и width — можно применять как в процентах так и в пикселях

Посмотрите код выше — мы задаем ширину таблицы 250 пикселей и высоту 350 пикселей, результат выполнения ниже:

высокая и широкая таблица в HTML

Заключение

На этом краткий урок по таблицам в HTML подходит к концу — для закрепления материала попробуйте сделать сложную таблицу из 3х столбцов, повышенной вложенности и задайте отдельные атрибуты каждому из столбцов, в HTML — главное практика. До встречи на страницах блога sovchinnikov.ru

Видишь кнопочки сверху?

Если тебе понравился материал - поделись им с друзьями и коллегами, на форумах и в соц. сетях. Чтобы ничего не пропустить - подпишись на обновления. Спасибо ;)

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*