Создание таблиц в HTML




Создание таблиц в HTML. Тег <table> примеры создания таблиц.

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

Создание таблиц в HTML

Конечно сейчас можно полностью написать сайт используя блочный тег <div>, тогда сайт получиться более легкий, так как практически все параметры стилей описываются в одельном файле, который подключается ко всем страницам, но даже в таком варианте очень часто прибегают к использованию таблиц при разработке шаблона. Так что знание и того и другого не только не помешает, но и сделает более универсальными возможности верстальщика.

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

Описание тега <table>.

Посмотрим простой пример таблицы и разберем по пунктам:

структура таблицы.

..таблица
….строка
…….ячейка…ячейка
…./конец строки
..строка
…….ячейка…ячейка
…./конец строки
../таблица
<table>
<tr>
<td>  </td> <td>  </td>
</tr>
<tr>
<td> </td > <td> </td>
</tr>
</table>

Синтаксис таблицы.
ячейка 1 ячейка 2 ячейка 3
ячейка 4 ячейка 5 ячейка 6


Атрибуты таблиц.
<caption> … </caption> Определяет заголовок таблицы.
width Ширина таблицы или ячейки, задается в процентах, или в пикселах.
height Высота таблицы или ячейки, задается в процентах, или в пикселах.
align Определяет выравнивание таблицы: («center»|»right»|»left»|»justify»)
background Задает фоновый рисунок таблицы: (background=»images/foto.gif»)
bgcolor Цвет фона таблицы или ячейки: (bgcolor=»#003399″)
border Толщина рамки в пикселах, если без рамки то задать ноль:(border=»0″)
bordercolor цвет рамки: (bordercolor=»#0066CC»)
cols число колонок в таблице, для более быстрй загрузки браузером — лучше указывать.
cellpadding Отступ от рамки до содержимого ячейки: (cellpadding=»1″)
cellspacing Растояное между ячейками: (cellspacing=»1″ )

Атрибуты применяемые для строк и ячеек.
align устанавливает горизонтальное выравнивание в ячейке: («center»|»right»|»left»)
valign Устанавливает вертикальное выравнивание, по умолчанию «center» — по центру.
bgcolor Цвет фона или ячейки: (bgcolor=»#003399″)
background Задает фоновый рисунок строки или ячейки: (background=»images/foto.gif»)

Атрибуты применяемые только для ячеек.
width Ширина ячейки, задается в процентах, или в пикселах.
height Высота ячейки, задается в процентах, или в пикселах.
rowspan Растягивание ячейки по строкам: <td rowspan=»3″> — ячейка растягивается на три строки.
colspan Растягивание ячейки по вертикали: <td colspan=»3″>- ячейка растягивается на три колонки.
background Задает фоновый рисунок ячейки: (background=»images/foto.gif»)
nowrap Устанавливает размещение текста в одну строку.

Некоторые примечания:

Несколько слов о растягивании ячеек.


Пример применения rowspan=»3″ для ячейки 2
ячейка 1 ячейка 2
ячейка 3
ячейка 4

Применение colspan=»2″ для ячейки 4
ячейка 1 ячейка 2 ячейка 3
ячейка 4

Примеры создания таблиц в HTML.


Пример таблицы №1.

Пример страницы с таблицей №1.

Пример страницы с таблицей №1 можно посмотреть здесь.