Создание таблиц в html, это важная часть данного языка при создании сайтов, потому что большинство всех сайтов, имеют табличный дизайн, да и вообще, создание таблиц в html, является довольно частым делом, пишу это чисто из своего веб мастерского опыта.
Создание таблиц в html всегда начинается с маленького и простого тэга <table>, соответственно и закрывается так же, только с обратным слешем: </table>.
Давайте я сделаю такую мини таблицу в примере, а потом всё разъясню, смотрим:
<table border="1" align="center" width="600px" bgcolor="#f6f6f6" cellspacing="0" cellpadding="0" border color="black">
<tr>
<td> Создание таблиц в html. </td>
<td> Наименование бесполезной траты времени </td>
<td> Колличество часов </td>
</tr>
<tr>
<td> 1 </td>
<td> Телевизор </td>
<td> 2 часа </td>
</tr>
<tr>
<td> 2 </td>
<td> Поход по магазинам </td>
<td> 1 час </td>
</tr><tr>
<td> 3 </td>
<td> Компьютерные игры </td>
<td> 3 часа </td>
</tr><tr>
<td> colspan="2"Итого </td>
<td> 7 часов </td>
</tr>
</table>
<tr>
<td> Создание таблиц в html. </td>
<td> Наименование бесполезной траты времени </td>
<td> Колличество часов </td>
</tr>
<tr>
<td> 1 </td>
<td> Телевизор </td>
<td> 2 часа </td>
</tr>
<tr>
<td> 2 </td>
<td> Поход по магазинам </td>
<td> 1 час </td>
</tr><tr>
<td> 3 </td>
<td> Компьютерные игры </td>
<td> 3 часа </td>
</tr><tr>
<td> colspan="2"Итого </td>
<td> 7 часов </td>
</tr>
</table>
Разъяснения по созданию таблиц в html, из приведённого выше примера смотрите ниже:
border="1" - Атрибут для создания видимости таблицы, в данном случае в 1пиксел, чем больше будете ставить, тем толще будет ваша таблица.
align="center" - Выравнивание таблицы по центру.
width="600px" - Это ширина таблицы.
<tr> - Строка.
<td> - Столбик.
colspan="2" - Объединение двух горизонтальных столбиков в таблице, если поставите 3, значит объединиться три столбика в один.
rowspan="3" - Это объединение трех уже вертикальных рядов в один.
bgcolor="#f6f6f6" - Придание фонового цвета таблице, цвет серый.
cellspacing="5" - Зазор между каждой ячейкой таблицы в 5 пикселей.
cellpadding="10" - Расстояние края рамки до написанного в ней текста: 10 пикселей.
border color="black" - Так придают цвет самой таблице, в нашем случае это синий цвет.
Знайте, что все те же свойства, можно придавать и каждой ячейке отдельно.
Я хочу открыть вам одну фишку связанную как раз с таблицами, смотрите как можно заключить всю страницу сайта в одну таблицу, с минимальными отступами по сторонам:
<body leftmargin="0" raghtmargin="0" topmargin="0" bottommargin="0"
table width="100%">
table width="100%">
Разъяснения смотрите ниже:
table width="100%" - Придание всей страницы рамки, шириной 100 процентов
.
leftmargin="0" - Расcстояние таблицы от левого края.
raghtmargin="0" - От правого.
topmargin="0" - От верха.
bottommargin="0" - От низа.
И еще чуть не забыл, бывают случаи, когда надо начинать писать текст в таблице по верху, тогда пользуйтесь атрибутом: (valign="top"), без этого атрибута, все ваши тексты в таблице будут начинать печататься по середине, а это согласитесь, бывает совсем не кстати.
Ну вот и вся htmlевая премудрость, всё кратко и по делу. Если вы усвоите все эти атрибуты на зубок, то создание таблиц в html , будет казаться вам, очень даже простым делом. Уроки по html продолжаются, до встречи в следующем уроке где мы будем изучать: Создание ссылок в html.
Комментариев нет:
Отправить комментарий