Разработка сайтов для СРО

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Создание и раскрутка сайтов в Интернете

Что нужно для SEO?

Текст & Всемирная Паутина

Инструмент веб-строителя

HTML - язык гипертекста

CSS - каскадные таблицы стилей

Поисковая оптимизация

Что такое раскрутка сайта?

Контекстная реклама

Что такое обмен ссылками?

Почтовые рассылки

Соблюдайте правила

Что препятствует рейтингу?

Что такое CMS?

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

Полезные книги

Карта сайта

Как повысить находимость сайта?

Шаблон документа

Версии HTML

Валидатор и стандарты W3C

Теги, элементы, артрибуты

Комментарии

Имена файлов HTML

Перспективы развития HTML и XHTML

 
Разработка сайтов под ключ

Ссылки по теме

CSS Blast галерея css-сайтов и проектов Web 2.0

XHTML, CSS, JavaScript, DOM. Советы, секреты, хитрости и тонкости

CSS, HTML в примерах и статьях

Учебники HTML и CSS

HTML справочник

Справочники HTML и CSS

Основные ошибки юзабилити

Для тех, кто делает сайты!

Справочник по CSS

CoffeeCup - HTML редактор

FCKEditor - текстовый редактор для браузера

NotPad++ - текстовый редактор

PSPad — текстовый редактор

CSE HTML Validator Lite — редактор-анализатор (валидатор)

W3C - стандарты HTML

W3C - стандарты CSS

Справочная информация

Lynx Viewer

 

Таблицы

Главная « HTML - язык гипертекста « Таблицы

версия для печати

Таблицы — важная и объемная часть языка HTML

Использование таблиц чрезвычайно эффективно для представления данных на Web-сайте. У таблиц интересная история развития в Интернете - поэтому, перед тем, как взяться за дело и начать создавать таблицы, стоит познакомиться с этой историей поближе.

Многие наверняка знают, что Интернет создал физик. Тим Бернерс-Ли (Tim Berners-Lee) представлял, что эту технологию можно применять для высокоэффективного распределения и совместного использования исследовательских документов.

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

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

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


внимание!

Более подробную информацию о таблицах можно найти в официальной спецификации HTML 4.01.

К сожалению, даже многие опытные разработчики не используют табличные элементы на полную мощность.

Элементы HTML, связанные с таблицами:


внимание!

В современных браузерах по умолчанию таблицы отображаются без рамок. Рамки таблицы можно сделать средствами Cascading Style Sheets (CSS).

Не пренебрегайте элементами thead, tbody и tfoot. Кроме того, что они помогают отразить логическую структуру таблицы, также благодаря им легчается оформление таблицы с помощью CSS.

Если таблице нужен заголовок, употребляйте элемент caption, который существует специально для этой цели. Его нужно размещать сразу после открывающего тэга table.

Атрибуты colspan и rowspan элементов td и th позволяют распространить одну ячейку на несколько строк или столбцов. С помощью этих атрибутов можно кодировать сложные таблицы.

Таблицы часто используются для верстки веб-страниц. Это устаревшая технология; табличная верстка была актуальна во времена старых браузеров, для которых не существовало других практических способов создать более или менее сложную композицию страницы. Сейчас возможности CSS позволяют не только повторить любую верстку, которая раньше делалась с помощью таблиц, но и продвинуться еще дальше — например, добиться перекрытия или наложения блоков.

На сегодняшний день таблицы остаются основным способом формирования макетов Web-документов. Однако у такого подхода существует ряд недостатков. Макеты, созданные на основе таблиц, медленно загружаются и зачастую являются сильно детализированными, что затрудняет эффективную работу с ними.


внимание!

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

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

Несомненно, табличные макеты изменили лицо Интернета, однако теперь существует язык CSS, и для большинства макетов больше нет причин использовать таблицы. Вместо этого, таблицы снова рассматривают в истинном свете: как способ отображения данных.

Подход, известный под названием переходный дизайн (transitional design), объединяет использование без труда разработанных таблиц и языка CSS для создания макетов, совместимых со старыми браузерами.

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

Однако несовершенная поддержка CSS в современных браузерах (прежде всего в Internet Explorer) приводит к тому, что средствами CSS иногда довольно трудно осуществить сложную верстку. Кроме того, приходится уделять чрезмерно много внимания тестированию сайта в разных браузерах и решению проблем совместимости.

Тем не менее, если ограничиться только современными браузерами (начиная с Internet Explorer 5.0), для них всегда можно сверстать страницу с помощью CSS. Нет ничего такого, чего можно было бы добиться «табличной версткой» и нельзя было бы осуществить через таблицы стилей. Правда, поиск решения иногда требует слишком много времени и повышенной квалификации разработчика.

Рекомендую всегда, когда позволяют ваши возможности, верстать страницы средствами CSS и не использовать «табличной верстки». Однако эта рекомендация — не непреложный закон: существует немало хороших, эффективных и удобных сайтов, где верстка страниц сделана с помощью таблиц.

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

  • устанавливайте размеры с помощью параметров width и height у всех изображений, которые находятся внутри таблицы;

  • для отображения содержимого таблицы имеет значение только объем HTML-кода, который находится внутри контейнера table. По этой причине таблица с изображениями будет выведена в окне браузера достаточно быстро. Это связано с тем, что указание показать рисунок в ячейке таблицы занимает всего одну строку текста (тег img), эта строка и будет составлять основной объем таблицы, хотя сами графические файлы могут быть объемом в несколько килобайт;

  • задавайте ширину ячеек и общую ширину всей таблицы. Нет нужды указывать ширину всех ячеек, достаточно это сделать только для первой строки, а все остальные будут подстраиваться под нее;

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

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

  • для таблиц большого размера лучше всегда добавлять параметр стиля table-layout. В браузере Internet Explorer он позволит быстрее загружать содержимое страницы, а для браузеров, которые не поддерживают этот атрибут, загрузка пройдет как обычно.


внимание!

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

 
Запомнить эту страницу в google.com Запомнить эту страницу в bobrdobr.ru Запомнить эту страницу в news2.ru Запомнить эту страницу в Memori.ru Добавить в МоёМесто.ru сохранить на RUmarkz Добавить страницу к Мистеру Вонгу Запомнить эту страницу в del.icio.us Запомнить эту страницу в technorati.com Запомнить эту страницу в linkstore.ru Добавить на Ваау!
Valid XHTML 1.0! Valid CSS!
Как повысить находимость сайта?

Структурные элементы

Элемент TITLE

Заголовки: H1, H2, H3, H4, H5, H6

Элементы: P и PRE

Логические стили: EM и STRONG

Элемент IMG

Блочные цитаты BLOCKQUOTE

Перечни: UL, OL, DL

Гиперссылка: элемент A

 
Справочник XHTML 
 

Справочник по языку XHTML 1.0

 

NotPad++ - текстовый редактор…

 

наверх

 
Контактная информация

Пишите:
Звоните: + 7 (916) 597-36-78

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Copyright (©) 2004— by Yuriy Korovenkov