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

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

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

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

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

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

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

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

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

>  

>

> , 

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

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

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

 
Но так как мы знаем, все таблицы состоят из строк и столбцов (ячеек), поэтому необходимо задать теги и для них:
 
 - строчка html таблицы

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




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


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


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


 
На самом деле, первая цифра в надписях - это номер ряда, а вторая номер ячейки (1х2 - первый ряд, вторая ячейка и т.д.).
 
 3. Как задать фоновый цвет html таблиц?
 
А сейчас давайте разберемся, как же задается фон таблицы или каждой ячейки отдельно.
 
Итак, для задания фона используется атрибут bgcolor="цвет_фона"
.
 
Например, если нам необходимо задать один цвет для всей таблички, то делается это так:
 
bgcolor="цвет_фона"
>

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


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


 
Например, если необходимо сделать табличку желтого цвета, то мы пишем:
 
Если нужно задать фоновый цвет ряду
 html таблицы, то тогда атрибут bgcolor="цвет_фона"
 применяем к тегу :
bgcolor="#FFFF00"
>
bgcolor="#0000FF"
>










 

 
1.1
 
1.2
 
1.3
 
 

 
2.1
 
2.2
 
2.3
 
 

1.1


1.2


1.3


2.1

2.2

2.3

В этом случае, атрибут номер ячейки
 задает белый цвет тексту, расположенному внутри тега.
 
Точно так же задается и цвет каждой ячейки отдельно
. Например, если нужно изменить цвет ячейки 1.2 на синий, то внутри открывающего тега  атрибут bgcolor="цвет_фона"
:
 
 4. Как установить размер ширины и высоты ячеек html таблицы?
 
Итак, для того, что бы вручную установить ширину и высоту ячеек, используют атрибуты height и width. Их можно задать для всей таблицы, для одного ряда, для ячейки (столбца). Высота и ширина могут задаваться как в пикселях, так и процентах. В нашем случае мы зададим ширину и высоту в пикселях для столбцов (ячеек).
 
height
 - атрибут, устанавливающий высоту ячейки
 
width
 - атрибут, задающий ширину ячейки
 
А теперь на примере:
 
Теперь объясню, почему мы задали высоту ячеек только один раз в каждой строке.
 
Если в ряду Вы задаете для какой-либо ячейки высоту большую, чем для других то, не смотря на это, все ячейки (столбцы) вашего ряда станут по высоте равны наибольшей. А ширину каждого ряда лучше всего задавать отдельно!
 
Вы можете задать высоту и ширину для всей таблицы. В этом случае все ячейки (столбцы) и ряды поделят данное им пространство поровну, если не задавать им данные параметры персонально (в процентах от общей ширины (высоты) таблицы или пикселях).
 
Так же, очень часто приходится задавать высоту height и ширину width в процентах
:
 
 содержимое ячейки 

 
Если мы задаем для ячейки ширину в 40 процентов, как в нашем примере, то это значит, что на остальные ячейки у нас осталось еще 60 процентов, т.е. сумма их ширин не должна превышать 60 процентов. Все очень просто: в сумме мы имеем всего 100%. Считаем: 100 – 40 = 60.

 
 5. Как выровнять текст внутри html таблицы?
 
А теперь давайте разберемся, как выровнять текст в нашей html таблице по левому краю, по правому краю и по центру.
 
Делается это с помощью атрибута:
 
align=”left”
 - выравнивает текст внутри html таблицы по левому краю
 
align=”center”
 - выравнивает текст html таблицы по центру
 
align=”right”
 - выравнивает текст внутри html таблицы по правому краю
 
Соответственно, атрибут align может принимать еще значения right и left. Значение justify при употреблении с тэгом  атрибут align принимать не может.
 
Например, код html таблицы, текст которой выровнен по центру, выглядит так:
 
align="center"
>











 

 
align="left"
> 1x1 
 
align="center"
>1.2
 
align="right"
> 1x3 
 
 

 
align="left"
>2.1
 
align="center"
> 2x2 
 
align="right"
>2.3
 
 

Прописав атрибут align="center"
 в открытии 
, мы выровняли html таблицу по центру странички браузера.
Вот такой результат Вы получите в браузере:
 1x1

1.2


 1x3

2.1


 2x2

2.3


А теперь рассмотрим на примере, как выровнять текст внутри html таблицы по верхнему или по нижнему краю, то есть, как можно сделать так, чтобы содержимое ячейки не только располагалось ровно посередине ее (как по умолчанию), а еще вверху или внизу.
 
Вертикальное выравнивание задается атрибутом:
 
 valign="top"
 - содержание будет располагаться вверху ячейки
 
valign="middle"
 - содержание будет располагаться по центру ячейки
 
valign="bottom"
 - содержание будет располагаться внизу ячейки
 
Давайте рассмотрим данные атрибуты на нашем примере:
 












 

 
valign="top"
> 1x1 
 
1.2
 
valign="top"
> 1x3 
 
 

 
valign="bottom"
>2.1
 
 2x2 
 
valign="bottom"
>2.3
 
 

Вот что мы получим, если посмотрим в браузере результат работы атрибутов align
 и valign
:
 
 1x1

1.2


 1x3

2.1


 2x2

2.3


 6. Как объединить ячейки и столбцы html таблицы?
 
В этой части нашей статьи мы поговорим об атрибутах colspan
 и rowspan
.
 
colspan
 - определяет количество столбцов, на которые распространяется данная ячейка
 
 rowspan
 - определяет количество рядов на которые распространяется данная ячейка
 
Значения colspan
 и rowspan
 могут принимать значение от 2 и больше, т.е. ячейка может растягиваться на два и более столбца (ряда).
 
Итак, сейчас на примере мы растянем ячейку 1х1 на два столбца (ячейки). Для этого мы будем использовать атрибут colspan="2", прописав его для ячейки 1х1. Код будет выглядеть так:
 
Как видим, ячейка 1х1 распространяется на длину двух ячеек. Соответственно, ее длина равняется суммированной длине этих двух ячеек (160 пикселей). Мы не прописали атрибут width для ячейки 1x1, но если бы мы решили это сделать, то width мы задали бы равным 160 пикселям. И еще, обратите внимание, что в нашем примере нет ячейки 1х3, т.е. в первом ряду всего лишь две ячейки, почему – мы уже это обсудили – ячейка 1х1 равна двум ячейкам, благодаря атрибуту colspan.
 
С атрибутами colspan и rowspan необходимо обращаться очень аккуратно. Ошибка может привести к тому, что ваш сайт «поедет».
 
А теперь, когда мы разобрались с параметром colspan
, давайте разберемся с параметром rowspan. Принцип действия тут тот же:
 










 

 
colspan="2"
> 1.1 
 
 1.2
 
 

 
2.1
 
 2.2 
 
 

 1.1

 1.2


2.1


 2.2

Таким образом, мы научились объединять ячейки в строках и столбцах html таблиц.
 
 7. Как убрать, добавить или изменить отступы и как задать рамку html таблице?
 
Итак, ранее мы создали html таблицу, между ячейками которой четко видны отступы. Чтобы их стало видно еще лучше, давайте добавим рамку для нашей таблицы. Делается это с помощью атрибутов:
 
border="ширина рамки в пикселях"
 - устанавливает ширину рамки
 
bordercolor="цвет рамки"
- устанавливает цвет рамки
 
Давайте, например, сделаем нашей html таблице рамку черного цвета шириной 1 пиксель.
 
Для этого тегу 
 добавляем атрибуты:
Теперь мы четко видим отступы между ячейками html таблицы и отступы от внутренних краев ячеек до текста. Следовательно, без проблем можем управлять этими отступами. Для этого предназначены атрибуты:
cellspacing="ширина отступа в пикселях"
 - отступ между ячейками
cellpadding="ширина отступа в пикселях"
 - отступ внутри ячейки (от края ячейки до текста, изображения, ссылки...)
Например, давайте сделаем отступ между ячейками 10 пикселей, а отступ от края ячейки до текста увеличим до 20 пикселей. Делается это так:
cellpadding="20"
cellspacing="10"
>








 
 

 
 1.1 
 
1.2
 
 

 
2.1
 
 2.2 
 


Если посмотреть на результат в браузере, то мы четко видим, что расстояние между ячейками (cellspacing
) нашей html таблицы увеличилось до 10 пикселей, а расстояние между текстом и внутренним краем ячейки увеличилось на 20 пикселей.
 
 1.1

 
1.2


2.1


 
 2.2

Если же необходимо вообще убрать отступы, то просто напросто поставьте cellpadding="0"
и cellspacing="0"
.
 
 8. Как одну html таблицу вставить внутрь другой?
 
Мы подходим к завершающему этапу по изучению html таблиц. Сейчас мы научимся вставлять одну таблицу внутрь другой.
 
На примере, внутрь ячейки 1.2 мы вставим новую таблицу, состоящую из одного ряда и двух столбцов. Внутренней html таблице мы установим красную рамку шириной 2 пикселя и расстояние между ячейками 0 пикселей. Также, внутреннюю таблицу мы разместим вверху ячейки.
 
Делается это очень просто:
 










 

 
 1.1 


 










3.1
3.2



 
 

 
2.1
 
 2.2 
 
 


Вот что получилось в результате новых преобразований нашей таблицы (красные ячейки - внутренняя таблица, находящаяся внутри большой таблицы):
 
 1.1

 

 
3.1


 
3.2



2.1


 
 2.2

На этом этапе данную статью мы закончим. Думаю она получилась удачной и не сложной для понимания, и надеюсь, больше с таблицами у Вас проблем не будет.
Таблицы - одни из наиболее важных, но в тоже время сложных элементов, которые должны присутствовать на веб-страницах. С их помощью удобно подавать важную и полезную информацию в довольно сжатой форме. Конечно, большинство редакторов в шаблонах, работающих на различных движках, позволяют автоматически вставлять таблицу на страницу сайта или отдельной публикации, но что, если дизайн веб-ресурса, его страницы создаются с нуля? Тогда перед начинающим мастером может встать проблема: как сделать Давайте разберемся, как же правильно и быстро создать данный элемент.
Выбираем редактор
В первую очередь, приступая к созданию таблицы, следует определиться с редактором, в котором вы будете работать. Конечно, проще всего выбрать ту программу, в которой вы создаете основной код сайта. Но лучше всего использовать для этих целей старый добрый блокнот.
Вы можете спросить, для чего усложнять себе жизнь, ведь если делать все сразу в редакторе, то и результат можно увидеть тоже сразу, еще и подсказки программы использовать.
Да, это действительно так, но, создавая таблицу с чистого листа, вы не только сможете досконально изучить сам принцип ее создания, но и не допустить досадных опечаток и ошибок в основном коде. Иногда случается так, что курсор случайно перемещается вниз, и в процессе написания в код закрадывается ошибка, которую порой сложно найти. Создав таблицу в блокноте, вы сможете скопировать ее шифр и вставить в нужное вам место.
Алгоритм создания таблицы
Для начала составим краткий алгоритм, как сделать таблицу в HTML. Это нужно для того, чтобы вы понимали последовательность каждого шага. Затем разберем, как именно выполнять каждый из пунктов.
Начнем с подготовительных действий.
1. Рисуем на листе бумаги схематическое изображение таблицы.
2. Подсчитываем количество строк и ячеек. Если количество последних разное - считаем для каждого рядочка отдельно.
3. Определяем в строке количество ячеек-заголовков (к примеру, ячейки «№», «Имя» и т. д.).
4. Записываем основные параметры таблицы - цвет, высоту и ширину, выравнивание текста - в общем, все, что вам покажется нужным.
1. Вставляем тэги таблицы.
2. Вставляем тэги строк исходя из того количества, которое вам нужно.
3. В строках вставляем тэги ячеек (обычных и заглавных), также исходя из того количества, которое записано у вас на бумаге.
4. Задаем параметры для таблицы в целом.
5. При надобности задаем показатели для отдельных ячеек.
6. Заполняем наши ячейки текстом.
Создаем таблицу
Итак, вы выбрали редактор, теперь давайте разберемся, как создать таблицу в HTML. Тэг, с помощью которого в код страницы вставляется таблица (
), является парным, то есть начинается наша конструкция с данного тэга, а заканчивается .
Вставив тэги таблицы, переходим к созданию строк и ячеек.
Сразу отметим, что данные элементы также являются парными. Тэг  задает строки, а  - ячейки.
Для заглавных ячеек следует использовать парный элемент .
Как уже говорилось, первым делом следует оформить строки, затем в них прописывать уже ячейки. Для того чтобы не запутаться, советуем делать либо отступы между каждым блоком в одну-две строчки, либо же прописывать новый блок элементов, используя клавишу "Tab".
Как это может выглядеть? Примерно так:
;
;
;
;
;
;
;
;
 № п/п 
 Фамилия 
1
;
Иванов
.
Как видите, ничего сложного в этом нет. Главное - не запутаться в количестве строк и ячеек. Иначе таблицу может перекосить.
Мы с вами разобрали создание таблицы в HTML, теперь можем переходить к параметрам как самой матрицы, так и ее строк и ячеек.
Параметры таблицы
Когда код написан, следует обратить внимание на следующие пункты: выравнивание в границ, фона, текста и прочее.
Параметры таблицы задаются в тэге 
. К ним относятся:
1. Border - ширина границ. Задается целым числом. По умолчанию границы любой таблицы равны нулю.
2. Bordercolor - цвет границы. Может задаваться как шестнадцатеричным кодом цвета (#00008B), так и его названием на английком (DarkBlue). По умолчанию он всегда серый.
3. Bgcolor - Также задается с помощью кода или названия.
4. Align - выравнивание текста за таблицей. По умолчанию - по левому краю. Есть следующие варианты данного параметра:
left - обтекание справа;
right -обтекание слева;
center - вывод таблицы по центру без обтекания.
5. Width и height - ширина и высота таблицы. Может задаваться как в пикселях, так и в процентах (относительно размера браузера окна).
Прописывая тот или иной показатель, следует обратить особое внимание на оформление. После указания параметра должен идти знак "равно", после которого в кавычках указывается заданное значение.
Что касается цвета текста, то его оформляют так же, как и обычный текст в формате HTML.
Пример оформления таблицы:
;
;
;
;
;
;
;
;
№ п/п
Фамилия
1
;
Иванов
.
Параметры строк
Итак, мы уже разобрались, как сделать таблицу в HTML и прописать основные ее параметры. Но что, если нам нужно выделить строку? Оформить ее не так, как основной текст таблицы?
Параметры строки прописываются в тэге  точно так же, как и данные таблицы. Для строки могут задаваться следующие переменные:
1. Уже известные вам border, bordercolor и bgcolor.
2. Align - выравнивание текста в строке. Может принимать значения left, center и right.
3. Valign - данный тэг выравнивает текст по вертикали. Принимает следующие значения:
top - текст выравнивается по верхней границе;
middle - по центру;
bottom - по нижней границе.
Пример оформления строки:
;
№ п/п;
Фамилия;
.
Параметры ячеек
И последнее, на что стоит обратить внимание тем, кто желает знать, как сделать таблицу в HTML - параметры отдельных ячеек, как обычных, так и заглавных. По сути, все делается точно так же, как и для таблицы или строки. Единственное, добавляется еще два немаловажных элемента:
1. Colspan - данный параметр указывает количество столбцов, на которые может простираться ячейка.
2. 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. Как создать строки (ряды) таблицы
Строки или ряды таблицы создаются с помощью тега
 . Количество горизонтальных строк таблицы определяется количеством парных тегов
 .
3. Как сделать ячейку заголовка столбца таблицы
 создаёт заголовок столбца — специальную ячейку, текст в которой выделяется полужирным. Количество ячеек заголовка определяется количеством пар тегов

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

 , расположенные в одном ряду, определяют количество ячеек в строке таблицы. Количество пар ячеек  должно быть равно количеству пар ячеек
 . Для элемента доступны атрибуты 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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

. Таблица должна содержать хотя бы одну ячейку (пример 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. Поля в ячейках таблицы







							

			


	
Рекомендуем другие статьи
	

             

            
				
Твич (twitch): что это и как работает?
	
         
        
             

            
				
Как праздновать летнее солнцестояние Эммануэль Дагер: Исцеляющее солнцестояние
	
         
        
             

            
				
Программирование микроконтроллеров AVR для начинающих Программирование контроллеров avr для начинающих