br 8eb34


search

Верстка таблицы в HTML

tableТаблицы на веб-страницах встречаются очень часто, благодаря им можно упорядочить текст в определенной последовательности. Даже если на сайте нет видимых границ между ячейками, это не значит, что таблица отсутствует. Границы часто скрывают, чтобы не заграмождать контент и привлечь внимание к тексту.

Верстка таблицы в HTML достаточно сложная и трудоемкая, что требует внимания и навыков. Но для начала следует разобраться с тегами и атрибутами, с помощью которых создается таблица.

Начало любой таблицы всегда начинается с тега-контейнера table, который в конце всегда должен быть закрыт. В этом контейнере всегда располагаются строки - тег tr и столбцы (ячейки), которые задаются тегом td. В тегах <tr> </tr> располагаются столбцы <td> </td> между которыми вписывается текст, отображающийся в ячейках таблицы. Попробуйте по примеру создать свою таблицу:

<table>
<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, значениями которых является количество объединяющихся ячеек.

<table border="1">
<tr>
<td colspan="2">горизонталь</td>
<td>верхняя ячейка</td>
<td rowspan="2">вертикаль</td>
</tr>
<tr>
<td>ячеечка</td>
<td>ячейчечка</td>
<td>ячееченьчик</td>
</tr>
</table>

При склеивании ячеек нужно быть внимательным, чтобы таблица не исказилась. Для удобства верстки таблицы в HTML, её нужно сначала прорисовать на листочке. Также таблицу можно вставить в текст в виде изображения, о том как добавить картинку к статье читайте дальше.

Добавить комментарий

Защитный код
Обновить

Комментарии