Лана : другие произведения.

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

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

СОДЕРЖАНИЕ.

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

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

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

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

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

 

 

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

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

Оболчка таблицы формируется тегами <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т список
Сайт - "Художники" .. || .. Доска об'явлений "Книги"