Таблицы на веб-страницах встречаются очень часто, благодаря им можно упорядочить текст в определенной последовательности. Даже если на сайте нет видимых границ между ячейками, это не значит, что таблица отсутствует. Границы часто скрывают, чтобы не заграмождать контент и привлечь внимание к тексту.
Верстка таблицы в HTML достаточно сложная и трудоемкая, что требует внимания и навыков. Но для начала следует разобраться с тегами и атрибутами, с помощью которых создается таблица.
Начало любой таблицы всегда начинается с тега-контейнера table, который в конце всегда должен быть закрыт. В этом контейнере всегда располагаются строки - тег tr и столбцы (ячейки), которые задаются тегом td. В тегах <tr> </tr> располагаются столбцы <td> </td> между которыми вписывается текст, отображающийся в ячейках таблицы. Попробуйте по примеру создать свою таблицу:
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
<tr>
<td>ещё одна ячейка</td>
</tr>
</table>
Внешний вид таблицы
Полученную таблицу можно преукрасить, добавив цветов:
<table bgcolor="#ff9933"> - для изменения фона всей таблицы
<td bgcolor="#1a8fd9"> - для изменения фона ячейки
Кроме того, фон можно изменить с помощью атрибута background:
<table background="fon.jpg">
В случае указания изображения, как в примере, картинка должна располагаться там же где и html-файл.
Для добавления рамки таблицы или ячейки применяют атрибут border, цвет которого можно менять с помощью атрибута bordercolor.
<table border="0"> - граница таблицы отсутствует
<table border="2" bgcolor="#ff9933"> - цвет границы изменится на указанный и её размер будет 2px
Выравнивание текста и ячеек
Текст в ячейке можно выравнивать по горизонтали и вертикали:
<td align="center"> - выравнивание текста по центру горизонтали, также можно по левому (left) и правому (right) краям
<td valign="middle"> - выравнивание по центру вертикали, кроме того можно по верху (top) и по низу (bottom)
Для того, чтобы назначить отступ от краев внутри ячеек, применяют атрибут cellpadding:
<table cellpadding="3">
Чтобы изменить отступ между ячейками в теге table указывается специальный атрибут:
<table cellspacing="3"> - если указать значение 0, отступа не будет
Для ячейки, как и для всей таблицы, можно указать высоту (height) и ширину (width). Если в строке несколько ячеек, то высоту достаточно указать только для первой, остальные будут той же высоты.<td height="20" width="40"> или <td width="25%">
Если указывается в процентах, то сумма ширины ячеек должна быть 100%.
Объединение ячеек
В случае, если требуется объединить ячейки по горизонтали или вертикали, применяют специальные атрибуты - colspan и rowspan, значениями которых является количество объединяющихся ячеек.
<tr>
<td colspan="2">горизонталь</td>
<td>верхняя ячейка</td>
<td rowspan="2">вертикаль</td>
</tr>
<tr>
<td>ячеечка</td>
<td>ячейчечка</td>
<td>ячееченьчик</td>
</tr>
</table>
При склеивании ячеек нужно быть внимательным, чтобы таблица не исказилась. Для удобства верстки таблицы в HTML, её нужно сначала прорисовать на листочке. Также таблицу можно вставить в текст в виде изображения, о том как добавить картинку к статье читайте дальше.
