Пошаговые уроки с примерами по работе с таблицами на html странице сайта, урок 2.


Сегодня мы будем работать c таблицами на html странице.
Посмотрим, как поместить текст в разных частях таблицы добавим цвет и изображение.

<align> Выравниваем текст в таблице по горизонтали.

<valign> Выравниваем текст в таблице по вертикали.

<bgcolor> Работаем с цветом .                                   

<background> Работаем с изображением.               




Продолжаем урок по работе с таблицами для веб страницы.

1) Посмотрим, как расположить текст внутри ячеек html таблицы по горизонтали. Работаем с элементом align и атрибутами left - слева, center - по центру, right - справа. И задаём размеры для ячеек. Как всегда посмотрим на примере.


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


Вот вид в браузере. Текст внутри ячеек расположился, как мы указали в первом ячейке слева во втором посередине в третьем справа.

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






2) Посмотрим, как расположить текст внутри ячеек html таблицы по вертикали. Работаем с элементом valign и атрибутами top - сверху, middlet - по центру, bottom - снизу. И задаём размеры для ячеек. Как всегда посмотрим на примере.


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


Вот вид в браузере. Текст внутри ячеек расположился, как мы указали в первом ячейке сверху во втором посередине в третьем снизу.

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




Вы так же можете использовать оба элемента одновременно, например, указать справа и прижать к верху.



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


<table border="1" bgcolor="green">
<tr>
<td height="50" width="100" align="left">Ячейка</td><td height="50" width="100" align="center">Ячейка</td><td height="50" width="100" align="right">Ячейка</td>
</tr>
<tr>
<td height="50" width="100" valign="top">Ячейка</td><td height="50" width="100" valign="middle" bgcolor="blue">Ячейка</td><td height="50" width="100" valign="bottom">Ячейка</td>
</tr>
</table>


Вид в браузере. Зелёным цветом мы изменили всю таблицу и синим цветом отдельную ячейку.

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






4) Давайте посмотрим, как задать фоновое изображение для всей html таблицы и в отдельно взятой ячейки.


<table border="1" background="image/vodopad.gif">
<tr>
<td height="50" width="100" align="left">Ячейка</td><td height="50" width="100" align="center">Ячейка</td><td height="50" width="100" align="right">Ячейка</td>
</tr>
<tr>
<td height="50" width="100" valign="top">Ячейка</td><td height="50" width="100" valign="middle" background="image/palms.gif">Ячейка</td><td height="50" width="100" valign="bottom">Ячейка</td>
</tr>
</table>


Вид в браузере. Зесь видно как мы задали изображение всей таблице и в отдельной ячейке.

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




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




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