Создание собственного сайта
Каталог статей
| Главная » Статьи » Мои статьи |
Таблицы в HTML. Свойства таблиц. Этой статьей заканчивается теоретический материал по таблицам. Из нее вы сможете получить знания о всех самых значимых свойствах таблиц в HTML. Применяя эти знания на практике, вы получите возможность на свое усмотрение изменять внешний вид, структуру, расположение на странице, содержимое той или иной таблицы и так далее. Ранее мы уже начали использовать в коде два параметра — border и rules, но пока не давалось подробных объяснений, для чего они нужны: не было подходящего момента. Зато сейчас - самое время. Дело в том, что по умолчанию ни таблица ни ячейка не имеют визуальной границы. Для того, чтобы она присутствовала, нужно приказать браузеру показывать ее. Для отображения внешней рамки таблицы, необходимо задать параметр border в теге <table>. Внешние и внутренние границыborder — параметр тега <table>, позволяющий отобразить для таблицы внешнюю границу указанной толщины. Создайте таблицу в два столбца и две строки, установив для тега <table> значение параметра border равным 3, и посмотрите, что получится.
<table border="3" rules="all">
Результат должен быть примерно таким:
Повторюсь, что указанный параметр действует только на внешнюю рамку таблицы. Для управления внутренними границами (границами ячеек) 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">
,я получил следующее:
Поэкспериментируйте с фоном таблицы самостоятельно и переходите к следующим параметрам. Межклеточные расстояния и отступы в ячейкахВ обычной таблице ячейки прилегают одна к другой, однако встречаются таблицы, когда ячейки находятся друг от друга на определенном расстоянии. Как, например, здесь:
Серым цветом я выделил внешнюю границу таблицы. Границы ячеек остались черными. Для того,чтобы задать такие отступы между ячейками, требуется в теге <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>) осталась только одна ячейка. Две другие слились с первой воедино и получилась ячейка-три-в-одном. Подобный параметр существует и для объединения ячеек одного столбца. rowspan — параметр тега <td>, предназначенный для объединения нескольких ячеек одного столбца в одну ячейку. Принимает числовые значения, равные количеству объединяемых ячеек. Модифицируем предыдущую табличку таким образом, чтобы объединенными оказались три ячейки первого столбца, а остальные ячейки пусть существуют сами по себе.
Для объединения ячеек таким образом, использовался фрагмент кода <td rowspan="3"> А полный код стал выглядеть так:
<table border="1" rules="all" cellspacing="0" cellpadding="10">
Теперь, как видите во второй и третьей строке исчезли первые ячейки. Это потому, что они являются ячейками первого столбца. А все ячейки первого столбца влились в первую ячейку первого столбца. Вот такая вот закавыка. В табличной верстке параметр rowspan используется намного реже, нежели сolspan. Поэтому будет достаточно, если вы освоите только сolspan. Поэкспериментируйте с ним. И, наконец, о выравнивании в ячейках. Как вы знаете, существует выравнивание по центру, левому или правому краю, а также самое распространенное - по ширине. Все эти четыре типа выравнивания могут быть заданы для содержимого ячейки. align — параметр тега <td>, позволяющий задавать горизонтальное выравнивание текста в ячейке. Принимает параметры:
Но так можно указать только горизонтальное выравнивание. Для вертикального подойдет: valign — параметр тега <td>, позволяющий задавать вертикальное выравнивание текста в ячейке. Основные параметры:
Самостоятельно поэкспериментируйте с выравниванием в ячейках, а затем проведите эксперименты, комбинируя все изученные параметры. Кстати, я вас поздравляю, теперь вы знаете о таблицах все! Все, что я мог о них рассказать. Но этого объема знаний вам будет достаточно, чтобы создать свой сайт при помощи табличной верстки. Это серьезное событие, и его стоит отметить! А потом открывайте следующую статью и переходите к практической стороне вопроса. | ||||||||||||||||||||||||||||||||||||||||||
| Просмотров: 9495 | Комментарии: 11 | | ||||||||||||||||||||||||||||||||||||||||||
. И, написав код
| Всего комментариев: 0 | |
Приветствую Вас Гость
Категории раздела | |
|---|---|
|
Вход на сайт |
|---|
Поиск |
|---|
Наш опрос |
|---|
Мини-чат |
|---|
Статистика |
|---|
Онлайн всего: 1 Гостей: 1 Пользователей: 0 |