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

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

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

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

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

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

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

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

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

>  

>

> , 

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

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

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

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

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

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

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

 и 

 нет.

Пример 1. Создание таблицы
HTML5
IE
Cr
Op
Sa
Fx

 

 
 
 
 
 
 

 

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

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

 
Порядок расположения ячеек и их вид показан на рис. 1.
 
Рис. 1. Результат создания таблицы с четырьмя ячейками
 
Атрибут border
 тега 
 допустимо добавлять только с пустым значением (
) или равным 1. Все остальные значения не проходят валидацию.
Для управления полями внутри ячеек используется стилевое свойство padding
, которое добавляется к селектору td
. Расстояние между ячейками меняется свойством border-spacing
 (пример 2) добавляемым к селектору table
, браузер IE понимает его только с версии 8.0.
Пример 2. Поля внутри ячеек
HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx

 

 
 
 
 
 
 
 

 
Заголовок 1
Заголовок 2
 
Ячейка 3
Ячейка 4
 
 

 
Таблица с полями и расстоянием между ячейками показана на рис. 2. Аналогичного результата можно добиться и с помощью рамки белого цвета вокруг ячеек.
 

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

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

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

Спасибо, что посетили мой блог 






                                


                                






                            

                        

                    
                    


                    




                
                



                
                    


    
    
    
    
    
    

                



            
            
        
        

        
            
        

        
    
    
    
    
    

    
    
    
    
    
    

    
    
    

    
    

    
    
    
    
    
    
    
    
    
    
    
    


    


             

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

        


            

                

                    





                        



                            

                                

                                    

                                        

                                            

                                                
								Имя															
                                            
                                            

                                                

                                                    
                                                
                                            
                                        
                                    
                                
                                

                                    

                                        

                                            

                                                
								Email								*							
                                            
                                            

                                                

                                                    
                                                
                                            
                                        
                                    
                                
                                

                                    

                                        

                                            

                                                
								Сообщение								*							
                                            
                                            

                                                

                                                    
                                                

                                            
                                        
                                    
                                
                                

                                    

                                        

                                            

                                                Отправить
                                            
                                        
                                    
                                
                            

                            

                                

                                    
                                
                            
                            
                        


                    
                
            

        
    


    

    
    
    

        

        

            

                

                    

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

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

                        
                    
                    

                        

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

                        
                    
                
                

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