html таблица: учимся создавать таблицу на примере

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

Т.е. изначально выполняется создание html таблицы и только потом выполняется наращивание графики, наполнение контентом и т.д.

Как создается html таблица

Раньше на сайтах использовалась табличная структура. Сейчас же все больше отдают предпочтение структуре на дивах, когда используют < div > и Css. Самый простой вид таблицы, который используют для разметки сайтов:

Давайте разберемся в построении простейшей таблицы. Для этого мы будем использовать три элемента:

• 1-й элемент - TABLE - обязательно должен быть заключен начальным и конечным тегами. Разметку html таблицы выполняют в зависимости от объема информации, которая планируется размещаться в ней. Поэтому таблица печатается без рамки. Чтобы задать толщину рамки таблиц, используется BORDER (задается в пикселах).
• Чтобы создать новый ряд таблицы используем тэг TR (Table Row) - 2-й элемент и также с закрывающим тегом.
• 3-й элемент в html таблице начинает и заканчивает ячейку ряда плюс использовать закрывающий тег.

Создание простой таблицы в два ряда и два столбца

Для создания таблицы пишем код:

• <table > - это начало таблицы. Чтобы обозначить новый ряд используем < tr >.
• Две ячейки вставляем в 1-й ряд: < td > ряд 1 ячейка 1< /td > и < td > ряд 1 ячейка 2 < /td >.
• Ряд закрыли < /tr >, и начали второй ряд < tr >.
• Так же мы вставили две ячейки и во второй ряд.
• Закрываем таблицу < /table >.

Все очень просто, наглядно это буде так:

Объединение ячеек

Для этого используют такие атрибуты:

• Чтобы определить количество столбцов используем тэг COLSPAN. Значение по умолчанию - 1.
• Чтобы определить количество рядов используем - ROWSPAN. Значение по умолчанию - 1.

Рассмотрим пример 1:

Дополнительные нюансы:

Дополнительные атрибуты для определения расстояния материала и ячеек.

Чтобы определить расстояние между содержащимся в таблице материалом и рамкой каждой ячейки - CELLPADDING.

Для того чтобы задать величину между соседними ячейками в таблице используем CELLSPACING.

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

Давайте рассмотрим, как определять ширину и высоту таблицы:
Для определения ширины таблицы html - WIDTH. Ширину можно задать в пикселях или в процентах относительно высоты окна. Такой атрибут автоматом определяется от содержащегося объема материала в таблице.

Для определения высоты html таблицы - HEIGHT. Ширину можно задать или в пикселах, или в процентном отношении, которое зависит от высоты окна браузера. Этот атрибут автоматически определяется от содержащегося объема материала в таблице.

Важные атрибуты для визуального восприятия таблицы

1. Для определения способа выравнивания содержимого ячеек или таблицы html по горизонтали - ALIGN. Доступные значения атрибута: right, left, center, (справа, слева, центр). По умолчанию - left.
2. Для определения способа выравнивания содержимого ячеек или html таблицы по вертикали - VALIGN. Доступные значения атрибута: top, middle, bottom (к верху, посередине, к низу).
3. Для определения цвета фона используются html цвета - BGCOLOR. Этот атрибут задается одним из 16-ти основных цветов. А можно использовать RGB, являющейся значением шестнадцатеричной системы.
4. Чтобы залить фон рисунка таблицы используется атрибут BACKGROUND. Для этого прописываем URL рисунка.

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

В конце концов, свой цвет или рисунок можно задать для каждой ячейки html таблицы.

Рассмотрим на примере:

Дополнительный пример:

Дополнительные нюансы:

Если картинка получилась меньше ячейки, то она продублируется, как видно в примере. Если же картинка больше ячейки - то отобразится часть, которая влезет.

Вот вы и научились создавать html таблицы, более подробную информацию вы можете узнать прочитав html учебник, где очень подробно расписаны уроки по созданию сайтов.

Видео: Как сделать таблицу в HTML

05.04.2014