Таблицы

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

В этом повествовании мы рассмотрим лишь основные принципы создания таблиц силами HTML, так, как более гибким инструментом при работе с таблицами являются стили.

Основные табличные теги
Для создания таблицы используется тег <table>, который является контейнером для двух других основных табличных тегов <tr> и <td>(<th>). Любая таблица обязательно включает в себя строки(<tr>) и столбцы(<td> или <th>), каждая из последних должна содержать хотя бы одну ячейку.Рассмотрим пример самой простой таблицы:
Запишем а шаблоне следующий HTML-код:
<table  border="1">
<tr>

<th>Первая ячейка</td>
<th>Вторая ячейка</td>
<th>Третья ячейка</td>
</tr>
<tr>

<td>Четвёртая ячейка</td>
<td>Пятая ячейка</td>
<td>Шестая ячейка</td>
</tr>
</table>

В браузере это выглядит так:

тег table

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

Параметры тега <table>
border — определяет толщину рамки таблицы. По умолчанию толщина последней равна 1, если размер определён, то рамка показана в трёхмерном изображении(это наглядно видно на предыдущем рисунке). Но, при добавлении рамке цвета (параметр bordercolor) — она становится плоской.

bordercolor -назначает цвет рамки таблицы.
Пример использования параметров border и bordercolor:
TML-код:
<table  border="2" bordercolor="#cfcc00">
<tr>
<th>Первая ячейка</td>
<th>Вторая ячейка</td>
<th>Третья ячейка</td>
</tr>
<tr>
<td>
Четвёртая ячейка</td>
<td>Пятая ячейка</td>
<td>Шестая ячейка</td>
</tr>
</table>

Полученный в браузере результат:
параметр border

background — указывает на изображение, используемое в качестве фонового рисунка таблицы. Ширина и высота последнего не задаются, поэтому подбирать рисунок необходимо очень тщательно. Если рисунок будет меньше размеров таблицы, то он повторится вправо по горизонтали и вниз, а это может привести к визуальному дизбаллансу.
Рассмотрим пример применения параметра background:
запишем такой код:

<table  width="50" height="50" background="/moneta.jpg">
<tr>
<td>
Пр.1</td>
</tr>
</table>

<table  width="120" height="80" background="/moneta.jpg">
<tr>
<td>
Пример2</td>
</tr>
</table>

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

bgcolor -задаёт цвет фона таблицы. Может использоваться совместно с параметром background для достижения  визуального удобства при загрузке и достижения различных эффектов совместно с фоновым рисунком.
Рассмотрим пример, вставив код в шаблон:

<body>
<table bgcolor="#cfcf00" width="300" height="50">
<tr>
<td>
параметр bgcolor</td>
</tr>
</table>

На рисунке видим результат:

параметр bgcolor

align — определяет выравнивание таблицы относительно края окна браузера.
Имеет три значения: left, center и right. Здесь, думаю, всё понятно без примеров.

cellpadding — задаёт расстояние между рамкой ячейки таблицы и её содержимым. Без применения данного параметра текст прилипает к краю таблицы. Используя параметр cellpadding, надо помнить, что он увеличивает размеры ячейки, добавляя пространство между рамкой и текстом.
Рассмотрим пример:
<table border="3" cellpadding="10"  width="200">
<tr>

<td>Пример использования параметра cellpadding</td>
</tr>
</table>

На рисунке виден результат:
параметр cellpadding

cellspacing — определяет расстояние между границами рамок ячеек. При использовании параметра border, толщина рамки входит в размер отступов.
Пример:

<table cellspacing="8"  border="1" width="300" cellpadding="12" >
<tr>
<td>
cellspacing равен 8 </td>
</tr>
<br>
</table> <table cellspacing="15"  border="1" width="250" cellpadding="12" >
<tr>

<td> cellspacing равен 15 </td>
</tr>
</table>

Реализация кода:
параметр cellspacing
height — Задаёт высоту таблицы. Если данный параметр не указывать, то браузер складывает размеры параметра height всех тегов <td> и <th>, а если они не указаны, то вычисляет высоту содержимого таблицы.

width — определяет ширину таблицы. В случае, когда ширина содержимого превышает значения параметра width, и  его невозможно уместить в таблице, браузер приводит ширину таблицы к размеру ширины содержимого, не обращая внимания на параметр width.

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

Продолжение работы с таблицами в следующем материале.

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

Реклама

Оставить комментарий

Перед отправкой формы:
Human test by Not Captcha