Лана
Оформление таблиц

Самиздат: [Регистрация] [Найти] [Рейтинги] [Обсуждения] [Новинки] [Обзоры] [Помощь|Техвопросы]
Links
Кожевенное мастерство: сумки, ремни своими руками Юристы. Круглосуточно

СОДЕРЖАНИЕ.

Формирование таблицы.

Оформление таблицы.

Выравнивание содержимого ячеек.

Оформление границ таблицы.

Основные параметры таблицы

 

 

Стихи или прозу можно оформить, используя различные таблицы. Рассмотрим способы создания этих таблиц и их основные элементы.

Формирование таблицы.

Оболчка таблицы формируется тегами <table> ... </table>, внутри которых задаются строки и ячейки таблицы.
Строки таблицы формируются тегами <tr>...</tr>, каждая строка может быть разбита на ячейки (столбцы) с помощью тегов <td>...</td>.

Схематично построение таблицы можно представить следующим образом:

Пример 1.

<table>     -  задаём таблицу
<tr>    -  задаём первую строку таблицы

<td>    -  задаём первый столбец-ячейку
</td>    -  закрываем столбец-ячейку

<td>    -  задаём второй столбец-ячейку
</td>    -  закрываем столбец-ячейку

<td>    -  задаём третий столбец-ячейку
</td>    -  закрываем столбец-ячейку

</tr>    -  закрываем первую строку таблицы
<tr>    -  задаём вторую строку таблицы

<td>    -  задаём первый столбец-ячейку
</td>    -  закрываем столбец-ячейку

<td>    -  задаём второй столбец-ячейку
</td>    -  закрываем столбец-ячейку

<td>    -  задаём третий столбец-ячейку
</td>    -  закрываем столбец-ячейку

<tr>     -  закрываем вторую строку таблицы

</table>    -   закрываем таблицу

 

Таблица, заданая в Примере 1 будет выглядеть:

   
 - задаём первый столбец-ячейку  - задаём второй столбец-ячейку  - задаём третий столбец-ячейку
 - задаём первый столбец-ячейку  - задаём второй столбец-ячейку  - задаём третий столбец-ячейку

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

Сделаем выравнивание таблицы по центру. Для этого добавим в тег <table> параметр выравниванивания align. Эта запись будет иметь вид: <table align="center">. Получаем таблицу:

 
 - задаём первый столбец-ячейку  - задаём второй столбец-ячейку  - задаём второй столбец-ячейку
 - задаём первый столбец-ячейку  - задаём второй столбец-ячейку  - задаём третий столбец-ячейку

Для того, чтобы таблица отличалась от окружающего текста, добавим в тег <table> параметр создания границы border, который определяет толщину границы в пикселях. Самая маленькая толщина border="1". Получаем строчку: <table align="center" border="1">. Сама таблица при этом примет вид:

 
 - задаём первый столбец-ячейку  - задаём второй столбец-ячейку  - задаём второй столбец-ячейку
 - задаём первый столбец-ячейку  - задаём второй столбец-ячейку  - задаём третий столбец-ячейку

А теперь зададим ширину и высоту таблицы, чтобы она перестала зависить от вложенного в неё содержимого. Ширина таблицы задаётся в пикселях параметром width, высота - параметром height. Эти параметры придадут блоку таблицы вид:

Пример 2 .

<table align="center" border="1" width="400" height="200">     -  задаём таблицу
<tr>    -  задаём первую строку таблицы

<td>    -  задаём первый столбец-ячейку
</td>    -  закрываем столбец-ячейку

<td>    -  задаём второй столбец-ячейку
</td>    -  закрываем столбец-ячейку

<td>    -  задаём третий столбец-ячейку
</td>    -  закрываем столбец-ячейку

</tr>    -  закрываем первую строку таблицы
<tr>    -  задаём вторую строку таблицы

<td>    -  задаём первый столбец-ячейку
</td>    -  закрываем столбец-ячейку

<td>    -  задаём второй столбец-ячейку
</td>    -  закрываем столбец-ячейку

<td>    -  задаём третий столбец-ячейку
</td>    -  закрываем столбец-ячейку

<tr>     -  закрываем вторую строку таблицы

</table>    -   закрываем таблицу

 

Получаем таблицу:

 - задаём первый столбец-ячейку  - задаём второй столбец-ячейку  - задаём второй столбец-ячейку
 - задаём первый столбец-ячейку  - задаём второй столбец-ячейку  - задаём третий столбец-ячейку

Такое задание ширины и высоты ячейки делает все ячейки в таблице одинаковыми. Можно задавать ширину или высоту отдельно для каждой строки или столбца. Например, задаём разную выоту строк:

Пример 3 .

<table border="1" align="center">     -  задаём таблицу
<tr>    -  задаём первую строку таблицы

<td height="60">    -  задаём первый столбец-ячейку
</td>    -  закрываем столбец-ячейку

</tr>    -  закрываем первую строку таблицы
<tr>    -  задаём вторую строку таблицы

<td height="30">    -  задаём первый столбец-ячейку
</td>    -  закрываем столбец-ячейку

<tr>     -  закрываем вторую строку таблицы
<tr>    -  задаём третью строку таблицы

<td height="100">    -  задаём первый столбец-ячейку
</td>    -  закрываем столбец-ячейку

<tr>     -  закрываем третью строку таблицы

</table>    -   закрываем таблицу

В результате получим:

 - задаём первый столбец-ячейку
 - задаём первый столбец-ячейку
 - задаём первый столбец-ячейку

Или зададим разную ширину столбцов:

Пример 4 .

<table align="center" border="1">     -  задаём таблицу
<tr>    -  задаём первую строку таблицы

<td width="100">    -  задаём первый столбец-ячейку
</td>    -  закрываем столбец-ячейку

<td width="150">    -  задаём второй столбец-ячейку
</td>    -  закрываем столбец-ячейку

<td width="250">    -  задаём третий столбец-ячейку
</td>    -  закрываем столбец-ячейку

</tr>    -  закрываем первую строку таблицы

</table>    -   закрываем таблицу

Результат:

 - задаём первый столбец-ячейку  - задаём второй столбец-ячейку  - задаём второй столбец-ячейку

Высота строки в данном примере формируется по размеру текста. Требуемую высоту можно задать внутри тега <table>, как было показано в Примере 2.

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

Для того, чтобы получить такие таблицы, их ширину задают в процентах, например width="80%".

 

Оформление таблицы.

Займёмся теперь оформлением таблицы.

Что желательно сделать в первую очередь? На мой взгляд, выровнять содержимое таблицы по центру. Для этого воспользуемся элементом выравнивания align, применив его к элементам ячейки. Воспользуемся Примером 2 :

Пример 5 .

<table align="center" border="1" width="400" height="200">     -  задаём таблицу
<tr>    -  задаём первую строку таблицы

<td align="center">    -  задаём первый столбец-ячейку
</td>    -  закрываем столбец-ячейку

<td align="center">    -  задаём второй столбец-ячейку
</td>    -  закрываем столбец-ячейку

<td align="center">    -  задаём третий столбец-ячейку
</td>    -  закрываем столбец-ячейку

</tr>    -  закрываем первую строку таблицы
<tr>    -  задаём вторую строку таблицы

<td align="center">    -  задаём первый столбец-ячейку
</td>    -  закрываем столбец-ячейку

<td align="center">    -  задаём второй столбец-ячейку
</td>    -  закрываем столбец-ячейку

<td align="center">    -  задаём третий столбец-ячейку
</td>    -  закрываем столбец-ячейку

<tr>     -  закрываем вторую строку таблицы

</table>    -   закрываем таблицу

Что нам даст таблицу:

- задаём первый столбец-ячейку
- задаём второй столбец-ячейку
- задаём второй столбец-ячейку
- задаём первый столбец-ячейку
- задаём второй столбец-ячейку
- задаём третий столбец-ячейку

Теперь изменим цвет ячеек таблицы. Цвет ячейки задают параметром bgcolor, фон ячейки - параметром background. При задании цвета выбирают из таблицы цветов понравившийся, и строят конструкцию вида:

bgcolor="#FFCCCC"

При задании фона выбирают адрес фона, например:

background="http://pushinka5.narod.ru/11pe3.jpg"

Пусть ячейки в первой строке будут иметь разный цвет, а во второй строке - разный фон:

Пример 6 .

<table align="center" border="1" width="400" height="200">     -  задаём таблицу
<tr>    -  задаём первую строку таблицы

<td bgcolor="#00FFFF" align="center">    -  задаём первый столбец-ячейку, заливаем голубым цветом
</td>    -  закрываем столбец-ячейку

<td bgcolor="#FFFF00" align="center">    -  задаём второй столбец-ячейку, заливаем жёлтым цветом
</td>    -  закрываем столбец-ячейку

<td bgcolor="#FFCCCC" align="center">    -  задаём третий столбец-ячейку, заливаем розовым цветом
</td>    -  закрываем столбец-ячейку

</tr>    -  закрываем первую строку таблицы
<tr>    -  задаём вторую строку таблицы

<td background="http://pushinka5.narod.ru/11pe3.jpg" align="center">    -  задаём первый столбец-ячейку, фон - облака
</td>    -  закрываем столбец-ячейку

<td background="http://pushinka5.narod.ru/5ul2.gif" align="center">    -  задаём второй столбец-ячейку, фон - звёзды
</td>    -  закрываем столбец-ячейку

<td background="http://pushinka5.narod.ru/bgp.gif" align="center">    -  задаём третий столбец-ячейку, фон - пузыри
</td>    -  закрываем столбец-ячейку

<tr>     -  закрываем вторую строку таблицы

</table>    -   закрываем таблицу

 

В результате получим:

- задаём первый столбец-ячейку - задаём второй столбец-ячейку - задаём второй столбец-ячейку
- задаём первый столбец-ячейку - задаём второй столбец-ячейку - задаём третий столбец-ячейку

Можно залить всю таблицу одним цветом (или фоном), а в одну из ячеек вставить картинку с помощью параметра img. При этом задаётся адрес картинки либо из сети, либо "залитый" на СИ (в последнем случае адрес картинки представляет собой упрощённую форму):

img="http://letopisi.ru/images/thumb/c/c6/Koten.jpg/180px-Koten.jpg"

Блок такой таблицы:

Пример 7 .

<table width="400" height="200" border="1" align="center" bgcolor="#00FF00">     -  задаём таблицу, заливаем её зелёным цветом
<tr>    -  задаём первую строку таблицы

<td align="center">    -  задаём первый столбец-ячейку
</td>    -  закрываем столбец-ячейку

<td align="center">    -  задаём второй столбец-ячейку
</td>    -  закрываем столбец-ячейку

<td align="center">    -  задаём третий столбец-ячейку
</td>    -  закрываем столбец-ячейку

</tr>    -  закрываем первую строку таблицы
<tr>    -  задаём вторую строку таблицы

<td align="center">    -  задаём первый столбец-ячейку
</td>    -  закрываем столбец-ячейку

<td align="center"><img src="http://letopisi.ru/images/thumb/c/c6/Koten.jpg/180px-Koten.jpg">    -  задаём второй столбец-ячейку, вставляем картинку
</td>    -  закрываем столбец-ячейку

<td align="center">    -  задаём третий столбец-ячейку
</td>    -  закрываем столбец-ячейку

<tr>     -  закрываем вторую строку таблицы

</table>    -   закрываем таблицу

 

При этом, если выбранная картинка больше ячейки, то ширина и высота ячеейк будет определятся картинкой:

- задаём первый столбец-ячейку - задаём второй столбец-ячейку - задаём второй столбец-ячейку
- задаём первый столбец-ячейку - задаём третий столбец-ячейку

Придать ячейкам требуемый первоначальный вид можно заданием размера рисунка:

<img src="http://letopisi.ru/images/thumb/c/c6/Koten.jpg/180px-Koten.jpg" width="120" height="95">

и принудительным заданием размера ячеек, как показано в примерах 3 и 4:

- задаём первый столбец-ячейку
- задаём второй столбец-ячейку - задаём второй столбец-ячейку
- задаём первый столбец-ячейку - задаём третий столбец-ячейку

 

Выравнивание содержимого ячеек.

Для выравнивания в ячейках по вертикали служит элемент align. При этом содержимое может выравниваться по левому краю (обычно это задается по умолчанию):
align="left"
по центру:
align="center"
и по правому краю:
align="right"

В блоке таблицы это будет выглядеть следующим образом:

Пример 8 .

<table width="200" height="250" border="1" align="center">     -  задаём таблицу
<tr>    -  задаём первую строку таблицы

<td>    -  задаём первый столбец-ячейку
</td>    -  закрываем столбец-ячейку

</tr>    -  закрываем первую строку таблицы
<tr>    -  задаём вторую строку таблицы

<td align="center">    -  задаём первый столбец-ячейку
</td>    -  закрываем столбец-ячейку

<tr>     -  закрываем вторую строку таблицы
<tr>    -  задаём третью строку таблицы

<td align="right">    -  задаём первый столбец-ячейку
</td>    -  закрываем столбец-ячейку

<tr>     -  закрываем третью строку таблицы

</table>    -   закрываем таблицу

Результат:

выравнивае
по
левому
краю
выравнивание
по
центру
выравнивание
по
правому
краю

 

Для выравнивания содержимого ячеек по вертикали служит элемент valign. При этом выравнивание по верхней границе:

valign="top"
по центру (обычно задано по умолчанию):
valign="middle"
и по правому краю:
valign="bottom"

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

Пример 9 .

<table align="center" width="600" height="100" border="1">     -  задаём таблицу
<tr>    -  задаём первую строку таблицы

<td valign="top">    -  задаём первый столбец-ячейку
</td>    -  закрываем столбец-ячейку

<td>    -  задаём второй столбец-ячейку
</td>    -  закрываем столбец-ячейку

<td valign="bottom">    -  задаём третий столбец-ячейку
</td>    -  закрываем столбец-ячейку

</tr>    -  закрываем первую строку таблицы

</table>    -   закрываем таблицу

Результат:

верхняя граница центр нижняя граница

Для того, чтобы содержимое ячейки не прижималось к границам, используют элемент cellpadding. Покажем, как этот элемент повлияет на текст, расположенный внутри ячейки. Ширину ячейки зададим width="100", а высота будет выравниваться по содержимому.

cellpadding="0"
cellpadding="10"
cellpadding="15"
cellpadding="20"
т е к с т е к с т е к с т е к с т е к с т е к с т е к с т е к с т е к с т е к с
т е к с т е к с т е к с т е к с т е к с т е к с т е к с т е к с т е к с т е к с
т е к с т е к с т е к с т е к с т е к с т е к с т е к с т е к с т е к с т е к с
т е к с т е к с т е к с т е к с т е к с т е к с т е к с т е к с т е к с т е к с

Параметр cellpadding задают внутри оболочки <table>:

Пример 10 .

<table align="center" width="200" height="100" border="1" bgcolor="#FFFFFF" cellpadding="1">     -  задаём таблицу
<tr>    -  задаём первую строку таблицы

<td>    -  задаём первый столбец-ячейку
</td>    -  закрываем столбец-ячейку

</tr>    -  закрываем первую строку таблицы

</table>    -   закрываем таблицу

 

 

Оформление границ таблицы.

Что можно сделать с границей таблицы? Во-первых её можно сделать либо толще, либо невидимой. Толщину изменяют уже знакомым элементом border. Если задать значение border="0", границы таблицы станут невидимыми:

 

 

Изменяя толщину границы получим следующую картину:

border="0"
border="1"
border="2"
border="4"
border="6"
border="8"
 
 
 
 
 
 

По умолчанию цвет границы задаётся серым. Его можно изменить с помощью параметра bordercolor. Сформируем ячейку таблицы, задав толщину границы border="7", цвет границы - синий: bordercolor="#0000FF", заливка всей таблицы - белым цветом: bgcolor="#FFFFFF".

Пример 11 .

<table align="center" width="200" height="100" border="7" bordercolor="#0000FF" bgcolor="#FFFFFF">     -  задаём таблицу
<tr>    -  задаём первую строку таблицы

<td>    -  задаём первый столбец-ячейку
</td>    -  закрываем столбец-ячейку

</tr>    -  закрываем первую строку таблицы

</table>    -   закрываем таблицу

Результат:

 

Если таблица включает несколько ячеек, то можно изменять размеры внутренних разделительных линий. Эта операция проводится с помощью параметра cellspacing. Покажем на примере таблицы из двух ячеек, ширина границы которой border="2", влияние этого параметра:

cellspacing="0"
cellspacing="1"
cellspacing="3"
cellspacing="5"
cellspacing="6"
   
   
   
   
   

На Примере 11 покажем формирования таблицы из двух ячеек с увеличением разделительной линии cellspacing="5":

Пример 12 .

<table align="center" width="200" height="100" border="7" bordercolor="#0000FF" bgcolor="#FFFFFF" cellspacing="5">     -  задаём таблицу
<tr>    -  задаём первую строку таблицы

<td>    -  задаём первый столбец-ячейку
</td>    -  закрываем столбец-ячейку

<td>    -  задаём второй столбец-ячейку
</td>    -  закрываем столбец-ячейку

</tr>    -  закрываем первую строку таблицы

</table>    -   закрываем таблицу

Результат:

   

 

Основные параметры таблицы.

Для удобства пользования соберём все выше упомянутые параметры в таблицу.

Ширина таблицы в пикселах или процентах.
Высота таблицы в пикселах.

Определяет выравнивание таблицы по вертикали.

Определяет выравнивание таблицы по горизонтали.

Отступ от рамки до содержимого ячейки в пикселах.
Задает фоновый рисунок в таблице.
Цвет фона таблицы.
Толщина рамки в пикселах.
Расстояние между ячейками в пикселах в пикселах .
Цвет рамки.

 
Связаться с программистом сайта.

Новые книги авторов СИ, вышедшие из печати:
О.Болдырева "Крадуш. Чужие души" М.Николаев "Вторжение на Землю"

Как попасть в этoт список

Кожевенное мастерство | Сайт "Художники" | Доска об'явлений "Книги"