Создание таблицы в html | Как создать свой сайт

Простое создание таблицы в html

Авг-3-2010 Автор: VeryOldMan

К Вашему вниманию шестой  урок курса html верстки сайта.  CSS верстка сайтов здорово потеснила табличную.  Но html таблицы не сдаются.

Табличная верстка сайтов постепенно, но неумолимо уступает свое место блочной, или контейнерной верстке. Зачем тогда нужна верстка табличная? Ну, хотя бы потому, что в Сети достаточно много сайтов сверстанных в таблицах, да и не все спешат перейти на блочную верстку. Пригодится знание табличной верстки и там, где нет возможности применить стили css. Вот хотя бы при создании шаблона для почтовой рассылки Subscribe, да в других почтовых рассылках .  Итак, создание таблицы в html.

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

Основные тэги html таблицы

Тег Таблица<table>…</table>

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

Тег Строка таблицы: <tr>…</tr>

Парный тэг, описывающий строку html таблицы. Число строк html таблицы определяется числом имеющихся в наличии пар тэгов <tr>…</tr>.
Строки могут иметь атрибуты align и valign. Их назначение – описывать визуальное положение содержимого строк в таблице.

Тег Ячейка таблицы: <td>…</td>

Парный тэг, описывающий ячейку таблицы. Обратите внимание на то, что ячейка html таблицыможет быть описана исключительно внутри строки таблицы. Каждая ячейка нумеруется номером колонки, для которой она описывается.

Когда в строке отсутствует одна или несколько ячеек для отдельных колонок, то браузер отобразит пустую ячейку. Расположение html-элементов в ячейке по умолчанию обусловливается атрибутами align=left и valign=middle. Такое расположение можно легко исправить и на уровне описания строки, и на уровне описания ячейки.

Тег Заголовок таблицы: <th>…</th>

Ширина ячейки заголовка равна ширине всей html таблицы. Атрибуты текста в этой ячейке bold иalign=center.

Тег Подпись: <caption>…</caption>

Функция данного тега — описание названия таблицы (подпись). Тэг <caption> обязан находиться внутри : <table>…</table>, но за пределами описания какой-нибудь строки или ячейки. По умолчанию, атрибут тега <caption> — align=top, но для него можно установить атрибут align=bottom. От этих атрибутов зависит, где будет находиться подпись, вверху или внизу таблицы. Центруется подпись всегда по ширине таблицы.

Основные атрибуты html таблицы

Атрибут border
Этот атрибут применяется в тэге table. Если этот атрибут имеется в теге table, рамка таблицы буде прорисована для каждой ячейки и для таблицы в целом. У атрибута border может быть числовое значение, которое определяет ширину рамки, например border=1.

Атрибут align
Этот атрибут применяется внутри тегов <tr> <th> <td> <caption>.
Если он находится внутри тегов <tr> <th> <td>, то он определяет положение html-элементов в этих ячейках по горизонтали. Значения, которые он принимает:

left (слева)
right (справа)
center (по центру).

Если он находится внутри тега <caption>, то задача его – определять положение подписи  html таблицы. То есть где она будет находится, вверху или внизу. По умолчанию — align=top.

Атрибут valign 
Этот атрибут применяется внутри тегов <tr> <th> <td> <caption>.
Если он находится внутри тегов <tr> <th> <td>, то он определяет положение html-элементов в этих ячейках по горизонтали. Значения, которые он принимает:

top (вверху)
bottom (внизу)
middle (посредине)
baseline (все ячейки строки прижимаются вверх)

Атрибут nowrap 
Этот атрибут не дает разбивать данные в ячейке html таблицы на несколько строк. В такой ячейке все данные представляются в виде одной строки.

Атрибут colspan 
Показывает, сколько ячеек будет объединено по горизонтали для данной ячейки. Значение по умолчанию — 1.

Атрибут rowspan 
Показывает, сколько ячеек будет объединено по вертикали для данной ячейки. Значение по умолчанию — 1.

Атрибут colspec 
Это атрибут задает фиксированную ширину колонок. Ширина задается или в символах, или в процентах. К примеру: colspec=”10%”.

Пример html таблицы

Код таблицы:

<table border>
<tr>
<th rowspan=2>Животные</th>
<td>Кошка</td><td align=»right»>10р.</td>
</tr>
<tr>
<td>Собака</td><td align=»right»>20р.</td>
</tr>
</table>

Будет вот такая таблица:

создание таблицы в html

Вот так, кратенько, о том, что такое  создание таблицы в html. Успехов!






Комментариев (1)
  1. Дарья Пишет,

    Спасибо за эти уроки! написано очень хорошо, интересно читать, Вы молодец!!!

Добавить комментарий