Главная
Блог разработчиков 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
При перепечатке ссылка на источник обязательна
Оставить комментарий
БАЗА ЗНАНИЙ
СЛУЧАЙНАЯ СТАТЬЯ
СЛУЧАЙНЫЙ БЛОГ
СЛУЧАЙНЫЙ МОД
СЛУЧАЙНЫЙ СКИН
НОВЫЕ МОДЫ
НОВЫЕ СКИНЫ
НАКОПЛЕННЫЙ ОПЫТ
Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2017 © BB3x.ru - русская поддержка форума phpBB