Как запрограммировать таблицы и фотографии в html. Почти стандартный режим

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

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

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

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

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

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

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

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

>  

>

> , 

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

 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 страницу
 я закончу, только подведу итоги:
для вставки таблицы используются теги 
 — обозначение таблицы,  — добавление строки и , секция завершения  и секция тела — ;
для объединения ячеек используем атрибуты тега 
 — вставка ячейки;
таблица представляет из себя блочные элемент web-страницы;
в качестве содержимого ячеек может быть не только текст, но и картинки и другие таблицы;
таблица может содержать три вида секций: секция заголовка — 

 colspan и rowspan.
На этом все, в следующем посте я расскажу о средствах навигации на html-сайте. Чтобы не пропустить этот пост подписывайтесь на обновления моего блога ! Все, до новых встреч!
Таблицы в HTML настолько функциональны, что с помощью них можно верстать целые сайты (читайте ). Сейчас мы поговорим о вставке на веб-страницу несложных HTML-таблиц, разбирая только разметку, но не касаясь оформления, потому что украшать таблицы лучше с помощью CSS-стилей.
Теги и атрибуты таблиц
Вот основные элементы, которые нужны для создания таблиц:
 - контейнер, внутри которого располагается таблица (такой же, как 

 для маркированных или 

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


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





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

 обозреватель выделяет жирным и размещает по центру.

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




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

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

 
Назначение
Инструмент
 
 

 
Разметка
HTML
XHTML
 
 

 
Оформление
CSS
 
 

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

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



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




Назначение


Инструмент



 

Разметка

HTML

XHTML
 


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


Благодаря универсальности таблиц, большому числу параметров, управляющих их видом, таблицы надолго стали определенным стандартом для верстки веб-страниц. Таблица с невидимой границей представляет собой словно модульную сетку, в блоках которой удобно размещать элементы веб-страницы. Тем не менее, это не совсем правильный подход, ведь каждый объект HTML определен для своих собственных целей и если он используется не по назначению, причем повсеместно, это значит, что альтернатив нет. Так оно и было долгое время, пока на смену таблицам при верстке сайтов не пришли слои. Это не значит, что слои теперь используются сплошь и рядом, но тенденция уже наметилась четко — таблицы применяются для размещения табличных данных, а слои — для верстки и оформления.
 
Создание таблицы
 
Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений.
 
Для добавления таблицы на веб-страницу используется тег 
. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов 
 и 

. Таблица должна содержать хотя бы одну ячейку (пример 12.1). Допускается вместо тега 

 использовать тег 

. Текст в ячейке, оформленной с помощью тега 

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

 и 

 нет.

 
Пример 12.1. Создание таблицы

 

 
 
 
 
 
 

 

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

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

 
Порядок расположения ячеек и их вид показан на рис. 12.1.






                                


                                






                            

                        

                    
                    


                    




                
                



                
                    


    
    
    
    
    
    

                



            
            
        
        

        
            
        

        
    
    
    
    
    

    
    
    
    
    
    

    
    
    

    
    

    
    
    
    
    
    
    
    
    
    
    
    


    


             

          Есть вопросы?
          
      

        


            

                

                    





                        



                            

                                

                                    

                                        

                                            

                                                
								Имя															
                                            
                                            

                                                

                                                    
                                                
                                            
                                        
                                    
                                
                                

                                    

                                        

                                            

                                                
								Email								*							
                                            
                                            

                                                

                                                    
                                                
                                            
                                        
                                    
                                
                                

                                    

                                        

                                            

                                                
								Сообщение								*							
                                            
                                            

                                                

                                                    
                                                

                                            
                                        
                                    
                                
                                

                                    

                                        

                                            

                                                Отправить
                                            
                                        
                                    
                                
                            

                            

                                

                                    
                                
                            
                            
                        


                    
                
            

        
    


    

    
    
    

        

        

            

                

                    

                        
Сообщить об опечатке
                        

                            
Текст, который будет отправлен нашим редакторам:
                            

                        
                    
                    

                        

                            
Ваш комментарий (необязательно):
                            
                        
                        

                        
                    
                
                

                    Отправить
                    Отмена