HTML ШАБЛОНЫ САЙТОВ
Современные готовые адаптивные HTML 5 шаблоны.
Откройте для себя мир современных и оригинальных шаблонов сайтов...
АДАПТИВНЫЕ ШАБЛОНЫ шаблоны сайтов
Независимо от устройства, Вам будет удобно пользоваться сайтом.
Изображения будут большими, а текст четким! шаблоны сайтов

Ступенька 21-ая. 

Долго ли, коротко ли, но мы добрались до таблиц. При создании сайтов таблицы используются очень часто. Вот пример сайта, оформление которого не обошлось бы без таблиц (заметьте, ни одной картинки, когда вы пройдете главы о таблицах без труда сможете сверстать подобное). 

Таблица задается тэгом: 

<table></table>

Увы, это далеко не все: таблица состоит из строк и столбцов (ячеек), поэтому нам надо еще указать и их. 

<tr></tr> - строчка таблицы
<td></td> - столбец (ячейка) таблицы 

 

Итак, перед вами таблица из двух строк и трех столбцов (ячеек). Для наглядности я выделила ячейки таблицы разными цветами. Границы таблицы не заданы, поэтому вы их не видите. Как же такая красота получилась? Итак следите за движениями моих рук:



     
<table>
<tr></tr>
<tr></tr>
</table>



Сначала мы задали строки. В нашем примере их две. Теперь в каждой строке зададим по три столбца (ячейки):



     
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>



Кстати, когда вы будете создавать свой сайт и таблицы, лучше рисуйте все сначала на бумаге, так вам будет легче потом верстать, т.к. вы все наглядно будете видеть на бумаге, и у вас будет меньше вероятности ошибиться. 

Итак, теперь нам надо заполнить получившийся каркас:



     
<table>
<tr>
<td>1x1</td>
<td>1x2</td>
<td>1x3</td>
</tr>
<tr>
<td>2x1</td>
<td>2x2</td>
<td>2x3</td>
</tr>
</table>



Надеюсь вы поняли, что первая цифра в загадочных надписях - это номер ряда, а вторая номер ячейки (1х2 - первый ряд, вторая ячейка). Это опять же вам для наглядности. Если посмотреть то, что уже у нас с вами получилось, то это будет выглядеть так: 
1x1
1x2
1x3
2x1
2x2
2x3


Увы, фона (голубенького или желтенького, как в примере) еще не видно. Фон задается атрибутом bgcolor="цвет_фона". Фон можно задать для таблицы в целом, для ряда, для ячейки (в пределе одного ряда). В нашем случае мы задаем фон для каждой ячейки.



     
<table>
<tr>
<td bgcolor="#FFCC33">1x1</td>
<td bgcolor="#336699">1x2</td>
<td bgcolor="#FFCC33">1x3</td>
</tr>
<tr>
<td bgcolor="#336699">2x1</td>
<td bgcolor="#FFCC33">2x2</td>
<td bgcolor="#336699">2x3</td>
</tr>
</table>



Вот, что у нас получилось: 

Если вы хотите задать фон для ряда, то атрибут bgcolor мы прописываем для тэга <tr>:

<tr bgcolor="#FFCC33">

Если вы хотите задать фон для всей таблицы, то атрибут bgcolor мы прописываем для тэга <table>:

<table bgcolor="#FFCC33">

Однако, если при заданном фоне для всей таблицы, вы задаете свой фон для ряда или ячейки, то этот ряд или ячейка будут иметь фон отличный от всей таблицы.

Попробуйте самостоятельно задать фон для таблицы и для ряда (это для усвоения материала). Когда все усвоится переходите к следующей ступеньке, и мы продолжим разговор о таблицах. 

 

Наверх

HTML шаблоны сайтов

Реклама:

Скачать бесплатно HTML шаблоны сайта с нами легко!

В современном мире порой иметь собственный сайт также важно, как например, наличие номера телефона или адреса электронной почты. К сожалению, не каждый самостоятельно может сделать себе красивый профессиональный сайт, а порой даже и кривой не получается. Заказывать у программистов тоже не идеальный выход, так как не всем это по карману.

Из такой ситуации помогут выйти бесплатные HTML шаблоны сайтов. HTML шаблон сайта – это набор уже готовых статических страниц для сайта определенной тематики. С помощью такого шаблона, создать простой сайт можно буквально за пару часов, при наличии базового знания HTML разметки. В разделе HTML Вы получите эти знания, если потратите еще пару часов на изучения, а если не пожалеете время на раздел CSS, то сможете полностью управлять дизайном HTML шаблонов сайтов и настраивать их полностью под свои нужды.

Еще одним неоспоримым плюсом шаблонов сайтов является, то что их пишут в большинстве случаев профессионалы. Под профессиональным шаблоном сайтом понимается не только красивый и современный дизайн, но и так как написан код. Поисковые системы смотрят, как у Вас написан сайт, SEO оптимизирован код или нет, на основании этого понижают или повышают Ваши позиции в выдаче. Поэтому хороший сайт должен быть не только красивый и современный, что немаловажно, но и грамотно написан в плане кода.

Скачивайте бесплатные HTML шаблоны сайта и создавайте свои проекты в кратчайшие сроки.

HTML шаблоны