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




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

Создание таблиц в 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 можно посмотреть здесь.


по материалам сайта kapon.com.ua

Поделитесь ссылкой на статью...


Всего комментариев - 0.    Можете оставить свой комментарий.


   Login *
   E-mail *
   URL (не обязательно)
- подписаться на сообщения        - я не спамер