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


/ То, без чего не создать сайт: ∼ ∼ находится тело таблицы. Тело состоит из строк и столбцов. Таблица заполняется построчно.

Каждый тег создает новую строку. Далее во вложенных создаются столбцы. Можно создавать множество столбцов. При этом нужно следить за количеством столбцов в каждой строке. Например, если в первой строке было 5 столбцов, то и в следующих строках должно быть 5 столбцов. Иначе таблица поплывет. Есть возможность объединять ячейки.

Как сделать таблицу в html

Приведем пример, html код:

Пример таблицы
Столбец 1 Столбец 2

Обратите внимание на ячейку . Мы используем специальный атрибут colspan для объединения ячеек по горизонтали. Его численное значение указывает число объединяемых столбцов. Также существует аналог этого атрибута: тег (заголовок таблицы), где нужно также прописать colspan. Результат будет таким же. Но зачастую используют обычный td.

Теперь рассмотрим подробно все атрибуты тега

.

Атрибуты и свойства тега

К открывающему тегу

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

1. Свойство align="параметр" - задает выравнивание таблицы. Может принимать следующие значения:

В разобранном выше примере мы выравнивали таблицу по центру align="center" .

Этот атрибут можно применять не только к таблице, но и к отдельным ячейкам таблицы

. Таким образом, в разных ячейках выравнивание будет разное.

Например

, , , или
  • cols - линия отображается между колонками
  • none - все границы скрываются
  • rows - граница рисуется между строками таблицы, созданными через тег

    • 12. Свойство width="число" - задает ширину таблицы: либо в пикселях, либо в процентах.

    13. Свойство class="имя_класса" - можно указать имя класса, которому принадлежит таблица.

    14. Свойство style="стили" - стили можно задать индивидуально для каждой таблицы.

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

    и доступны такие же параметры, что и для будут иерархично применены ко всем надо писать без "энтеров" и пробелов после .

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

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

    или строкам
    ... ... ...

    2. Свойство background="URL" - задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения.

    Пример

    Пример таблицы
    Столбец 1 Столбец 2

    Преобразуется на странице в следующее:

    В рассмотренном примере наше фоновое изображение находится в папке img (которая находится в той же директории, что и html-страница), а называется изображение fon.gif . Обратите внимание на то, что в теге мы добавили style="color:white;" . Поскольку фон почти черный, то для того, чтобы текст не слился с фоном, мы сделали текст белым.

    3. Свойство bgcolor="цвет" - задает цвет фона таблицы. В качестве цвета можно выбрать любой из всей палитры (см. коды и названия html цветов)

    4. Свойство border="число" - задает толщину рамки таблицы. В предыдущих примерах мы указывали border="1" , что означает толщина рамки - 1 пиксель.

    5. Свойство bordercolor="цвет" - задает цвет рамки. Если border="0" , то рамки не будет и цвет рамки не будет иметь смысла.

    6. Свойство cellpadding="число" - отступ от рамки до содержимого ячейки в пикселях.

    7. Свойство cellspacing="число" - расстояние между ячейками в пикселях.

    8. Свойство cols="число" - число столбцов. Если его не задать, то браузер сам определит число столбцов. Разница лишь в том, что указание этого параметра, скорее всего, ускорит загрузку таблицы.

    9. Свойство frame="параметр" - как отображать границы вокруг таблицы. Может принимать следующие значения:

    • void - не отрисовывать границы
    • border - граница вокруг таблицы
    • above - граница по верхнему краю таблицы
    • below - граница снизу таблицы
    • hsides - добавить только горизонтальные границы (сверху и снизу таблицы)
    • vsides - рисовать только вертикальные границы (слева и справа от таблицы)
    • rhs - граница только на правой стороне таблицы
    • lhs - граница только на левой стороне таблицы

    10. Свойство height="число" - задает высоту таблицы: либо в пикселях, либо в процентах.

    11. Свойство rules="параметр" - где отображать границы между ячейками. Может принимать следующие значения:

    • all - линия рисуется вокруг каждой ячейки таблицы
    • groups - линия отображается между группами, которые образуются тегами
    .

    Атрибуты и свойства

    1. Свойство align="параметр" - задает выравнивание отдельной ячейки таблицы. Может принимать следующие значения:

    • left - выравнивание по левому краю
    • center - выравнивание по центру
    • right - выравнивание по правому краю

    2. Свойство background="URL" - задает фоновое изображение ячейки. Вместо URL должен быть написан адрес фонового изображения.

    3. Свойство bgcolor="цвет" - задает цвет фона ячейки.

    4. Свойство bordercolor="цвет" - задает цвет рамки ячейки.

    5. Свойство char="буква" - задает букву, от которой нужно сделать выравнивание. Значение атрибута align должно быть установлено как char.

    6. Свойство colspan="число" - задает число объединяемых горизонтальных ячеек.

    7. Свойство height="число" - задает высоту таблицы: либо в пикселях, либо в процентах %.

    8. Свойство width="число" - задает ширину таблицы: либо в пикселях, либо в процентах %.

    9. Свойство rowspan="число" - задает число объединяемых вертикальных ячеек.

    10. Свойство valign="параметр" - выравнивание содержимого ячейки по вертикали.

    • top - выравнивание содержимого ячейки по верхнему краю строки
    • middle - выравнивание по середине
    • bottom - выравнивание по нижнему краю
    • baseline - выравнивание по базовой линии
    Примечание 1

    Для тега

    . Параметры для одного тега
    внутри него

    Как сделать, чтобы границы ячеек в таблице не склеивались

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

    ...

    Уважаемый читатель, теперь Вы узнали гораздо больше о html теге table. Теперь советую перейти к следующему уроку.

    Задача

    Создать таблицу и указать её параметры (поля и расстояние между ячейками) через стили.

    Решение

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

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

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

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

    . . .


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

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

    HTML5 IE Cr Op Sa Fx

    Тег table

    Ячейка 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

    Тег table

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

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

    Рис. 2. Поля в ячейках таблицы

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

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

    ...

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

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

    		.

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

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



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





    100

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

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

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

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

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

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

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

    		

 
    
 
    
 2.1
  2.2 
 
    
 
    
    		

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

 
 
    3.1


 3.2



    		

    2.1


  2.2


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