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

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

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

...

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

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

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

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

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

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

. . .

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

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

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

100

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для всех элементов таблицы доступны , а также собственные атрибуты.

Создание таблиц в HTML

Содержание:

Таблица создаётся при помощи парного тега

Внешний вид

По умолчанию таблица и ячейки не имеют видимых границ. Границы задаются с помощью свойства 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. Выделение столбцов таблицы другим цветом с использованием тегов и

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

Элемент должен быть использован в следующем порядке: как дочерний элемент

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

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

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

colspan	Количество ячеек в строке для объединения по горизонтали.
headers	Задает список ячеек заголовка, содержащих информацию о заголовке текущей ячейки данных. Предназначен для речевых браузеров. ... ... Принимаемые значения: список имен ячеек, разделенных пробелами; эти имена должны быть присвоены ячейкам через их атрибут id .
rowspan	Количество ячеек в столбце для объединения по вертикали.	Возможные значения: число от 1 до 999.
span	Количество колонок, объединяемых для задания единого стиля, по умолчанию равно 1. Принимаемые значения: любое целое положительное число.	Возможные значения: число от 1 до 999.

Разметка HTML

Салаты	Закуски	Первые блюда	Вторые блюда
Русская	Винегрет	Язык с хреном	Щи с квашеной капустой	Вареники с картошкой	Печеные яблоки с медом
	Оливье	Студень говяжий	Рассольник домашний	Караси запеченые в сметане	Блинчатый пирог
	Сельдь под "шубой"	Судак заливной	Мясная солянка	Котлеты "Пожарские"	Пирожное "Картошка"
Испанская	Севиче из гребешков	Эмпанадас	Хлебный суп с чесноком	Паэлья с морепродуктами	Чуррос
	Тимбал из авокадо и тунца	Ахотомате	Астурийская фабада	Свиное раксо	Альмойшавена
	Фасоль с ветчиной	Чанфайна	Рыбный суп с манными клецками	Тортилья картофельная	Бунуэлос
Французская	Вогезский салат	Рийет из курицы	Баклажанный крем-суп "Ренуар"	Картофель огратен	Бриоши
	Салат "Панзанелла"	Делисьез из сыра	Французский тыквенный суп	Гратин из птицы	Лигурийский лимонный пирог
	Тар-тар	Маринованный лосось	Суп "Конти"	Тартифлетт	Саварен "Триумф"

Инструкция

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

- таблица;
- строка;

- колонка.

Основные дополнительные атрибуты:
Border – граница;

Bordercolor – цвет рамки;
Width – ширина;
Height – высота.

Синтаксис таблицы 2X2 без рамки и левосторонним/правосторонним выравниванием содержимого:

Содержимое 1-й ячейки	Содержимое 2-й ячейки
Содержимое 3-й ячейки	Содержимое 4-й ячейки

Картинку нужно прописывать после тега

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

	Содержимое 2-й ячейки
Содержимое 3-й ячейки	Содержимое 4-й ячейки

Дополнительные атрибуты:
Width – ширина;
Height – высота;
Alt - альтернативный текст, который будет отображаться у пользователя, если у него отключена функция просмотра картинок;
Align – выравнивание по горизонтали;
Valign – выравнивание по вертикали;
Title – подпись к изображению.

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

	Содержимое 2-й ячейки
Содержимое 3-й ячейки	Содержимое 4-й ячейки

Дополнительные возможности изображений.

1. Смена картинки на цвет при наведении на нее мышью и после смены местоположения курсора:
onMouseOver="this.style.background="#номер цвета"" onMouseOut="this.style.background="#номер цвета""

2. Смена картинки на другое изображение при наведении мышью:
onmouseover="this.src="images/1.gif"" onmouseout="this.src="images/2.gif""

3. Вставка вращающейся карусели из картинок в ячейку таблицы (значения можно менять):

// 7 variables to control behavior
var Car_Image_Width=100;
var Car_Image_Height=100;
var Car_Border=true; // true or false
var Car_Border_Color="000000"; Border="0"
var Car_Speed=5;
var Car_Direction=true; // true or false
var Car_NoOfSides=6; // must be 4, 6, 8 or 12

/* array to specify images and optional links.
For 4 sided carousel specify at least 2 images
For 6 sided carousel specify at least 3
For 8 sided carousel specify at least 4
For 12 sided carousel specify at least 6
If Link is not needed keep it ""
*/
Car_Image_Sources=new Array(
"images/1.gif","",
"images/2.gif","",
"images/3.gif","",
"images/4.gif","",
"images/5.gif","",
"images/6.gif",""

// NOTE No comma after last line
);

/***************** DO NOT EDIT BELOW **********************************/
CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
C_Coef=new Array(
3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,
Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
C_Pre_Img=new Array(Car_Image_Sources.length);
var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

Function Carousel(){
if(document.getElementById){
for(i=0;i

ряд 2 ячейка 1

ряд 2 ячейка 2

Результат:

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

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

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

Внимание: если вы ходите задать фон цветом или фоновым рисунком всей таблице, атрибуты нужно установить в теге

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

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

Таблицы в HTML

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

Результат:

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

И напоследок расскажу еще о двух полезных атрибутах .

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

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

Таблицы в HTML

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

Результат:

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

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

Таблицы в HTML

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

Результат:

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

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