Как сделать невидимой таблицу в html

Как сделать невидимой таблицу в html

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

Синтаксис

Атрибуты

align Определяет выравнивание таблицы. background Задает фоновый рисунок в таблице. bgcolor Цвет фона таблицы. border Толщина рамки в пикселах. bordercolor Цвет рамки. cellpadding Отступ от рамки до содержимого ячейки. cellspacing Расстояние между ячейками. cols Число колонок в таблице. frame Сообщает браузеру, как отображать границы вокруг таблицы. height Высота таблицы. rules Сообщает браузеру, где отображать границы между ячейками. summary Краткое описание таблицы. width Ширина таблицы.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

HTML5 IE Cr Op Sa Fx

       
Таблица размеров обуви
 
Россия
 
Великобритания
 
Европа
 
Длина ступни, см
 
 
34,5
3,5
36
23
 
35,5
4
36⅔
23–23,5
 
36
4,5
37⅓
23,5
 
36,5
5
38
24
 
37
5,5
38⅔
24,5
 
38
6
39⅓
25
 
38,5
6,5
40
25,5
 
39
7
40⅔
25,5–26
 
40
7,5
41⅓
26
 
40,5
8
42
26,5
 
41
8,5
42⅔
27
 
42
9
43⅓
27,5
 
43
9,5
44
28
 
43,5
10
44⅔
28–28,5
 
44
10,5
45⅓
28,5–29
 
44,5
11
46
29
 
45
11,5
46⅔
29,5
 
46
12
47⅓
30
 
46,5
12,5
48
30,5
 
47
13
48⅔
31
 
48
13,5
49⅓
31,5
 
  

Статьи по теме

• Атрибуты тега
• Вложенные таблицы
• Выравнивание таблиц
• Выравнивание элементов
• Заголовок таблицы
• Колонки таблицы
• Макет из двух колонок
• Макет из двух колонок
• Макет из трех колонок
• Макет из трёх колонок
• Объемная таблица
• Особенности верстки слоями
• Особенности таблиц
• Особенности таблиц
• Применение таблиц
• Простая таблица
• Разрезание и склейка изображений
• Сетка таблицы
• Строки таблицы
• Таблица без рамки
• Таблица с рамкой
• Таблицы
• Таблицы и стили
• Таблицы и стили
• Теги для таблиц

Невидимые таблицы

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

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

Но для примера мы ограничимся простой вёрсткой в две колонки:

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

А в этой мы можем разместить краткие анонсы других статей и ссылки на них.

А вот и код для такой вёрстки:

Здесь располагается текст левой колонки.

Ну а здесь текст правой колонки.

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

Тут нужно упомянуть, что на самом деле подобного же эффекта можно добиться при помощи атрибута cellspacing или cellpadding. Но у такого способа есть несколько ограничений. В случае использования атрибута cellpadding, кроме пространства между колонками, мы также получим некоторое пространство слева и справа от колонок. А такой вариант не всегда подходит. Атрибут cellspacing хотя и свободен от этого недостатка, но его применение не позволяет нам делать разное пространство между колонками, если их больше трёх. В то же время вышеописанный способ с пустой колонкой универсален и свободен от всех этих недостатков.

Обратите внимание на атрибут valign=»top», прописанный для ячеек, содержащих текст. Как правило, колонки редко бывают заполнены одинаковым объёмом текста и в этом случае одна колонка становится короче другой. И, чтобы текст в короткой колонке не уполз вниз, мы используем атрибут valign, который прижимает текст в колонках к верху ячейки.

Цветные подложки под текст

Вы наверняка видели на сайтах, что некоторые фрагменты текста располагаются на фоне, отличном от основного. Обычно это делается для «врезки» цитат или для выделения части текста, чтобы акцентировать на нём внимание. Такой эффект достигается за счёт таблицы с одной ячейкой:

Здесь располагается фрагмент текста.

Цвет подложки мы можем задавать, используя атрибут bgcolor для таблицы. А чтобы текст на подложке не «прилипал» к границам, мы установим зазор при помощи атрибута cellpadding. Вот, в общем-то, и всё, что требуется. И результат будет выглядеть вот так:

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

Рамка вокруг фрагмента текста

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

Как и в случае с подложкой, мы используем таблицу в одну ячейку, и точно также атрибут cellpadding используется для задания отступов вокруг текста. Разница лишь в том, что теперь таблица используется для задания рамки, а не фона. Результат выглядит следующим образом:

Посмотрите, текст в рамке обращает на себя внимание не меньше, чем подложка. А ведь можно ещё и совместить эти способы!

Применение фоновых рисунков

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

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

В общем случае проблема заключается в том, как ячейки наследуют фон таблицы. Internet Explorer просто рассматривает ячейки как прозрачные по отношению к фону и никак не изменяет внешний вид фонового изображения. А вот Netscape Navigator рассматривает фон в каждой ячейке как совершенно независимый от фона таблицы и в каждой ячейке прорисовывает фон заново. Это приводит к тому, что фоновое изображение в таблице коверкается невероятным образом.

Для обхода этой особенности NN фоновые рисунки в таблице нужно помещать не напрямую, а используя вложенные таблицы. Причём во внешней (я выделил её зеленым цветом) прописывается адрес фоновой картинки, а во внутренней требуется в качестве фона указать пустой URL:

Отсутствие атрибута background во внутренней таблице NN воспринимает таким странным образом, что отказывается показывать фон, указанный во внешней таблице. И единственный способ борьбы с этим — именно пустой URL.

Ну вот, пожалуй, этой статьёй мы и завершим небольшой цикл о совместимости броузеров. А в следующей статье мы поговорим о том, как красиво оформить таблицы.

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

Часто при создании HTML страниц пользователь сталкивается с созданием таблиц различного содержания и сложности. При этом создаются как обычные таблицы, так и таблицы, используемые для верстки (написания кода) страниц. Например, на странице «Результаты олимпиады для школьников» имеются разделы по математике, русскому языку и информатике. На каждой странице помещается таблица с набранными баллами по предметам, состоящая из нескольких столбцов и множества строк. Для перехода между страницами предметов создается горизонтальное меню, ссылки которого могут быть помещены в ячейки невидимой таблицы. Второй способ построения таблиц, как правило, применяется для формирования различной структуры страниц.

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

Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4

Для соединения строк или столбцов используются атрибуты colspan и rowspan соответственно.

Полный код таблицы:

Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4
Ячейка 5
Ячейка 6	Ячейка 7
	Ячейка 8

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

HTML тег

Более сложные таблицы могут содержать такие элементы как, , , , , и .

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

Синтаксис

  .  

Закрывающий тег

Атрибуты

align Устарел в HTML5 Определяет выравнивание таблицы в соответствии с окружающим её текстом. background Устарел в HTML5 Задаёт фоновый рисунок в таблице. bgcolor Устарел в HTML5 Задает цвет фона для таблицы. border Устарел в HTML5 Толщина рамки в пикселях. bordercolor Устарел в HTML5 Задает цвет рамки. cellpadding Устарел в HTML5 Определяет расстояние между границей ячейки и ее содержимым. cellspacing Устарел в HTML5 Указывает расстояние между ячейками. cols Устарел в HTML5 Число колонок в таблице. frame Устарел в HTML5 Сообщает браузеру, как отображать границы вокруг таблицы. rules Устарел в HTML5 Сообщает браузеру, где отображать границы между ячеек. summary Устарел в HTML5 Краткое описание таблицы. width Устарел в HTML5 Определяет ширину таблицы.

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

Стилизация по умолчанию

table

Различия между HTML 4.01 и HTML5

В HTML 5 была прекращена поддержка 12 атрибутов.

Пример использования:

Пример HTML:

  
Заголовок 1
Заголовок 2
Заголовок 3
 
Ячейка 2x1
 
Ячейка 2x2
 
Ячейка 2x3
 
 
Ячейка 3x1
 
Ячейка 3x2
 
Ячейка 3x3
 
 
 

Спецификации

Спецификация	Статус
WHATWG HTML Living Standard (WHATWG)	Живой стандарт
HTML 4.01 (W3C)	Рекомендация
HTML5 (W3C)	Рекомендация
HTML 5.1 (W3C)	Рекомендация