Ага, пробел убрала, все сразу нормально получилось:)
Да, а выравнивание у меня в теге ячейки и стояло, ошиблась я с align="top"

А вот что за идея поставить
?? В чем тут фокус? Когда я у себя поставила
зазорище стал еще больше, так что я вас не пойму... Изображение не вставляется в строку, оно служит фоном для меню...
И что такое "регэксп" можно спросить?
И зря вы, что автора проблема не интересует:)) Автора она очень даже интересует, только у автора интернета нет, вернее, есть, но только ночной, а по ночам сидеть я не привыкла:))
Простите, еще такой вопрос: а если я свое изображение в качестве фона использую, приписываю его вначале, а потом абсолютным позиционированием накладываю другие изображения-кнопки, то как же у меня после первого изображения может ячейка сразу закрыться? Кстати, еще один есть вопрос по этому поводу: когда я экспериментировала, пытаясь понять, откуда же берется проклятый промежуток (кстати, почему же броузер так интерпретирует разрыв строки?? У меня было:

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

Это не всегда так, получается?),

так вот, когда я экспериментировала, то сделала ширину ячейки таблицы больше ширины изображения. И обнаружила, что правее изображения и чуть его ниже идет цветная полоса длиной примерно 5 пикселей. Тогда я убрала все свои кнопки и стала налагать их одну за другой. Поставила для них border="1" и обнаружила, что у первых двух изображений-ссылок рамка фиолетовая, а у остальных синяя (что это значит и почему так - не могу понять), и что моя полоска тоже имеет цвет переходящий из фиолетового в синий. И с каждой кнопкой полоска становится все длинее... Что же это такое, братцы?? Тогда я взяла и свое изображение-фон вставила не сразу после открытия ячейки, а перед ее закрытием, т.е. сначала, кнопки абсолютно отпозиционированные, а в конце уже фон. Полоска исчезла. Правда, на мой зазор это не повлияло:) Что это было, мне никто не растолкует??

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

Алина, первый общий ответ в непонятных случаях, когда сложно описать эффект (со всевозможными режимами позиционирования и наложения) — „покажите ваш код, лучше ссылкой“.
По поводу нескольких из остальных вопросов я просто нарисую страницу с примерами. Так всем будет лучше.
Алина: прошу прощения за неверное заключение о пропаже у Вас интереса к вопросу:-)))
> откуда же берется проклятый промежуток (кстати,

> почему же броузер так интерпретирует разрыв строки?? У меня было: 

>  

>

> , 

> но я читала, что такие разрывы строки броузер вообще никак не интерпретирует
Всё просто. У Вас имеется ячейка. Посмотрите, какие элементы имеются в ячейке. Во первых, это картинка. Во вторых, это два сброса строки после неё. Поскольку дополнительной разметки нет, то броузер воспринимает каждый сброс строки, как пробел, а затем два полученных пробела превращает в один. Таким образом, в ячейке остаётся картинка и следующий за ней пробел, причём для броузера они располагаются в одном ряду. "Убивать" этот последний пробел броузер сам не станет - для него это совершенно законный символ. При вёрстке броузер стремиться максимально сжать ячейку по горизонтали. В связи с этим от разрывает имеющийся ряд из двух элементов, перенося последний из них (т. е. пробел) на новую строку. То есть разрыв рождается не из разрыва строки в Вашем коде, а из дополнительного элемента-пробела, который в Вашем коде присутствует неявно, представленный двумя сбросами строки.
Вторая часть Вашего вопроса (эксперименты с кодом) требуют источника. Покажите Ваш код, а лучше повесьте плоды экспериментов в Сеть.
Если Вы не задаёте явно z-индекс, то абсолютно и относительно позиционированные элементы действительно располагаются поверх статических элементов, причём позднее определённые элементы перекрывают раннее определённые и перекрывают все статические элементы (статические элементы не могут перекрываться в принципе, хотя иногда броузеры "глючит" и этот закон нарушается). Порядок перекрытия может быть изменён явным заданием z-индекса в стилях. По умолчанию, у всех элементов 0-й z-индекс, но абсолютно и относительно позиционированные элементы будут всегда располагаться поверх статических независимо от места их определения, если только в z-индексах не прописано иначе.
> почему неправильно писать: 
??

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

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

Для лучшего понимания, о чем я пытаюсь вам рассказать, посмотрите на пример каркаса веб-страницы:
Итак, как в HTML сделать простую таблицу
?

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

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

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

 обязателен.
Таблица состоит из ряда
 ряд 1

 ряд 1

 ряд 2

 ряд 2

 ряд 3

 ряд 3

 ячейка 1

 ячейка 2

 ячейка 1

 ячейка 2

 ячейка 1

 ячейка 2

TR
 –

 создает новый ряд таблицы. Закрывающий тег 

 обязателен.
TD
 –

 создает новую ячейку в ряду. Закрывающий тег 

 обязателен.
Давайте рассмотрим пример, чтобы лучше понять все выше сказанное:

 







ряд 1 ячейка1
 
ряд1 ячейка2


ряд 2 ячейка 1
 
ряд 2 ячейка 2


ряд 3 ячейка 1
 
ряд 3 ячейка 2




Вот результат:
ряд 1 ячейка1

ряд1 ячейка2

ряд 2 ячейка 1

ряд 2 ячейка 2

ряд 3 ячейка 1

ряд 3 ячейка 2

Давайте все объясню.

Перед каждым созданием новой таблицы открывается тег 
.

Дальше, размещаем в середине контейнера 
 тег 
, что говорит о начале нового ряда.

В этом ряду вставляем две ячейки с содержанием при помощи тега


Закрываем ряд тегом 
.

Открываем другой ряд тегом 

Закрываем ряд тегом 
.

Открываем третий ряд тегом 
 и вставляем в него снова две ячейки.

Закрываем ряд тегом 
.

Закрываем таблицу тегом 




ряд 1 ячейка1
 


ряд1 ячейка2









.

Я думаю, разобрались? Если кто-то забыл, что такое атрибут border

, который я использую вместе с тегом 
, напоминаю, что это толщина рамки. Если в border

 будет установлено значение «0»
, тогда границы таблицы будут невидимые.
Посмотрите парочку примеров созданных таблиц
 и можно идти дальше:

 







ряд 1 ячейка 1


ряд 2 ячейка 1




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

 вставить изображение.

 







ряд 1 ячейка 1
ряд 1 ячейка 2





Результат:
ряд 1 ячейка 1

ряд 1 ячейка 2



А как объединить ячейки в таблице?

Чтобы объединить ячейки в таблице, вам нужно использовать такие атрибуты:
COLSPAN

 – определяет количество столбцов.

По умолчанию значение 1.
ROWSPAN

 – определяет количество рядов.

По умолчанию значение 1.

объединяем ячейки
 в верхнем ряду с помощью атрибута colspan

:

 







ряд 1 ячейка 1+2


ряд 2 ячейка 1
 
ряд 2 ячейка 2




Результат:
Как установить размер таблицы?

Чтобы задать высоту и ширину таблицы, воспользуйтесь такими атрибутами:
WIDTH

 – ширина таблицы. Размер задается в пикселях или в процентах.
HEIGHT

 – высота таблицы. Размер задается в пикселях или в процентах.

 







ряд 1 ячейка1
ряд1 ячейка2


ряд 2 ячейка 1
 
ряд 2 ячейка 2




Результат:

Выравнивание содержимого в таблице

Чтобы выровнять внутри таблицы содержимое (текст, картинки), можно воспользоваться такими атрибутами:
ALIGN

 – горизонтальное выравнивание содержимого в таблице.

К атрибуту ALIGN

 присваивается значения: left
 (по умолчанию)
, center
,
 right

.

left
 -
прижать содержимое к левой части;
center
 –
установить по центру;
right
 -
прижать содержимое к правой части
VALIGN

 – вертикальное выравнивание содержимого в таблице.

К атрибуту VALIGN

 присваивается значения: top
, bottom
, middle

.

top

 –
прижать содержимое к верху;
bottom

 –
прижать содержимое к низу; 
middle

 –
установить содержимое посередине

 








ряд 1 ячейка1

ряд1 ячейка2



ряд 2 ячейка 1

ряд 2 ячейка 2




Результат:

Как сделать фон таблицы?

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

 – цвет фона всей таблицы или к каждой ячейке по отдельности. Цвет задается кодом или словом.
BACKGROUND

 –фон в таблице заполняется рисунком.
Внимание:

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



.


Для лучшего понимания посмотрите пример:

 







ряд 1 ячейка1

ряд1 ячейка2



ряд 2 ячейка 1

ряд 2 ячейка 2




Результат:

Внимание:

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

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

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

 







ряд 1 ячейка1
ряд1 ячейка2


ряд 2 ячейка 1
ряд 2 ячейка 2




Результат:
ряд 1 ячейка1

ряд1 ячейка2

ряд 2 ячейка 1

ряд 2 ячейка 2

CELLSPACING

 –расстояние между границами соседних ячеек.

 







ряд 1 ячейка1
ряд1 ячейка2


ряд 2 ячейка 1
ряд 2 ячейка 2




Результат:
ряд 1 ячейка1

ряд1 ячейка2

ряд 2 ячейка 1

ряд 2 ячейка 2

Фух, рассказал!

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

Попробуйте создать собственную таблицу, а лучше целый каркас для веб-страницы из таблицы html.

Всего вам хорошего!

Спасибо, что посетили мой блог 
Здравствуйте, уважаемые читатели блога! Частенько на web-страницы, кроме текста и картинок, возникает необходимость вывести различные данные в виде таблиц. Да это и понятно, таблица — удобнейший способ представления большого количества сведений. Поэтому возникает вопрос «Как же вставлять таблицы в html?»
. В этой статье я отвечу вам на этот вопрос и приведу вам множество примеров различных html таблиц.
Как создать таблицу используя HTML
HTML-таблицы создаются в четыре шага.
1. На первом шаге в html-коде с помощью парного тега 
указываем браузеру, что в web-страницу вставлена таблица: . Элемент table является блочным элементом web-страницы. Следовательно таблица всегда выводится с новой строки с отступами по вертикали от соседних элементов, поэтому нет необходимости помещать ее в абзац.

2. На втором шаге формируем строки
 таблицы, помещая парные теги 

. Каждый элемент  создает отдельную строку:










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











4. Ну и на последнем шаге помещаем внутрь элементов  и  содержимое ячеек. HTML-код вставки таблицы на веб-страницу выглядит примерно так:












Столбец 1
Столбец 2
Столбец 3


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


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



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

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

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

 и 
 могут находиться только внутри тега 

 и 
;
ячейки таблицы должны иметь хоть какое-то содержимое, иначе браузер может их вообще не отобразить, если же какая-то ячейка должна быть пустой, то в нее обычно помещают неразрывный пробел (HTML-литерал);
таблица относится к блочным элементам web-страницы;
размеры таблицы и ее ячеек зависят от содержимого, т.е. таблица растягивается по ширине и высоте так, чтобы все уместилось;
между границами отдельных ячеек и между границей каждой ячейки и ее содержимым делается небольшой отступ;
текст ячеек заголовка(элемент th) выводится полужирным шрифтом и выравнивается по центру;
границы вокруг таблицы и ее ячеек по умолчанию не рисуются.
Заголовок таблицы

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









Это таблица

Ячейка 1.1
Ячейка 1.2


Ячейка 2.1
Ячейка 2.2


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






















Столбец 1
Столбец 2
Столбец 3




Ячейка 1.1
Ячейка 1.2
Ячейка 1.3


Ячейка 2.1
Ячейка 2.2
Ячейка 2.3




Итог 1
Итог 2
Итог 3



Объединение ячеек таблицы
Осталось рассказать о самой важной возможности таблиц — объединении ячеек.
Для объединения нескольких ячеек в одну используются атрибуты colspan
 и rowspan
 тегов 
 и 
. Атрибут colspan задает количество ячеек объединенных по горизонтали, а rowspan — по вертикали:















1.1
1.2-1.3


2.1
2.2
2.3


3.1-4.1
3.2
3.3


4.2
4.3

Результат примера:
1.1

1.2-1.3

2.1

2.2

2.3

3.1-4.1

3.2

3.3

4.2

4.3

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

Пример неправильного html-кода при объединении ячеек:









ячейка 1.1
ячейка 1.2


ячейка 2.1
ячейка 2.2


И результат отображения в браузере:
Т.е. если проанализировать html-код, то вы заметите, что в первой строке задано три ячейки, две из которых объединены с помощью атрибута colspan, а во второй строке добавлено только две ячейки. По этому во второй строке возникает третья пустая ячейка.
Атрибуты тега 
В этом посте мы уже столкнулись с одним атрибутом тега 
. С атрибутом border, который задает толщину рамки в пикселях. По умолчанию он равен 0 и следовательно ячейки по умолчанию отображаются без рамки.
Кроме атрибута border есть еще несколько важных атрибутов поддерживаемых тегом 
. Давайте их рассмотрим.
Атрибут align
— задает выравнивание
таблицы на странице. Может принимать значения left, center, right, которые задают выравнивание соответственно по левому краю, по центру и по правому краю. По умолчанию равен left.
Атрибут background
, который задает фоновый рисунок
к таблице. В качестве значения принимает адрес файла с изображением.
bgcolor
 — устанавливает цвет фона
 таблицы. Можно использовать совместно с атрибутом background.
Атрибут bordercolor
задает цвет рамки
 таблицы.
Cellpadding
 — определяет расстояние между границей ячейки и ее содержимым
. Позволяет улучшить читабельность таблицы. В качестве значения может быть любое положительное число.
Cellspacing
 — задает расстояние между внешними границами ячеек
.
На этом рассказывать о том как вставить таблицу в html страницу
 я закончу, только подведу итоги:
для вставки таблицы используются теги 
 — обозначение таблицы,  — добавление строки и , секция завершения  и секция тела — ;
для объединения ячеек используем атрибуты тега 
 . Количество горизонтальных строк таблицы определяется количеством парных тегов
 .
3. Как сделать ячейку заголовка столбца таблицы
4. Как сделать ячейку тела таблицы
 , расположенные в одном ряду, определяют количество ячеек в строке таблицы. Количество пар ячеек  и
 для указания каждой части таблицы.
Элемент должен быть использован в следующем порядке: как дочерний элемент
 — вставка ячейки;
таблица представляет из себя блочные элемент web-страницы;
в качестве содержимого ячеек может быть не только текст, но и картинки и другие таблицы;
таблица может содержать три вида секций: секция заголовка — 

 colspan и rowspan.
На этом все, в следующем посте я расскажу о средствах навигации на html-сайте. Чтобы не пропустить этот пост подписывайтесь на обновления моего блога ! Все, до новых встреч!
HTML-таблицы
 упорядочивают и выводят на экран данные с помощью строк или столбцов. Таблицы состоят из ячеек, образующихся при пересечении строк и столбцов. Ячейки таблиц
 могут содержать любые HTML-элементы, такие как заголовки, списки, текст, изображения, элементы форм, а также другие таблицы. Каждой таблице можно добавить связанный с ней заголовок, расположив его перед таблицей или после неё.
Таблицы больше не используются для вёрстки веб-страниц и компоновки отдельных элементов, потому что такой приём не обеспечивает гибкость структуры и адаптивность сайта, существенно увеличивая HTML-разметку.
Для всех элементов таблицы доступны , а также собственные атрибуты.
Создание таблиц в HTML
Содержание:
1. Как создать таблицу
Таблица создаётся при помощи парного тега
 Рис.1. Внешний вид таблицы без форматирования css-свойствами
По умолчанию таблица и ячейки не имеют видимых границ. Границы
 задаются с помощью свойства border:

 /* внешние границы таблицы серого цвета толщиной 1px */
table {border: 1px solid grey;}
/* границы ячеек первого ряда таблицы */
th {border: 1px solid grey;}
/* границы ячеек тела таблицы */
td {border: 1px solid grey;}
Промежутки между ячейками таблицы
 убираются с помощью свойства table {border-collapse: collapse;} .
Ширина
 таблицы по умолчанию равна ширине её внутреннего содержимого. Чтобы установить ширину, нужно задать значение для свойства width:

 /* сделает ширину таблицы равной ширине блока контейнера, в котором она находится */
table {width: 100%;}
/* задаст фиксированную ширину для таблицы */
table {width: 600px;}
Если для ячеек таблицы заданы внутренние отступы и границы, то ширина таблицы будет включать в себя следующие значения:

 padding-left и padding-right , ширина border-left плюс ширина border-right последней ячейки в ряду. Если заданы ширина и границы ячеек, то ширина таблицы будет складываться из ширины ячеек плюс ширина border-left и ширина border-right последней ячейки в ряду.
2. Как создать строки (ряды) таблицы
Строки или ряды таблицы создаются с помощью тега

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

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

 должно быть равно количеству пар ячеек
 . Для элемента доступны атрибуты colspan , rowspan , headers .
 
5. Как добавить подпись (заголовок) к таблице
Создает подпись таблицы. Добавляется непосредственно после тега 
6. Группирование строк и столбцов таблицы
Создает структурную группу столбцов, выделяя логически однородные ячейки. Группирует один или более столбцов для единого форматирования, позволяя применить стили к столбцам вместо того, чтобы повторять стили для каждой ячейки и для каждой строки. Добавляется непосредственно после тегов  Рис. 2. Выделение столбцов таблицы другим цветом с использованием тегов и
 
7. Группировка разделов таблицы
Элемент создает группу заголовков для строк таблицы с целью задания единого оформления. Используется в сочетании с элементами
 
 , после и, и перед
  ,
 и  элементами. В пределах одной таблицы можно использовать один раз.
 группирует основное содержимое таблицы. Используется в сочетании с элементами и
 .
Создает группу строк для представления информации о суммах или итогах, расположенную в нижней части таблицы. Используется в таблице один раз. Располагается после тега, перед тегами
 
 и  .
 
Такая группировка строк была заложена в стандарте в расчете на то, что обозреватели при отображении длинных таблиц обеспечат прокрутку строк данных при сохранении надзаголовка и подзаголовка неподвижными, а при их выводе на принтер смогут использовать надзаголовок и подзаголовок в качестве колонтитулов страницы. Однако, современные обозреватели этого не делают и либо просто отображают и
 как строки данных, либо, в лучшем случае, просто помещают соответствующие строки в начало и конец таблицы.
8. Как объединить ячейки таблицы
Атрибуты colspan и rowspan объединяют ячейки таблицы. Атрибут colspan задает количество ячеек, объединенных по горизонтали, а rowspan — по вертикали.

 Рис. 3. Пример объединения ячеек таблицы по горизонтали при помощи атрибута colspan
9. Атрибуты элементов таблицы

 Таблица 1. Атрибуты элементов таблицы



Принимаемые значения: список имен ячеек, разделенных пробелами; эти имена должны быть присвоены ячейкам через их атрибут id .


Принимаемые значения: любое целое положительное число.
Атрибут

Описание, принимаемое значение

 colspan

Количество ячеек в строке для объединения по горизонтали.

 
 

 headers

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

 
...
...
 
 rowspan

Количество ячеек в столбце для объединения по вертикали.

 
 

Возможные значения: число от 1 до 999.

 span

Количество колонок, объединяемых для задания единого стиля, по умолчанию равно 1.

 
 
10. Пример создания таблицы
 
 Рис. 4. Создание меню ресторана с помощью HTML-таблицы
Разметка HTML

 

 
Меню ресторана "Ромашка"
 

 
Кухня
 
Холодные блюда
 
Горячие блюда
 
Десерты
 
 

 
Салаты
 
Закуски
 
Первые блюда
 
Вторые блюда
 
 

 
Русская
 
Винегрет
 
Язык с хреном
 
Щи с квашеной капустой
 
Вареники с картошкой
 
Печеные яблоки с медом
 
 

 
Оливье
 
Студень говяжий
 
Рассольник домашний
 
Караси запеченые в сметане
 
Блинчатый пирог
 
 

 
Сельдь под "шубой"
 
Судак заливной
 
Мясная солянка
 
Котлеты "Пожарские"
 
Пирожное "Картошка"
 
 

 
Испанская
 
Севиче из гребешков
 
Эмпанадас
 
Хлебный суп с чесноком
 
Паэлья с морепродуктами
 
Чуррос
 
 

 
Тимбал из авокадо и тунца
 
Ахотомате
 
Астурийская фабада
 
Свиное раксо
 
Альмойшавена
 
 

 
Фасоль с ветчиной
 
Чанфайна
 
Рыбный суп с манными клецками 
 
Тортилья картофельная
 
Бунуэлос
 
 

 
Французская
 
Вогезский салат
 
Рийет из курицы
 
Баклажанный крем-суп "Ренуар"
 
Картофель огратен
 
Бриоши
 
 

 
Салат "Панзанелла"
 
Делисьез из сыра
 
Французский тыквенный суп
 
Гратин из птицы
 
Лигурийский лимонный пирог
 
 

 
Тар-тар
 
Маринованный лосось
 
Суп "Конти"
 
Тартифлетт
 
Саварен "Триумф"
 
 


В этой лекции подробно рассматриваются принципы применения таблиц в HTML-разметке. Это и табличная организация текста, и табличная координатная сетка, и организованная в таблицы графика.
Средства описания таблиц в HTML
По мере развития WWW стало ясно, что средств, которые заложены в НТМL, недостаточно для качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц. Для этой цели обычно использовался предформатированный текст (тег 
), в котором таблица обрисовывалась символами АSСII. Но такая форма представления таблиц была недостаточно высокого качества и выбивалась из общего стиля документа. После введения таблиц в HTML у Web-мастеров появился не просто инструмент для размещения текстовых и числовых данных, а мощное средство дизайна для размещения в нужном месте экрана графических образов и текста.

Создание таблиц в HTML
Для описания таблиц используется тег <ТАВLЕ>. Тег <ТАВLЕ>, как и многие другие, автоматически переводит строку до и после таблицы.
Создание строки таблицы - тег <ТR>
Тег <ТR> (Таble Row, строка таблицы) создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами lt;ТR>.
Определение ячеек таблицы - тег <ТD>
Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD>. Число тегов <ТD> в строке определяет число ячеек

 

 
Таблица
 
 

 

 
Если в таблице два
 тега TR, то в ней две строки.
 
 

 
Если в строке три тега TD,
 
то в ней
 
три столбца.
 
 
 


 
Заголовки столбцов таблицы - тег <ТН>
Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН> (Таblе Неаder, заголовок таблицы). Эти теги подобны <ТD>. Отличие состоит в том, что текст, заключенный между тегами <ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD> с тегом <В> и атрибутом <АLIGN=center>, текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью <ТН>.

 

 

 

 
Заголовок центрирован по умолчанию
 
 
Заголовок может объединять
 столбцы
 
 

 
Заголовок может быть расположен
 перед столбцами
 
Текст или данные
 
Текст или данные
 
 

 
Заголовок может объединять
 строки
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
 


Использование заголовков таблицы - тег <САРТIОN>
Тег  позволяет создавать заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо над (<САРТION АLIGN=top>), либо под таблицей (<САРТION ALIGN=bottom>). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы. Иногда тег <САРТION> используется для подписи под рисунком. Для этого достаточно описать таблицу без границ.

 

 

 
Заголовок над таблицей
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 
 

 
Заголовок под таблицей
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 


Атрибут NOWRAP
Обычно любой текст, не помещающийся в одну строку ячейки таблицы, переходит на следующую строку. Однако при использовании атрибута NOWRAP с тегами <ТН> или <ТD> длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку.
Атрибут СОLSPAN
Теги <ТD> и <ТН> модифицируются с помощью атрибута СОLSPAN (Column Span, соединение столбцов). Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом СОLSPAN, чтобы растянуть ее над любым количеством обычных ячеек.

 

 

 

 

 
Если вы хотите сделать какую-нибудь
 ячейку шире, чем верхняя или нижняя,
 
 
можно воспользоваться атрибутом
 СОLSPAN=2, 
 
 

 
чтобы
 растянуть ее над любым количеством
 обычных ячеек.
 
 
 


Атрибут ROWSPAN
Атрибут ROWSPAN, используемый в тегах <ТD> и <ТН>, подобен атрибуту СОLSPAN=, только он задает число строк, на которые растягивается ячейка. Если вы указали в атрибуте ROWSPAN=s число, большее единицы, то соответствующее количество строк должно находиться под растягиваемой ячейкой. Внизу таблицы ее поместить нельзя.
Атрибут WIDТН
Атрибут WIDТН применяется в двух случаях. Можно поместить его в тег <ТАВLЕ>, чтобы дать ширину всей таблицы, а можно использовать в тегах <ТD> или <ТН>, чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах. Например, если вы задали в теге <ТАВLЕ> WIDTH=250, вы получите таблицу шириной 250 пикселов независимо от размера страницы на мониторе. При задании WIDТН=50% в теге <ТАВLЕ> таблица будет занимать половину ширины страницы при любом размере изображения на экране. Так что, указывая ширину таблицы в процентах, имейте в виду, что если у пользователя узкая область просмотра, ваша страница может выглядеть несколько странно. Если вы пользуетесь пикселами, и таблица оказывается шире области просмотра, внизу появится полоса прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и другой способ задания ширины таблицы может оказаться полезным.

 

 

 

 
Текст или данные -
 ширина 100%
 
 
или

 

 

 
Текст или данные -
 ширина 50%
 
 
или

 

 

 
Текст или данные -
 ширина 200 пикселов
 
 
или

 

 

 
Текст или данные -
 ширина 100 пикселов
 
 


Применение пустых ячеек
Если ячейка не содержит данных, она не будет иметь границ. Если требуется, чтобы у ячейки были границы, но не было содержимого, необходимо поместить в нее что-то, что не будет видно при просмотре. Можно воспользоваться пустой строкой <ВR>. Можно даже задать пустые столбцы, определив их ширину в пикселах или относительных единицах и не введя в полученные ячейки никаких данных. Это средство может оказаться полезным при размещении на странице текста и графики.
Атрибут СЕLLРАDDING
Данный атрибут определяет ширину пустого пространства между содержимым ячейки и ее границами, то есть задает поля внутри ячейки.

 

 

 

 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 


 

 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 
 


Атрибуты АLIGN и VALIGN
Теги <ТR>, <ТD> и <ТН> можно модифицировать с помощью атрибутов ALIGN и VALIGN. Атрибут АLIGN определяет выравнивание текста и графики по горизонтали, то есть по левому или правому краю, либо по центру. Горизонтальное выравнивание может быть задано несколькими способами:
ALIGN=blееdleft
 прижимает содержимое ячейки вплотную к левому краю.
ALIGN=left
 выравнивает содержимое ячейки по левому краю с учетом отступа, заданного атрибутом СЕLLPADDING.
АLIGN=сеnter
 располагает содержимое ячейки по центру.
АLIGN=right
 выравнивает содержимое ячейки по правому краю с учетом отступа, заданного атрибутом СЕLLPADDING.

 

 

 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 


Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. Вертикальное выравнивание может быть задано несколькими способами:
VALIGN=top
 выравнивает содержимое ячейки по ее верхней границе.
VALIGN=middle
 центрирует содержимое ячейки по вертикали.
VALIGN=bottom
 выравнивает содержимое ячейки по ее нижней границе.

 

 

 

 

 
Атрибут VALIGN осуществляет
 выравнивание текста и графики внутри
 ячейки по вертикали.
 
верх,
 
середина,
 
низ.
 
 

 
 VALIGN=top Выравнивает содержимое
 ячейки по ее верхней границе.
 
верх,
 
верх,
 
верх.
 
 

 
VALIGN=middle Центрирует содержимое
 ячейки по вертикали.
 
середина,
 
середина,
 
середина.
 
 

 
VALIGN=bottom Выравнивает содержимое
 ячейки по ее нижней границе.
 
низ,
 
низ,
 
низ.
 
 
 


Атрибут BORDER
В теге <ТАВLЕ> часто определяют, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пространство под них будет отведено. Того же результата можно добиться, задав <ТАВLЕ ВОRDER=0>. Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится делать для разных таблиц границы различной толщины, чтобы их легче было различать.
Атрибут CELLSPACING
Атрибут СЕLLSPACING определяет ширину промежутков между ячейками в пикселах. Если этот атрибут не указан, по умолчанию задается величина, равная двум пикселам. С помощью атрибута СЕLLSPACING= можно размещать текст и графику там, где вам нужно. Если вы хотите оставить пустое место, можно вписать в ячейку пробел.

 

 

 

 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 
 

 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 
 

 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 

 
Текст или данные
 
 
 


Атрибут BGCOLOR
Данный атрибут позволяет установить цвет фона. В зависимости от того, с каким тегом (TABLE, TR, TD) он применяется, цвет фона может быть установлен для всей таблицы, для строки или для отдельной ячейки. Значением данного атрибута является RGB-код или стандартное название цвета.

 

 

 

 

 
Текст или данные
 
Текст или данные
 
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 
 
 


Атрибут BACKGROUND
Данный атрибут задает фоновое изображение для таблиц. Применим к тегам TABLE и TD. Его значением является URL файла с фоновым изображением. Применение этого атрибута рассматривается ниже.
Использование таблиц в дизайне страницы
Таблицы хороши тем, что при желании можно сделать их границы невидимыми. Это позволяет с помощью тега <ТАВLЕ> красиво размещать на странице текст и графику. Пока тег <ТАВLЕ> остается единственным мощным средством форматирования в HTML. Дизайнеры Web-страниц сейчас обладают практически той же свободой в отношении использования "пустого пространства", что и создатели печатных страниц. Таблицы лучше всего помогают отойти от иерархического размещения текста на Web-страницах.
Если браузер поддерживает таблицы, он обычно правильно отображает наиболее интересные эффекты, полученные с их помощью

 

 

 

 

 

 
Уральский государственный
 педагогический университет
 
Добро пожаловать!
 

 

 
Учебный курс
 "Основы WEB-мастеринга"
 
 
 
 
 
 


 
Создание разноцветных таблиц
Некоторые браузеры позволяют отображать цвета. Есть несколько способов раскрасить таблицу, в основном они зависят от используемого браузера.
Цветные границы в Netscape Navigator. Вы не только можете окружить таблицу красивой рамкой, но еще и задать для нее цвет, отличный от цветов текста и фона. Создайте простой серый GIF (или любой GIF, который вы хотели бы иметь в качестве фона) и определите его в теге <ВODY> как фон страницы. Затем задайте цвет фона страницы. В результате ваш тег <ВОDY> будет выглядеть примерно так:

 
Вы создали двойной фон - GIF и заданный цвет. В результате фоновый цвет будет виден на всех границах таблиц и горизонтальных линиях (<НR>). Вне зависимости от того, является ваш фоновый GIF серым или нет, цветные линии и границы таблиц будут заметно выделяться. Если фоновый GIF устроен не слишком сложно, время загрузки страницы возрастет лишь немного.






    

    

    
    


    

        
Поделись статьей:

        

    
    
    

    

    

    
    

    
    

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

            

     

        

            

    

        

            
             
    

            

            

                
17 апреля 2015
                Виртуальные деньги - это реальные деньги
            
        
        

    
 

        

            

    

        

            
             
    

            

            

                
17 апреля 2015
                Перенос Windows на другой пустой жёсткий диск программой AOMEI Partition Assistant Перестановка hdd с системой на другой компьютер
            
        
        

    
 

        

            

    

        

            
             
    

            

            

                
17 апреля 2015
                Скачать iTunes на Windows
            
        
        

    
 

        

            

    

        

            
             
    

            

            

                
17 апреля 2015
                ShadowBan в Instagram – как выйти из тени (инструкция по выживанию) Скрытый бан аккаунта в instagram