Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
YouTube 154 Подписчики
Telegram 241 Подписчики
VK 0 Подписчиков
Маркетер
Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • HTML

Таблицы. Основы

  • 30.11.2001

Автор статьи: Головин Андрей

Таблицы используются в web-дизайне не только, как средство представления данных, но и как инструмент расположения элементов на странице. Чего можно добиться с помощью таблиц? Как известно, страница может просматриваться с различным разрешением. В настоящее время основными являются разрешения 640х480, 800х600 и 1024х768. Для того, чтобы страница одинково смотрелась во всех разрешениях необходимо ограничить ширину содержания минимальным разрешением. Сделать это проще всего с помощью таблиц. Хотя >W3C не рекомендует использовать таблицы для расположения элементов страницы, так как это может вызвать искажения при отображении на «non-visual» (имеются ввиду браузеры на основе речевого или Брайль-интерфеса), но они так и сотаются единственным средством точно расположить элементы во всех «visual» браузерах, так как поддержка CSS (которые рекомендуется использовать) сильно отличается на разных браузерах. Позднее мы рассмотрим как это сделать. А теперь разберем принципы создания таблиц.

Тэг <TABLE> использует следующие основные атрибуты:

Атрибуты тэга <TABLE>

Наименование Описание
WIDTH=»[ширина]» Ширина таблицы. Задает минимальную ширину таблицы. Если какой-либо элемент (очень часто это случается с элементами


и ) не может быть отображен в этой ширине, то ширина таблицы увеличивается, чтобы вместить этот элемент.
Задается в единицах длины (пиксели, пункты и т.п.) или в процентах доступного пространства.

HEIGHT=»[ширина]» Высота таблицы. Так же задает минимальную высоту таблицы. Очень часто искажается в зависимости от содержания.
VALIGN=»TOP|BOTTOM» Задает выравнивание содержимого ячеек. Если этот атрибут опущен, то содержимое выравнивается по центру.
ALIGN=»LEFT|RIGHT» Задает выравнивание таблицы в потоке, как и у изображений.
CELLPADDING=»[отступ]» Отступ от границы ячейки до ее содержимого.
CELLSPACING=»[расстояние]» Расстояние между ячейками.
BACKGROUND=»[путь к картинке]» Задает изображение фона таблицы. В некоторых случаях некорректно обрабатывается Netscape Navigator.
BGCOLOR=»#rrggbb|название цвета» Задает цвет фона таблицы


Здесь представлены основные атрибуты тэга <TABLE>. Остальные атрибуты мы рассмотрим позже, хотя этих должно быть достаточно на первое время.Для тэга <TABLE> закрывающий тэг </TABLE> является обязательным. Внутри этой пары тэгов располагаются ряды ячеек. Мы не будем здесь рассматривать специализированные ячейки типа <THEAD>, <TFOOT> и пр. При необходимости вы сможете прочитать о них в официальых рекомендациях по стандарту HTML 4.0 на сайте W3C.Ряд ячеек заключается в тэги <TR> закрывающий тэг </TR>.

и может иметь следующие атрибуты:Атрибуты тэга <TR>

Наименование Описание
VALIGN=»TOP | MIDDLE | BOTTOM | BASELINE» Задает выравнивание содержимого ячеек в ряду.
ALIGN=»LEFT|RIGHT» Задает выравнивание содержимого ячеек ряда относительно границ ячейки
BGCOLOR=»#rrggbb | название цвета» Задает цвет фона ряда


Содержимое ячеек заключается в тэги <TD> и </TD>. Данный тэг может содержать следующие атрибуты:

Атрибуты тэга <TD>

Наименование Описание
VALIGN=»TOP | MIDDLE | BOTTOM | BASELINE» Задает выравнивание содержимого в индивидуальной ячейке.
ALIGN=»LEFT | RIGHT» Задает выравнивание содержимого индивидуального содержимого ячейки.
WIDTH=»[ширина]» Задает минимальную ширину ячейки. Необходимо иметь ввиду, что ширина ячейки в колонке определяется максимальной шириной ячеек в колонке. Имеет различные последствия если используется в Netscape Navigator совместно с аттрибутом WIDTH, указанном в тэге <TABLE>
HEIGHT=»[высота]» Задает минимальную высоту ячейки.
NOWRAP Указывает на то, что строка содержимого не может быть разбита для сохранения ширины ячейки. Будьте особо внимательны при использовании этого атрибута, так как он может привести к появлению очень широких ячеек.
BGCOLOR=»#rrggbb | название цвета» Задает цвет фона ячейки

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

alexvolkov

Предыдущий материал
  • HTML

Тонкие рамки наносят ответный удар

  • 30.11.2001
  • alexvolkov
Read More
Следующий материал
  • Поисковые машины и каталоги

PageRank: больше ссылок хороших и важных

  • 03.12.2001
  • alexvolkov
Read More
Вас также может заинтересовать
Read More
  • HTML

Оптимизация. Важность тега TITLE

  • Алексей Волков
  • 30.11.2009
Read More
  • HTML

Советы начинающему верстальщику HTML

  • Алексей Волков
  • 25.11.2009
Read More
  • HTML

HTML — Долой тег hr из html разметки

  • Алексей Волков
  • 14.11.2009
Read More
  • HTML

«Резиновая» рамка с фигурными углами

  • alexvolkov
  • 27.07.2005
Read More
  • HTML

Создай свою Web-страницу за пять минут!

  • Алексей Волков
  • 31.03.2005
Read More
  • HTML

Блокнотик с подсветкой

  • Алексей Волков
  • 31.03.2005
Read More
  • HTML

HTML-редактор? Вот и редактируй!

  • Алексей Волков
  • 21.08.2003
Read More
  • HTML

Выбираем HTML-редактор

  • Алексей Волков
  • 14.08.2003

Добавить комментарий

Для отправки комментария вам необходимо авторизоваться.

Свежие посты
  • Дайджест постов Сергея Людкевича
    • 12.09.24
  • Как юристы тормозят бизнес
    • 30.08.24
  • Продвижение оптовых кампаний в Яндекс Директ
    • 06.03.24
  • Cарафанное радио
    • 13.01.24
  • 5-55: История компании
    • 01.03.23
Маркетер
  • О проекте
  • Информационное спонсорство
  • Рекламным агентствам
  • Ссылки
(с) ООО "Маркетер". Официальный сайт. Маркетер: Статьи про рекламу, маркетинг, public relations, интернет

Введите ключевые слова для поиска и нажмите Enter