Цвет для таблиц html

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

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

<table border="2" bordercolor="#990066">
<tr>
<td height="50" width="200" valign="top" 
align="center" bgcolor="#FF9933">строчка1 столбец1</td>
<td width="150" valign="bottom" bgcolor="#9999FF">
<center>строчка1 столбец2</center></td>
</tr>
<tr>
<td height="100" width="200" valign="middle" 
align="left" bgcolor="#9999FF">строчка 2 столбец1</td>
<td width="150"  valign="middle" 
align="left" bgcolor="#FF9933">строчка 2 столбец2</td>
</tr>
<tr>
<td height="50" width="200" valign="bottom" 
align="right" bgcolor="#FF9933">строчка 3 столбец1</td>
<td width="150" valign="top" 
align="right" bgcolor="#9999FF">строчка 3 столбец2</td> 
</tr>
</table>

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

Теперь пропишем цвета для ряда таблицы html. В этом случае атрибут bgcolor мы прописываем для тэга <tr>:

<table border="2" bordercolor="#990066">
<tr bgcolor="#FF9933">
<td height="50" width="200" valign="top" 
align="center">строчка1 столбец1</td>
<td width="150" valign="bottom">
<center>строчка1 столбец2</center></td>
</tr>
<tr bgcolor="#9999FF">
<td height="100" width="200" valign="middle" 
align="left">строчка 2 столбец1</td>
<td width="150"  valign="middle" 
align="left">строчка 2 столбец2</td>
</tr>
<tr bgcolor="#FF9933">
<td height="50" width="200" valign="bottom" 
align="right">строчка 3 столбец1</td>
<td width="150" valign="top" 
align="right">строчка 3 столбец2</td> 
</tr>
</table>

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

Ну и, наконец, пропишем цвет для всей таблицы. Прописываем атрибут bgcolor для тэга <table>. Причём, если Вы зададите для ряда или ячейки другой цвет, то они будут заданного Вами цвета и отличного от цвета таблицы:

<table border="2" bordercolor="#990066" bgcolor="#FF9933">
<tr>
<td height="50" width="200" valign="top" 
align="center" bgcolor="#9999FF">строчка1 столбец1</td>
<td width="150" valign="bottom">
<center>строчка1 столбец2</center></td>
</tr>
<tr>
<td height="100" width="200" valign="middle" 
align="left">строчка 2 столбец1</td>
<td width="150"  valign="middle" 
align="left">строчка 2 столбец2</td>
</tr>
<tr>
<td height="50" width="200" valign="bottom" 
align="right">строчка 3 столбец1</td>
<td width="150" valign="top" 
align="right">строчка 3 столбец2</td> 
</tr>
</table>

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

На следующей странице мы с Вами познакомимся с атрибутами colspan и rowspan и узнаем для чего они нужны.

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

Цвет для таблиц 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 Яндекс.Метрика