Создание собственного сайта

Каталог статей

Главная » Статьи » Мои статьи
Таблицы в HTML. Свойства таблиц.

Таблицы в HTML. Свойства таблиц.

Этой статьей заканчивается теоретический материал по таблицам. Из нее вы сможете получить знания о всех самых значимых свойствах таблиц в HTML. Применяя эти знания на практике, вы получите возможность на свое усмотрение изменять внешний вид, структуру, расположение на странице, содержимое той или иной таблицы и так далее.

Ранее мы уже начали использовать в коде два параметра — border и rules, но пока не давалось подробных объяснений, для чего они нужны: не было подходящего момента. Зато сейчас - самое время. Дело в том, что по умолчанию ни таблица ни ячейка не имеют визуальной границы. Для того, чтобы она присутствовала, нужно приказать браузеру показывать ее. Для отображения внешней рамки таблицы, необходимо задать параметр border в теге <table>.

Внешние и внутренние границы

border — параметр тега <table>, позволяющий отобразить для таблицы внешнюю границу указанной толщины.

Создайте таблицу в два столбца и две строки, установив для тега <table> значение параметра border равным 3, и посмотрите, что получится.

<table border="3" rules="all">
  <tr>
    <td>Первая ячейка</td>
    <td>Вторая ячейка</td>
  </tr>

  <tr>
    <td>Третья ячейка</td>
    <td>Четвертая ячейка</td>
  </tr>
</table>

Результат должен быть примерно таким:

Первая ячейка Вторая ячейка
Третья ячейка Четвертая ячейка

Повторюсь, что указанный параметр действует только на внешнюю рамку таблицы. Для управления внутренними границами (границами ячеек) HTML дает гораздо меньше возможностей. Тем не менее, на это случай тоже есть свой параметр, и он называется rules. Однако, в отличие от border, этот параметр может принимать только два значения.

rules — параметр тега <table>, позволяющий отображать внутренние линии таблицы. Может принимать два значения: all (отображаются все внутренние границы) и none (ни одна внутренняя граница не отображается).

Именно для отображения всех внутренних направляющих мы и использовали ранее параметр rules со значением all. Движемся дальше.

Благодаря параметру border вы можете менять толщину внешней границы. Но вдруг вам не нравится цвет этой рамки? Нет проблем:

bordercolor — параметр тега <table>, позволяющий изменить цвет внешней рамки таблицы.

Добавьте в код вашей таблицы еще и параметр bordercolor со значением red. После этого тег <table> должен стать таким:

<table border="1" rules="all" bordercolor="red">

Проверьте результат операции в браузере. Вот что должно у вас получиться:

Первая ячейка Вторая ячейка
Третья ячейка Четвертая ячейка

Фон таблицы: однородный и текстурный

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

bgcolor — параметр тега <table>, позволяющий задать цвет фона таблицы.

Кстати, вы уже знакомы с этим параметром. О нем шла речь, когда вы изучали тег <body>. Как видите, один и тот же параметр может быть применим к разным тегам. Такая "повторяемость" —  обычное дело для языка HTML.

Во втором случае в качестве фона требуется установить текстуру. И снова уже знакомый вам параметр:

background — параметр позволяющий установить фоновый рисунок для таблицы.

В качестве примера я выбрал как фон вот такую текстуру: . И, написав код

<table border="1" rules="all" background="smpic104.jpg">
  <tr>
    <td>Первая ячейка</td>
    <td>Вторая ячейка</td>
  </tr>

  <tr>
    <td>Третья ячейка</td>
    <td>Четвертая ячейка</td>
  </tr>
</table>

,я получил следующее:

Первая ячейка Вторая ячейка
Третья ячейка Четвертая ячейка

Поэкспериментируйте с фоном таблицы самостоятельно и переходите к следующим параметрам.

Межклеточные расстояния и отступы в ячейках

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

Первая ячейка Вторая ячейка
Третья ячейка Четвертая ячейка

Серым цветом я выделил внешнюю границу таблицы. Границы ячеек остались черными. Для того,чтобы задать такие отступы между ячейками, требуется в теге <table> указать параметр cellspacing.

cellspacing — параметр тега <table>, позволяющий установить расстояние между ячейками.

В показанной выше таблице расстояние между ячейками равно пяти пикселам. Это иллюстрирует следующий рисунок:

И последний параметр для тега <table> плавно подведет нас к свойствам ячеек.

cellpadding — параметр тега <table>, позволяющий установить отступы внутри ячеек.

Отступы в ячейках — своего рода мертвое пространство, которое не может быть занято содержимым ячеек. Оно (содержимое) прилегает к краю этого мертвого пространства. Всего у ячейки имеется четыре отступа: верхний, нижний, левый и правый. Параметр cellpadding позволяет поменять лишь все отступы одновременно. Однако есть способ (и я о нем расскажу на следующей странице) обойти это неудобство. На рисунке схематически показаны отступы для ячеек первого столбца девятиячеечной таблицы.

В этой таблице отступы составляют 10px. А теперь табличка, отступы в ячейках которой равны 30 пикселам:

Первая ячейка Вторая ячейка Третья ячейка
Четвертая ячейка Пятая ячейка Шестая ячейка
Седьмая ячейка Восьмая ячейка Девятая ячейка

Самостоятельно поэкспериментируйте с отступами в ячейках и расстояниями между ними. А затем будем расшифровывать тег со всеми описанными выше параметрами. вы готовы? Ну, поехали:

<table border="1" rules="all" bordercolor="red" bgcolor="green" background="kartinka.jpg" cellspacing="0" cellpadding="10">

Сначала попытайтесь сделать это самостоятельно. Готово? А теперь правильный ответ. Такой тег создаст таблицу с внешней границей в 1 пиксел красного цвета, с отображенными внутренними границами, фоном таблицы будет повторяющаяся картинка kartinka.jpg, а при выключенных в браузере изображениях высветится зеленый фон; расстояние между ячейками будет обнулено - ячейки будут прилегать друг к другу, а отступы внутри ячеек составят 10 пикселов. Попробуйте создать такую табличку.

Свойства ячеек

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

Каждый
Охотник Желает Знать
Где Сидит Фазан

В приведенной таблице первая ячейка создана объединением первых трех ячеек стандартной таблицы (т.е. такой, где количество столбцов равно количеству строк). Для того, чтобы осуществить такое объединение, достаточно использования специального параметра к первой из объединяемых ячеек.

colspan — параметр тега <td>, предназначенный для объединения нескольких ячеек одной строки в одну ячейку. Принимает числовые значения, равные количеству объединяемых ячеек.

Например, для того, чтобы объединить три ячейки первой строки в одну, как было сделано в предыдущей таблице, нужен такой фрагмент кода:

<td colspan="3">

Если нужно объединить только две ячейки из трех, нужно для параметра colspan написать значение "2".

Вот код для создания показанной выше таблицы:

<table border="1" rules="all" cellspacing="0" cellpadding="10">
  <tr>
    <td colspan="3" bgcolor="red">Каждый</td>
  </tr>

  <tr>
    <td bgcolor="orange">Охотник</td>
    <td bgcolor="yellow">Желает</td>
    <td bgcolor="green">Знать</td>
  </tr>

  <tr>
    <td bgcolor="blue">Где</td>
    <td bgcolor="darkblue">Сидит</td>
    <td bgcolor="purple">Фазан</td>
  </tr>
</table>

Заметьте, что в первой строке (первом контейнере тега <tr>) осталась только одна ячейка. Две другие слились с первой воедино и получилась ячейка-три-в-одном.

Подобный параметр существует и для объединения ячеек одного столбца.

rowspan — параметр тега <td>, предназначенный для объединения нескольких ячеек одного столбца в одну ячейку. Принимает числовые значения, равные количеству объединяемых ячеек.

Модифицируем предыдущую табличку таким образом, чтобы объединенными оказались три ячейки первого столбца, а остальные ячейки пусть существуют сами по себе.

Каждый Охотник Желает
Знать Где
Сидит Фазан

Для объединения ячеек таким образом, использовался фрагмент кода

<td rowspan="3">

А полный код стал выглядеть так:

<table border="1" rules="all" cellspacing="0" cellpadding="10">
  <tr>
    <td rowspan="3" bgcolor="red">Каждый</td>
    <td bgcolor="orange">Охотник</td>
    <td bgcolor="yellow">Желает</td>
  </tr>

  <tr>
    <td bgcolor="green">Знать</td>
    <td bgcolor="blue">Где</td>
  </tr>

  <tr>
    <td bgcolor="darkblue">Сидит</td>
    <td bgcolor="purple">Фазан</td>
  </tr>
</table>

Теперь, как видите во второй и третьей строке исчезли первые ячейки. Это потому, что они являются ячейками первого столбца. А все ячейки первого столбца влились в первую ячейку первого столбца. Вот такая вот закавыка.

В табличной верстке параметр rowspan используется намного реже, нежели сolspan. Поэтому будет достаточно, если вы освоите только сolspan. Поэкспериментируйте с ним.

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

align — параметр тега <td>, позволяющий задавать горизонтальное выравнивание текста в ячейке. Принимает параметры:

  • left — выравнивание по левому краю
  • center — выравнивание по центру
  • right — выравнивание по правому краю
  • justify — выравнивание по ширине

Но так можно указать только горизонтальное выравнивание. Для вертикального подойдет:

valign — параметр тега <td>, позволяющий задавать вертикальное выравнивание текста в ячейке. Основные параметры:

  • top — выравнивание по вверху ячейки
  • middle — выравнивание по середине ячейки
  • bottom — выравнивание по низу ячейки

Самостоятельно поэкспериментируйте с выравниванием в ячейках, а затем проведите эксперименты, комбинируя все изученные параметры. Кстати, я вас поздравляю, теперь вы знаете о таблицах все! Все, что я мог о них рассказать. Но этого объема знаний вам будет достаточно, чтобы создать свой сайт при помощи табличной верстки. Это серьезное событие, и его стоит отметить! А потом открывайте следующую статью и переходите к практической стороне вопроса.

Категория: Мои статьи | Добавил: kraysler (14.12.2011)
Просмотров: 9438 | Комментарии: 10 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *:
Суббота, 18.05.2024, 06:58
Приветствую Вас Гость

Категории раздела

Мои статьи [32]

Вход на сайт

Поиск

Наш опрос

Оцените мой сайт
Результаты | Архив опросов
Всего ответов: 42

Мини-чат

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0