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

les14.1 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 >.

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

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

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

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

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

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

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

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

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

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

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

Чтобы определить расстояние между содержащимся в таблице материалом и рамкой каждой ячейки - 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 таблицы.

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

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

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

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

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

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

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

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

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

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


05.04.2014

Похожие статьи:

html и psd шаблоны сайтов

html и psd  шаблоны сайтов 16.04.2014
Представим себе, что вам необходим сайт, дизайн которого должен быть достаточно интересен, но, увы, в данный момент вы не имеете ни средств, ни времени, чтобы обратиться к профессионалам для заказа подобного сайта. Самое верное решение в данном случае - использование шаблонов. Они существуют в ...

Что такое юзабилити и зачем оно нужно?

Что такое юзабилити и зачем оно нужно? 25.11.2013
Все чаще различные компании стали переносить свой основной бизнес в Интернет, где они занимаются привлечением потенциальных клиентов. Подобные сайты ведут между собой жесткую конкуренцию. Поэтому важно при разработке сайта учесть тот момент, чтобы сайт был не только информативным, но и максимально ...

Требования к сайту-портфолио

Требования к сайту-портфолио 02.12.2013
Размещая в Интернете сайт-портфолио, люди рекламируют собственные услуги. Обычно таким способом ищут себе клиентов дизайнеры, художники, писатели, фотографы. Важно построить свой проект так, чтобы целевая аудитория захотела сотрудничать с автором.   Сайт-портфолио должен состоять из следующих ...

Тестирование сайта на кроссбраузерность

Тестирование сайта на кроссбраузерность 03.09.2013
Чтобы просмотреть Интернет-сайты, пользуются специально созданными для этого программами – браузерами. Сегодня количество таких программ достигает нескольких десятков, учитывая, что в каждой из них есть несколько версий.   В результате возникло такое понятие как кроссбраузерность. Под ...

Способы раскрутки интернет-сайта

Способы раскрутки интернет-сайта 04.11.2013
Как известно, для того чтобы получать достойную прибыль от сайта, необходимо привлекать к нему внимание пользователей, что обеспечило бы ему стабильную посещаемость. Другими словами, любой сайт требует раскрутки.   Что для этого нужно:   1. Содержимое сайта. Первым шагом должно стать ...