Таблицы html

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

Каждая таблица html это своеобразный контейнер, состоящий из открывающего тэга html таблицы <table> и закрывающего тэга html таблицы </table>. Внутри этого контейнера находятся ячейки таблиц html, которые задаются тэгами <tr></tr> и <td></td>.

<tr></tr> — задаёт количество горизонтальных рядов таблицы
(строчки).
<td></td> — задаёт количество вертикальных рядов таблицы
(столбцы).

Все эти тэги являются обязательными при построении таблиц html. Пример таблицы html из трёх строчек и двух столбцов Вы видите ниже:

строчка1 столбец1 строчка1 столбец2
строчка 2 столбец1 строчка 2 столбец2
строчка 3 столбец1 строчка 3 столбец2

А вот как выглядит код HTML приведённого примера:

<table>
<tr>
<td>строчка1 столбец1</td>
<td>строчка1 столбец2</td>
</tr>
<tr>
<td>строчка 2 столбец1</td>
<td>строчка 2 столбец2</td>
</tr>
<tr>
<td>строчка 3 столбец1</td>
<td>строчка 3 столбец2</td> 
</tr>
</table>

Как видно из примера, начинается наша таблица с открывающего тэга <table>, далее мы задаём количество строк <tr></tr>, в них прописываем количество столбцов <td></td>. Всё довольно таки просто.

Теперь давайте разберёмся с дополнительными параметрами для красивого оформления нашей таблицы, с целью повышения посещаемости и увеличения заработка в интернете. Вначале сделаем рамку таблицы html. Рамка вводится параметром border и прописывается в тэге <table>:

<table border=»2″>

Также мы можем задать цвет для рамки html. Это делается с помощью атрибута bordercolor:

<table border=»2″ bordercolor=»#990066″>

Теперь вставим эти атрибуты в наш пример:

<table border="2" bordercolor="#990066">
<tr>
<td>строчка1 столбец1</td>
<td>строчка1 столбец2</td>
</tr>
<tr>
<td>строчка 2 столбец1</td>
<td>строчка 2 столбец2</td>
</tr>
<tr>
<td>строчка 3 столбец1</td>
<td>строчка 3 столбец2</td> 
</tr>
</table>

посмотреть результат

Теперь с помощью атрибутов height и width изменим высоту и ширину ячеек нашей таблицы html. Параметр height в каждой строке задаётся для одной ячейки, так как остальные ячейки выровняются по этому размеру. Если Вы зададите высоту первой ячейки 50, а второй ячейки 150, то все ячейки примут размер 150, так как все ячейки в строке выравниваются по наибольшему размеру. Параметр width задаётся для каждой ячейки в строке, а для последующих строк просто дублируется. Ширина ячеек, также как и высота выравнивается по наибольшему размеру:

<table border="2" bordercolor="#990066">
<tr>
<td height="50" width="200">строчка1 столбец1</td>
<td width="150">строчка1 столбец2</td>
</tr>
<tr>
<td height="100" width="200">строчка 2 столбец1</td>
<td width="150">строчка 2 столбец2</td>
</tr>
<tr>
<td height="50" width="200">строчка 3 столбец1</td>
<td width="150">строчка 3 столбец2</td> 
</tr>
</table>

посмотреть результат

В данном примере мы задали ширину и высоту ячеек в пикселях, а можно задавать и в процентах. Сумма высоты всех строчек height также как и сумма ширины всех ячеек width не должна превышать 100%.
Пример:

<table height="100%" width="100%" border="2" 
bordercolor="#990066">
<tr>
<td height="15%" width="20%">строчка1 столбец1</td>
<td width="80%">строчка1 столбец2</td>
</tr>
<tr>
<td height="45%" width="20%">строчка 2 столбец1</td>
<td width="80%">строчка 2 столбец2</td>
</tr>
<tr>
<td height="40%" width="20%">строчка 3 столбец1</td>
<td width="80%">строчка 3 столбец2</td> 
</tr>
</table>

посмотреть результат

Из примера видно, что если сложить высоту height всех строчек (15+45+40), то в сумме получим 100%. То же самое и с шириной width (80+20) в сумме получаем 100%.

Вы можете задать высоту и ширину для всей таблицы html, тогда все ячейки (столбцы) и ряды поделят данное им пространство поровну.
Например:

<table height="50" width="200" border="2" 
bordercolor="#990066">
<tr>
<td>строчка1 столбец1</td>
<td>строчка1 столбец2</td>
</tr>
<tr>
<td>строчка 2 столбец1</td>
<td>строчка 2 столбец2</td>
</tr>
<tr>
<td>строчка 3 столбец1</td>
<td>строчка 3 столбец2</td> 
</tr>
</table>

посмотреть результат

На следующей странице мы поговорим о выравнивании
содержимого таблицы.

Поделиться в соц. сетях

Таблицы html
Таблицы html
Таблицы html
Таблицы html
Таблицы html
Таблицы html

Оставить комментарий

http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif 
 

Goon Каталог сайтов Рейтинг@Mail.ru Яндекс.Метрика