. Таблицы в HTML используются не только как таблицы в обычном понимании, но и как каркас для разметки страницы:
|
Заголовок
|
|
Меню
|
Основной текст
|
Реклама
|
|
Копирайт
|
Таблица создается при помощи тега <table>
строки посредством тега <tr>, а столбцы ( ячейки ) с помощью тега <td>:
<table>
<tr>
<td>первая ячейка</td>
<td>вторая ячейка</td>
<td>третья ячейка</td>
</tr>
</table>
| первая ячейка |
вторая ячейка |
третья ячейка |
По умолчанию таблица в браузере представляется без рамки. Чтобы рамка таблицы была видна используется атрибут border с целочисленным аргументом, указывающим толщину рамки в пикселях. Цвет рамки задается с помощью атрибута bordecolor.
Для выравнивания самой таблицы или содержимого ячеек используются атрибуты:
aling - выравнивание по горизонтали. Аргументы - left, center и right.
valing - отвечает за вертикальное выравнивание. Аргументы - top (приближать к верху), bottom (приближать к низу), и middle (установить по середине).
Пример:
<table border="1" bordercolor="#FF0000" aling="center"valing="middle">
<tbody>
<tr>
<td>первая ячейка</td>
<td>вторая ячейка</td>
<td>третья ячейка</td>
</tr>
</tbody>
</table>
| первая ячейка |
вторая ячейка |
третья ячейка |
Задать размеры таблицы и ячеек можно с помощью атрибутов:
width - определяет ширину. Задается либо в пикселях, либо в процентном соотношении к родительскому элементу. По умолчанию этот атрибут определяется автоматически, в зависимости от объема содержащегося в таблице материала;
height - определяет высоту. Задается так же, как и width.
Чтобы объединить ячейки и таблицы по горизонтали или по вертикали, к тегу <td> применяются следующие атрибуты:
colspan - определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1;
rowspan - определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1.
Пример:
|
colspan=”2”
rowspan=”1”
|
colspan=”1”
rowspan=”2”
|
|
colspan=”1”
rowspan=”1”
|
colspan=”1”
rowspan=”1”
|
Чтобы изменить отступы между соседними ячейками таблицы, в HTML используется атрибут cellspacing:
<table border="1" cellspacing="20">
<tr>
<td>Ячейка №1</td>
<td>Ячейка№2</td>
<td>Ячейка №3</td>
</tr>
<tr>
<td>Ячейка №4</td>
<td>Ячейка №5</td>
<td>Ячейка №6</td>
</tr>
</table>
Результат:
| Ячейка №1 |
Ячейка№2 |
Ячейка №3 |
| Ячейка №4 |
Ячейка №5 |
Ячейка №6 |
Для того, чтобы задать отступы внутри ячеек, применяется атрибут cellpadding. Если в предыдущем примере заменить cellspacing="20" на cellpadding="20", то получится вот такая таблица:
| Ячейка №1 |
Ячейка№2 |
Ячейка №3 |
| Ячейка №4 |
Ячейка №5 |
Ячейка №6 |
Для работы с фоном существуют атрибуты:
bgcolor - определяет цвет фона таблицы в целом или каждой ячейки по отдельности;
background - позволяет заполнить вон таблицы или ячейки изображением.
Синтаксис bgcolor и background такой же как ив атрибутах тега <body>.
| 
