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

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

Для фреймов в HTML:

Для фреймов в XHTML:

Изображения друг под другом

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

Пример 1.2. Вывод двух изображений

HTML 4.01 IE Cr Op Sa Fx

Изображения по вертикали

Поскольку рисунки предварительно были одним и «разрезаны» для удобства, они образуют единое изображение (рис. 1.1).

Рис. 1.1. Вывод изображений в почти стандартном режиме

В стандартном режиме между изображениями образуется небольшой промежуток (рис. 1.2).

Рис. 1.2. Вывод изображений в стандартном режиме

Для обхода этой особенности в стандартном режиме существует два основных способа:

добавить display : block для изображений;
использовать свойство line-height для родительского контейнера.

Рассмотрим эти способы подробнее.

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

Пример 1.3. Использование свойства block

Изображения по вертикали

Не обязательно применять свойство display , также можно воспользоваться line-height , это свойство задаёт межстрочный интервал. Установив значение 1px для тега

Внутри которого располагаются изображения, мы получим аналогичный результат (пример 1.4).

Пример 1.4. Использование свойства line-height

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Изображения по вертикали

Изображения в таблице

При добавлении изображения в ячейку таблицы также проявляется разница между режимами браузера. Для понимания разберем следующий код (пример 1.5). Чтобы стала заметна граница вокруг таблицы, в стилях добавлено свойство border для селектора TABLE .

Пример 1.5. Изображение в таблице

HTML 4.01 CSS 2.1 IE Cr Op Sa Fx

Изображения в таблице

Результат данного примера показан на рис. 1.3а. Для стандартного режима вывод изображения несколько отличается (рис. 1.3б).


а	б

Рис. 1.3. Изображение в таблице. а - почти стандартный режим, б - стандартный режим

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

Рис. 1.4. Базовая линия текста

Опять же, существует несколько способов изменить поведение изображений в таблице. Первый способ уже упоминался, это преобразование тега в блочный элемент с помощью свойства display со значением block (см. пример 1.3). Стиль в таком случае будет следующий:

TABLE IMG { display: block; }

Если наряду с изображениями внутри ячейки находится текст, этот стиль может привести к нежелательным последствиям. Вместо того чтобы картинка располагалась рядом с текстом, она, как блочный элемент, появится на новой строке. В этом случае рекомендуется задать выравнивание изображений по нижнему краю через свойство vertical-align со значением bottom (пример 1.6).

Пример 1.6. Выравнивание изображений

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Изображения в таблице

Текст

Хотя во всех браузерах в данном примере наблюдается выравнивание изображения по нижнему краю, несколько различается выравнивание самого текста. Браузеры Firefox, Safari, IE7 выравнивают текст по нижнему краю рисунка, а Opera, IE8, IE9 - по верхнему.

Однопиксельные рисунки

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

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

Здесь класс line задает размеры ячейки.

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

Теги и атрибуты таблиц

Вот основные элементы, которые нужны для создания таблиц:

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

задаёт подпись таблицы. Контейнер можно не использовать, но если вы всё-таки решили озаглавить таблицу, то ставьте его сразу после тега , вне ячеек и строк.
- парный тег, содержащий строку таблицы (ячейки, расположенные на одном уровне по горизонтали).
, столько ячеек в ней и будет: один тег - одна ячейка.
позволяет группировать столбцы, быстро и не засоряя код задавать им общие характеристики. С помощью контейнера можно отделять логические части таблицы друг от друга. Располагается после тега mustdie forever, а тот факт, что ошибку быстрее скрыть, чем исправить ("Проще добавить к тысяче картинок в ячейках быэр чем жать бекспейс и убирать пробелы в этих ячейках после картинок") ещё не означает, что к уже имеющимся ошибкам нужно добавлять новые - практика показывает, что спрятанные ошибки имеют препоганое (но логичное) свойство всплывать потом в самых неожиданных местах.

Марьяна: очень интересное наблюдение относительно hspace=0, vspace=0 - я никогда не наблюдал, чтобы явное указание нулевых отступов в картинках что-то меняло. Буду благодарен за пример (просто любопытно:-)).

Владислав Пустынский, вы зря так про
и бэкспейсы.
- лиш часный случай.
Но я все-же решусь отметить, что более общее решение это все-же
после .
Вполне типовая задача:

. . .

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

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

rowspan объединяет ячейки по столбцам.

Пример создания таблицы

Создайте документ формата HTML и скопируйте в него следующий код:

Пример таблицы

Инструменты создания сайтов
Назначение Инструмент

Разметка HTML XHTML

Оформление CSS

Разработка PHP Python

В браузере документ будет выглядеть так:
Разберём, какие строчки кода за что отвечают.

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

Разметка HTML XHTML

- закрыли таблицу.

У меня таблица из двух ячеек. Первая ячейка имеет ширину 200px, в нее вставляется изображение размером 200px*1000px, изображение выравнивается по верхнему краю: align="top", атрибуты cellspacing и cellpadding для всей таблицы установлены "0". Содержимое второй ячейки небольшое, много места не занимает, так что высота таблицы определяется вертикальным размером моего изображения. Но почему-то между нижней границей изображения и нижней границей таблицы появляется небольшой зазор - пикселей пять, хотя, как я сказала, cellpadding="0". Откуда берется этот ужасный зазор? У меня изображение является декоративным элементом, оно должно пройти по краю страницы сверзу донизу, этот пустой промежуток все портит.

Алина, проследите, чтобы вслед за закрывающей скобкой тега сразу шёл закрывающий :

...

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

Кроме того, выравнивать содержимое ячейки лучше не через align="top" в , а добавив valign="top" в тег
.

Проще всё равно пользоваться поиском с регэкспами, но предмета спора нет никакого — всё зависит от ситуации и надо использовать любой из двух приемлемых методов (например, если изображение является inline-image, то есть вставляется в строку текста, то
не спасёт).

Ладно. Скорее всего, верный совет/ответ дан Алексеем сразу же во втором постинге; конструкции типа

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

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

Dmitriy: боюсь, я не вполне понял типовую задачу... В сочетании

100

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

! это неправильно! можно только
,
И т. п.!) Мне даже непонятно, на что может повлиять
после картинки кроме как на положение следующих за картинкой элементов:-) Или не понял я чего...

После особенно эффективен в тех случаях (и является единственным решением, между нами говоря), когда не вложен ни во что больше, то есть „сам по себе“. Тогда после него не образуется никаких подвисших пробелов и „неправильных“ отступов.

Самым надёжным способом избежания появления лишних пробелов (согласование четырёх имён в родительном падеже:-)) является нерасстановка этих пробелов в процессе вёрстки страницы (три имени в родительном падеже). Не нужен пробел после картинки - НЕ СТАВЬТЕ ЕГО!!!

Сравните конструкции:

- гадкий промежуток имеется. Мы можем, конечно, поставить после картинки
. Логики это документу не прибавит, но возникнет угроза, что какой-нибудь броузер завтрашнего дня будет действовать логичнее и не станет по собственному произволу игнорировать пустые строки в самом верху и самом низу таблицы (такое поведение нигде не документировано, насколько мне известно). Не проще ли убить саму ошибку, чем вышибать её другой ошибкой? Кстати, подстановка
или
вместо
приводит к тому же "положительному" результату, хотя и нарушает вдобавок ещё и нестинг... :-(

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

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

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

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

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

Алина: прошу прощения за неверное заключение о пропаже у Вас интереса к вопросу:-)))

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

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

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

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

> почему неправильно писать:
??
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 устроен не слишком сложно, время загрузки страницы возрастет лишь немного.

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

Элемент TABLE, создаем таблицу

Для создания таблиц в языке HTML применяется элемент table , а весь код (ее содержимое) таблицы располагается между тегами . Атрибуты этого элемента задают значения для всей таблицы целиком:

background - задается изображение (URL), которое может быть фоном для всей таблицы;

bgcolor - цвет фона таблицы, задается если не задан фон в виде изображения;

border - толщина линий таблицы, если неободимы видимые границы;

bordercolor - цвет линий таблицы;

cellpadding - расстояние от текста внутри ячеек до границ ячеек;

cellspacing - расстояние от границ таблицы до внешних границ ячеек (внутри таблицы);

width - задается значение ширины таблицы в px или % .

Пишем пример кода таблицы с голубым фоном, толщиной лини в 1px белого цвета, отступами внутри и снаружи ячеек по 2px, шириной 100% от страницы:
bgcolor="blue" border ="1" bordercolor ="white" cellpadding ="10" cellspacing ="2" width ="100%" >

Добавляем строку

В каждой таблице должна быть хотя бы одна строка, задается она тегами . В следующем примере смотрим пример добавления строки:
bgcolor="blue" border ="1" bordercolor ="white" cellpadding ="10" cellspacing ="2" width ="100%" >

Добавляем ячейки

Ячейки образуют вертикальные столбцы таблицы, обозначаются они тегами . Добавляем к нашей таблице ячейки:
bgcolor="blue" border ="1" bordercolor ="white" cellpadding ="10" cellspacing ="2" width ="100%" >
Ячейка №1
Ячейка №2
Ячейка №3

В увидим получившуюся таблицу:

Объединение строк

В некоторых случаях может потребоваться растянуть один столбец на несколько строк, для этого применяется атрибут rowspan , значение которого определяет количество строк, необходимых для объединения. Смотрим пример:
bgcolor="blue" border ="1" bordercolor ="white" cellpadding ="10" cellspacing ="2" width ="100%" >
rowspan="2" >Строки №1 и №2 объединены
Ячейка№1
Ячейка№2
Ячейка №3
Ячейка №4
Строка №3
Ячейка №5
Ячейка №6

Браузер отобразит:

Строки №1 и №2 объединены Ячейка№1 Ячейка№2
Ячейка №3 Ячейка №4
Строка №3 Ячейка №5 Ячейка №6
Объединение столбцов

Столбцы объединяются по такому же принципу, только с использованием атрибута colspan . Смотрим пример:
bgcolor="blue" border ="1" bordercolor ="white" cellpadding ="10" cellspacing ="2" width ="100%" >
colspan="2" >Столбцы №1 и №2 объединены
Столбец №3
Ячейка №1
Ячейка №2
Ячейка №3
Ячейка №4
Ячейка №5
Ячейка №6

Браузер отобразит:

Атрибуты colspan и rowspan можно применять одновременно. В браузере это будет выглядеть так:

Или вот так:

А ты попробуй написать код самостоятельно!
Размеры и выравнивание таблицы

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

Выравнивание таблицы по горизонтали задается атрибутом align , значения тебе уже знакомы: left, center, right . А для того чтобы выровнять текст в ячейках таблицы, атрибут горизонтального выравнивания align необходимо применить к каждому тегу td . С применением CSS это гораздо упрощается. Для вертикального выравнивания содержимого ячеек применяется атрибут valign . Он так же имеет свои значения - вертикальное выравнивание по центру middle , по верху top и по низу bottom базовой линии (линией, на которой расположен текст текущей строки).

Фон таблицы

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

В заключение

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

/ То, без чего не создать сайт: ∼ ∼

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

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

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

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

Строки №1 и №2 объединены	Ячейка№1	Ячейка№2
Строки №1 и №2 объединены	Ячейка №3	Ячейка №4
Строка №3	Ячейка №5	Ячейка №6