Работаем с таблицами на html странице сайта.


    Сегодня мы будем работать c таблицами на html странице сайта.

 <table> </table> основной элемент таблицы
 <tr> </tr> атрибут, указывающий на новый ряд
 <td> </td> атрибут создаёт ячейку                  



Таблицы это неотъемлемая составляющая для сайта и мы посмотрим, как с ними работать. С помощью таблицы мы можем разбивать содержание страницы, на отдельные куски, придавая дизайн сайту. Научимся создавать каркас страницы, которую в дальнейшем можно будет использовать как шаблон для всего сайта. Давайте посмотрим, из чего состоит html таблица: <table> - основной элемент с ним таблица открывается и закрывается, <tr> - указывает на начало нового ряда, <td> - создаёт ячейку, все они имеют закрывающие теги. Как всегда начнём с самого примитивного примера, но здесь ещё мы используем атрибут border создающий бордюр вокруг ячейки без него трудно будет понять, где начало, где конец.



1) Смотрим наш самый первый и простой пример создания html таблицы.


<table border="1">
<tr>
<td>
Ячейка
</td>
</tr>
</table>


Теперь возьмите пример выше сохраните на html странице который мы создавали в первых уроках и откройте в браузере. Ниже итог.

Ячейка






2) А вот ещё пример с двумя ячейками в одном ряду по горизонтали.


<table border="1">
<tr>
<td> Ячейка </td> <td> Ячейка </td>
</tr>
</table>


В итоге мы видим две ячейки по горизонтали.

ЯчейкаЯчейка






3) А вот ещё пример в два ряда по две ячейки.


<table border="1">
<tr>
<td> Ячейка </td> <td> Ячейка </td>
</tr>
<tr>
<td> Ячейка </td> <td> Ячейка </td>
</tr>
</table>


Как видите чтоб добавить ряд снизу надо использовать открывающий и закрывающий атрибут <tr></tr>.

ЯчейкаЯчейка
ЯчейкаЯчейка






4) Давайте посмотрим как объединять ячейки в одном ряду для этого мы используем атрибут colspan.


<table border="1">
<tr>
<td colspan="2"> Ячейка </td>
</tr>
<tr>
<td> Ячейка </td> <td> Ячейка </td>
</tr>
</table>


Вот как видно в браузере.

Ячейка
ЯчейкаЯчейка






5) Теперь соединяем де ячейки по вертикали используем атрибут rowspan.


<table border="1">
<tr>
<td rowspan="2">Ячейка</td><td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td>
</tr>
</table>


Вот итог в браузере. .

ЯчейкаЯчейка
Ячейка






6) Изменяем размеры ячейки ячейки html таблицы. Для этого мы пользуемся атрибутами height - высота и width ширина. Вот пример как надо делать.


<table border="1">
<tr>
<td height="50" width="100">Ячейка</td><td height="50" width="100">Ячейка</td>
</tr>
<tr>
<td height="50" width="100">Ячейка</td><td height="50" width="100">Ячейка</td>
</tr>
</table>


Всё изменилось как мы указали в размерах высота 50 пикселей ширина 100 пикселей.

ЯчейкаЯчейка
ЯчейкаЯчейка






7) Задаем расстояние вокруг текста внутри ячейки. Используем атрибут cellpadding.


<table border="1" cellpadding="15">
<tr>
<td>Ячейка</td><td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td><td>Ячейка</td>
</tr>
</table>


Смотрите вокруг текста образовалось пространство толщиной 15 пикселей.

ЯчейкаЯчейка
ЯчейкаЯчейка






8) Задаем расстояние вокруг ячеек html таблицы. Используем атрибут cellspacing.


<table border="1" cellspacing="15">
<tr>
<td>Ячейка</td><td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td><td>Ячейка</td>
</tr>
</table>


Смотрите вокруг ячеек образовалось пространство толщиной 15 пикселей.

ЯчейкаЯчейка
ЯчейкаЯчейка






9) А вот вариант создания html таблицы как шаблон для всего сайта. Здесь мы ещё указали элемент table общий размер для отображения страницы в мониторе.


<table border="1" width="100%" height="100%">
<tr>
<td colspan="3" width="100%" height="100">Шапка сайта </td>
</tr>
<tr>
<td width="15%" height="500">Левый блок </td>
<td width="70%" height="500">Основное содержание сайта </td>
<td width="15%" height="500">Правый блок</td>
</tr>
<tr>
<td colspan="3" width="100%" height="100">Подвал</td>
</tr>
</table>


Вот как получилось в браузере. Это обычная разбивка сайта на отдельные кусочки, где в шапке сайта вы можете поместить логотип сайта с информацией, а в правом и левом окне разместить различные ссылки и рекламные баннеры, посередине можете поместить основное содержание сайта и конечно в подвале добавить форму связи с администратором, счетчики посещений и другую информацию. Здесь мы показываем в маленьких размерах, вы же можете задать размеры для шаблона сайта какие вы пожелаете. Если вы не хотите чтоб видно было разделяющий ячейки бордюр, то просто удалите с кода border="1". Вы так же можете шапку или подвал делать как отдельный каркас или, например в каждом ячейке делать ещё каркас с ячейками, можете изменять размеры, короче вариантов много делайте как вы пожелаете.

Шапка сайта
Левый блок Основное содержание сайта Правый блок
Подвал






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




Рейтинг@Mail.ru   Яндекс.Метрика