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

Теги Html таблицы и дополнительные тэги Colspan, Cellpadding, Cellspacing, Rowspan

Здравствуйте уважаемые читатели блога KtoNaNovenkogo.ru. Предлагаю вашему вниманию очередную статью из рубрики Html для чайников, которая будет посвящена тому, что из себя представляет html таблица, какие теги используются для ее создания (Tr, Th, Td, Table, Colspan, Cellpadding, Cellspacing), как задать фон и границы таблицы и многое другое.

Несмотря на то, что табличная верстка в современном языке Html планомерно вытесняется div версткой (блочной), знать основные Html тэги и возможности настройки таблиц в Html все равно надо. Например, в движке форума SMF для Joomla табличная верстка по-прежнему используется, и если вы захотите внести какие-либо изменения во внешний вид страниц форума на SMF, то знания Html тегов таблиц вам в этом существенно помогут.

Даже простейшая вставка кода счетчика посещений может потребовать от вас понимания табличной верстки и навыков создания таблиц в html. Напомню вам, что мы уже успели рассмотреть Html формы и то, как в Html вставить теги Img и ссылки.

Html верстка на таблицах — не перспективная

Что примечательно — табличная верстка значительно проще в освоении, чем верстка блочная (Div верстка). Так почему же она сейчас не популярна и все стараются перейти на блочную верстку? Тут все дело в отношении поисковых систем к сайтам, созданным с помощью табличной и блочной верстки.

Поисковикам больше по вкусу верстка блочная и причина этого кроется в очень малом количестве Html тегов при блочной верстке, которое используется для достижения нужного результата. Если сделать тоже самое при помощи таблиц, то количество Html тегов в исходном коде страниц сайта будет существенно большим, чем в случае блочной верстки.

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

Описание же внешнего вида этого содержимого осуществляется в другом файле, который поисковики не индексируют. Это так называемые файлы каскадных таблиц стилей (CSS). Там может описываться положение данного DIV блока относительно других блоков на странице; внешний вид содержимого данного блока, например, параметры шрифта текста, выравнивание, отступы и прочее.

В табличной же верстке, и Html теги таблицы (Table, TR, TD, TH) и их атрибуты, описывающие внешний вид содержимого таблиц входят в состав исходного Html кода страниц сайта, что естественно загрязняет проиндексированный поисковыми системами текст вашего сайта множеством Html тэгов ( Самостоятельное продвижение, раскрутка и оптимизация сайта и Бесплатная раскрутка сайта). Теперь, разобрав все недостатки табличной верстки, можно приступить к более подробному рассмотрению принципов создания и настройки таблиц в HTML.

Теги Table, TR, TD, TH, создание таблиц в HTML

В недалеком прошлом Html теги таблицы играли основную роль в создании (верстке) html-страниц практически любого сайта. С помощью тегов таблиц можно придать странице сайта любую нужную компоновку. Для создания таблицы в HTML коде используется тег Table.

Дальше уже идет разбиение всей области отведенной для таблицы, на строки с помощью Html тегов TR, а уже эти строки разбиваются на отдельные ячейки с помощью Html тегов TH, TD. При этом, Html тег TH следует использовать для создания ячеек с заголовками (содержимое таких ячеек будет отображаться в таблице полужирным шрифтом и выравниваться по центру), а тег TD — для обычных рядовых ячеек Html таблиц с данными.

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

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

Теги Table, TR, TD, TH парные. Содержимое Html таблицы, строки и ячейки заключается в соответствующие открывающие и закрывающие теги Table, TR, TD, TH. Теги открытые внутри других тегов должны быть закрыты так же внутри, без перекрытия. При табличной верстке не сложно запутаться в открывающих и закрывающих Html тэгах таблиц, ячеек и строк. Читается код с табличной версткой не всегда просто. .

Теги задания границ и размеров Html таблицы

Если ваша Html таблица невидимая (без рамки вокруг таблицы и ячеек) и используется именно для позиционирования элементов на странице сайта, то для визуализации этой таблицы на время работы над Html кодом можно прописать в открывающем теге Table атрибут Border=1. В этом случае вы увидите границы Html таблицы, строк и ячеек. После окончания работы над Html кодом можно прописать Border=0, для скрытия границ Html таблицы и ячеек.

Для задания цвета рамки Html таблицы можно использовать атрибут Bordercolor с названием или Html кодом цвета в качестве параметра (например, bordercolor="red" для задания красного цвета границы таблицы).

Ширину и высоту Html таблицы или ячейки можно задать с помощью атрибутов Width и Height, прописав им значения в абсолютных единицах (например, WIDTH=223, для задания ширины в 223 пиксела) или в относительных единицах, выраженных в процентах.

Но размер Html таблицы или ячейки не может быть меньше, чем размещаемое внутри содержимое. При задании размера ячеек в Html можно указать размер только для одной ячейки в столбце, а остальные будут отображаться исходя из этого значения.

<table width="122">

 <tr>

  <td><p>Ширина одноячеечной таблицы в  122 пикселей</p></td>

 </tr>

</table>

<br>

<table  border=1 width="70%">

 <tr>

  <td><p>Ширина одноячеечной таблицы в  70%</p></td>

 </tr>
</table>

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

Для выравнивания в Html таблице, относительно края окна браузера, применяется Html атрибут Align с нужным параметром выравнивания (left | center | right). Например, однострочная таблица с тремя ячейками и выравниванием по центру будет иметь такой код:

<table width="500" align="center">

<tr>

<td>Cellspacing</td>
<td>Colspan</td>
<td>Cellspacing</td>

</tr>
</table>

Обращаю ваше внимание, что использование такого способа задания внешнего вида таблицы в Html (с помощью атрибутов ширины, выравнивания и т.д.) на данный момент не совсем правильное. Сейчас принято описывать внешний вид Html таблицы в файле CSS (таблице каскадных стилей) с помощью создания свойств (правил) для таблиц и ячеек.

Как это делается я расскажу чуть позже, а сейчас продолжу рассказывать про не валидные (не рекомендуемые) способы, т.к. вы можете встретить в коде какого-либо движка (например, в коде SMF) именно такой способ описания внешнего вида и положения элементов в Html таблице. А раз это еще встречается, то вы должны уметь и знать как с таким Html кодом работать. Продолжим.

Cellpadding и Cellspacing — границы таблицы

Для создания отступа от текста до границ ячейки Html таблицы и увеличение расстояния между ячейками используют Html атрибуты Cellpadding и Cellspacing. Html атрибут Cellpadding задает размеры полос чистого пространства внутри ячейки, отделяя ее содержимое от внешних границ.

Если этот атрибут не указан в Html теге Table, то его значение принимается по умолчанию равным 1. Html атрибут таблицы Cellspacing дает возможность задавать размер полосы чистого пространства между ячейками. Если этот атрибут не указан в Html теге Table, то его значение принимается по умолчанию равным 2.

Например, без указания этих атрибутов в теге Table Html таблица выглядит так:

<table border="1" width="600"  align="center" bordercolor="red"  >

<tr>
<td width="200"><p>Тег Table</p></td>
<td width="200"><p>Тег Tr</p></td>
<td width="200"><p>Тег Td</p></td>
</tr>

<tr>
<td width="200"><p>Тег Th</p></td>
<td width="200"><p>Тег Colspan</p></td>
<td width="200"><p>Тег Rowspan</p></td>
</tr>
</table>

А при добавлении в Html тег Table атрибутов Cellpadding и Cellspacing равных 10 пикселям таблица станет выглядеть так:

<table border="1" width="600" align="center" bordercolor="red" Cellpadding="10" Cellspacing="10" >

<tr>
<td width="200"><p>Тэг Cellpadding</p></td>
<td width="200"><p>Тэг Cellspacing</p></td>
<td width="200"><p>Html тег Table</p></td>
</tr>

<tr>
<td width="200"><p>Теги таблицы</p></td>
<td width="200"><p>Тэги таблицы</p></td>
<td width="200"><p>Rowspan</p></td>
</tr>
</table>

Colspan и Rowspan — объединение ячеек Html таблицы

Для чего может понадобиться объединение ячеек Html таблицы? Например, в Html коде вашего сайта какой-либо элемент дизайна страницы позиционируется в трех ячейках одной строки Html таблицы. Вы хотите добавить еще одну строку сверху, но разместить в ней только одну ячейку (например, для счетчика посещений сайта в SMF). Если вы просто добавите Html код еще одной строки с одной ячейкой внутри таблицы (тега Table) то получите следующее:

<table border="1" width=400 >
<tr>
<td>444</td>
</tr>
 <tr>
  <td >1111</td>
  <td>22222</td>
  <td>33333</td>
 </tr>

Но добавив в Html тег TD этой новой ячейки новый атрибут Colspan с параметром 3 и атрибут Align для выравнивания содержимого этой ячейки по центру, мы получим следующий вид Html таблицы:

<table border="1" width=400 >
<tr>
<td colspan=3 align=center>444</td>
</tr>
 <tr>
  <td >1111</td>
  <td>22222</td>
  <td>33333</td>
 </tr>

Итак, с помощью атрибутов Colspan, Rowspan можно объединять в Html таблице ячейки столбца или строки в одну большую ячейку. Атрибут Colspan прописывается в теге TH или TD — он позволяет осуществить слияние ячеек нескольких столбцов одной строки в Html таблице (сколько именно столбцов сольются вы указываете в параметре атрибута Colspan).

Атрибут Rowspan позволяет объединить несколько строк в одном столбце Html таблицы (сколько именно строк сольются вы указываете в параметре атрибута Rowspan). Но в этих операциях слияния очень легко запутаться. Например, не сразу понятно, что такой Html код создаст нам такую таблицу:

<table border="1" width=400 height=400>

 <tr>
  <td rowspan="3">1111</td>
  <td colspan="2">22222</td>
  <td colspan="2">33333</td>
 </tr>

 <tr>
  <td>44444</td>
  <td colspan="2" rowspan="2">55555</td>
  <td>66666</td>
 </tr>

 <tr>
  <td>77777</td>
  <td>88888</td>
 </tr>

 <tr>
  <td colspan="5">99999</td>
 </tr>
</table>

Фон Html таблиц и вложенные таблицы

С помощью атрибута Bgcolor можно задать цвет фона Html таблицы (прописав его в Html теге Table), отдельной ячейки (в в Html теге TD или TH) или строки (в теге TR). Для этого нужно прописать этот атрибут Bgcolor в Html теге таблицы, ячейки или строки соответственно. Цвет фона Html таблицы можно задать как с использованием наименования цвета (red, black и т.д.), так и с использованием шестнадцатеричного значения кода цвета со знаком # (#ffffff).

При помощи атрибута Background можно задать графический фон Html таблицы (в качестве фона будет использоваться изображение, путь к которому прописывается в качестве параметра атрибута BACKGROUND). Для создания вложенной таблицы достаточно просто вставить между Html тегами нужной ячейки Html код вложенной таблицы. Как это работает вы можете посмотреть на примере:

<table  align="left"  background="bgkletka.gif" border="1" width="800" Cellpadding="10" Cellspacing="5" >

<tr align="center">
<td rowspan="2" width="400">

        <table bgcolor="tan" border="1" bordercolor="green" Cellpadding="0" Cellspacing="0"                   wight="100%" >

          <tr>

            <td>
             <p>Фон Html таблицы</p>
               </td> 

          <td>
             <p>Создание таблиц</p>
                 </td> 

           </tr>

           <tr>

              <td>
                  <p>Как сделать таблицу</p>
                       </td> 

              <td>
                    <p>Тэги и атрибуты Th, Tr, Colspan, Cellpadding, Cellspacing, Rowspan</p>
                          </td> 

             </tr>

             </table>

<td width="200"><p>Cellspacing</p></td>
<td width="200"><p>Cellpadding	</p></td>
</tr>

<tr>
<td width="200"><p>Colspan</p></td>
<td width="200"><p>Rowspan</p></td>
</tr>
<tr>
<td colspan="3"><p>Table</p></td>
</tr>
</table>

В этой Html таблице фон встроенной таблицы задается с помощью атрибута bgcolor="tan", где tan — название цвета. А фон основной Html таблицы задается атрибутом background="bgkletka.gif", где прописан относительный путь до графического файла, которым будет заполнен фон Html таблицы.

Оформление Html таблицы с помощью свойств CSS

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

Проще будет открыть на редактирование ваш файл CSS (если на вашем сайте используется блочная верстка) и дописать в него несколько CSS правил для Html таблиц и ячеек таблиц. Эти CSS правила позволят унифицировать внешний вид всех Html таблиц на вашем сайте. Проще всего будет написать CSS правила оформления для всех Html тегов Table, TR и TH. Выглядеть это может примерно так:

table {
    float: none;
    width: 100%;
     text-align: center;
    border: 1px solid Silver;
    font-size: 10px;
    margin: 20px 0px 20px 0px;
   background-color: #F3F3F3;
}
td {
    border: 1px solid Silver;
    font-size: 10px;
    text-align: center;
	padding: 10px;
}
th {
    border: 1px solid Silver;
    font-size: 10px;
    text-align: center;
	padding: 10px;
	font-weight: bolder;
}

Я пока что еще не рассказывал про параметры CSS, поэтому вкратце поясню данный код:

• строка width: 100% задает ширину Html таблицы равной ширине всей области отведенной доя контента
• в строке border: 1px solid Silver задается рамка для всей Html таблицы — шириной в один пиксель, сплошная, серого цвета
• в строке font-size: 10px; задается размер шрифта для текста внутри Html таблицы
• margin: 20px 0px 20px 0px; — задает отступ сверху и снизу от Html таблицы до соседних элементов страницы
• background-color: #F3F3F3; — задает цвет фона Html таблицы
• padding: 10px; — задает отступ от содержимого ячейки до ее границ
• font-weight: bolder;— задает жирный шрифт для ячеек заголовков (TH)

Теперь любая Html таблица на вашем сайте будет выглядеть в соответствии с этими правилами, описанными в файле CSS вашего шаблона. Достаточно будет просто создать каркас таблицы ( с помощью Html тегов Table, TR, TH) без использования атрибутов отвечающих за ее оформление:

<table>
<tr>
<td colspan=3 align=center>444</td>
</tr>
 <tr>
  <td >1111</td>
  <td>22222</td>
  <td>33333</td>
 </tr>
</table>

Можно прописать в файле CSS не общие свойства для всех Html тегов Table, TH, TD, а свойства для класса, который потом вы сможете использовать по мере надобности для придания Html таблице нужного вида. Класс прописывается в Html тег Table или TR как обычный атрибут, в качестве параметра которого будет выступать название класса. Например:

<table class="extra">

Можете также посмотреть видео «Таблицы HTML»:

У Евгения Попова имеется видекурс по PHP+MySQL, который стоит того, чтобы с ним ознакомиться.

Можете посмотреть бесплатные видеоуроки по Html и CSS, а так же можете ознакомиться с другими статьями:

• Верстка сайта
  • Html для чайников
  • Что такое язык Html, валидатор W3C и Html тэги
  • Зачем нужен Doctype и комментарии в html
  • Спецсимволы (мнемоники) в Html, символ неразрывного пробела
  • Как использовать цвета в Html коде
  • Как в Html код вставить картинку и html ссылку
  • Как сделать в Html список с помощью тегов UL, OL, DL и LI
  • Html таблица и теги Tr, Th, Td, Table
  • Html формы - теги Form и Input
  • Div верстка сайта в Html и CSS ч.1
  • Html и CSS верстка сайта на DIV ч.2
  • Блочная верстка

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

• Таблицы в Html (Table, Tr, Th, Td ), табличная верстка и теги Col, Tbody, Caption
• Html формы для сайта, теги Form и Input (Button, Checked, Value, Checkbox, Radio, Checkbox, Submit) — чекбоксы, Html кнопки и радиокнопки
• Как вставить в HTML ссылку и картинку — теги IMG для вставки изображения и html теги гиперссылки A
• Что такое язык Html, validator W3C и тэги, список Html тегов в W3C и структура документа (body, head)
• Html теги H1-H6 (заголовки), Hr (линия), P (абзац), Br (перенос строки) и атрибуты Html тегов (align, width)
• Select, Option, Textarea, Label, Fieldset, Legend — теги Html формы выпадающих списков и текстового поля
• Теги UL, OL, LI, DL — Html списки