Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Таблицы. Часть 1. Теория.

Viktor | 24.02.2014 | нет комментариев

Сегодня мы с Вами поговорим о таблицах. Для чего же нужны таблицы в HTML???

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

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

Таблица описывается парными тегами <table> </table>  (открывается и закрывается ) Элементы таблицы строятся по рядам (строкам). Каждый ряд задается парными тегами <tr> </tr> (Table Row, ряд таблицы). Внутри ряда находятся ячейки (столбцы) образованные тегами <td> </td> (Table Date, данные таблицы). Для заголовков столбцов вместо тега <td> используется <th> (Table Head, заголовок таблицы). Разница в этих тегах лишь в том, что текст в последнем центрируется и выделяется жирным шрифтом. Взгляните на листинг 10.1.

Листинг 10.1.

<table align= “center” border=”2″ width=”300″ bordercolor=”green” bgcolor=”yellow”>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>

А вот как выглядит таблица код которой указан в листинге 10.1:

Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

 

А теперь прокомментируем каждый параметр в этом коде:

Как Вы уже заметили – эта таблица имеет две строки, описываемые тегами <tr> </tr> , в каждой строке по два столбца (ячейки 1,2 и 3,4), которые описываются тегами <td> </td> . Ширина таблицы 300 пикселей атрибут width=”300″. Цвет фона таблицы (и всех ячеек желтый)bgcolor=”yellow” . Цвет рамки таблицы зеленый –  bordercolor=”green” . Толщина рамки 2 пикселя – border=”2″ (чем больше цифра – тем толще рамка, при значении 0 – рамка не видна) . Таблица выровнена по центру align= “center”.

Если ячейка пустая, то вокруг нее рамка не рисуется. Если рамка все же нужна вокруг пустой ячейки, то в нее надо ввести символьный объект &nbsp; (non-breaking space – неразрывающий пробел). Ячейка по-прежнему будет пуста, а рамка вокруг нее будет (&nbsp; – обязательно должен набираться строчными буквами и закрываться точкой с запятой).

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

COLSPAN Объединение указанного числа колонок.
ROWSPAN Объединение указанного числа рядов.
CELLSPACING Расстояние между ячейками
CELLPADDING Расстояние между рамкой ячейки и ее содержимым

Чтобы лучше понять значение этих тегов взгляните на Листинг 10.2:

Листинг 10.2.

<table align=”center” border=”4″ width=”550″ bordercolor=”green” bgcolor=”yellow” cellpadding=”5″ cellspacing=”8″ >
<tr>
<td colspan=”2″>Ячейка 1</td>
</tr>
<tr>
<td WIDTH=”120px”>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
<tr>
<td colspan=”2″>Ячейка 5</td>
</tr>
</table>

А вот что видит посетитель сайта:

Ячейка 1
Ячейка 3 Ячейка 4
Ячейка 5

Общая ширина таблицы равна 550 px (width=”550″). Рамка вокруг таблицы 4px зеленого цвета ( border=”4″ bordercolor=”green”). Фон таблицы желтый (bgcolor=”yellow”). Здесь мы видим уже 3 строки, описанные тегами <tr></tr>. А вот дальше уже пошли существенные различия , а именно:

Параметр colspan=”2″ примененный в первой и третьей строках, объединяет в себя по две ячейки и в результате получаюся две большие ячейки 1 и 5. Т.е. как Вы уже поняли COLSPAN – объединяет ячейки по горизонтали, делая из них одну общую ячейку. ROWSPAN – делает тоже самое только по вертикали, попробуйте применить этот параметр самостоятельно.

Парметр cellpadding=”5″ задает отступ (расстояние) между рамкой ячейки и ее содержимым. Соотвественно если Вам этот отступ не нужен то ставим “0″.

Парметр cellspacing=”8″ задает отступ (расстояние) между ячейками. Соотвественно если Вам этот отступ не нужен то ставим “0″.

Как видите все очень просто.

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

АВТОРСКИЕ ПРАВА
Источник: luksweb.ru
При перепечатке ссылка на источник обязательна
Оставить комментарий

Ваш email не будет опубликован. Обязательные поля помечены (обязательно)

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2014 © BB3x.ru - русская поддержка форума phpBB