Как создать таблицы HTML

таблица html теги
Таблицы помогают структурировать контент, доносить более наглядно информацию для посетителей. Они удобны и информативны. Для создания таблиц и добавления на сайт нужно воспользоваться специальными табличными тегами HTML.

Основные теги

Итак, любая таблица начинается с тега <table> и заканчивается </table>
<tr> - начало строки;  </tr> - конец строки;
<td> и </td> - начало и конец ячейки соответственно.
Встроенные стили, которыми задают основные свойства таблицы (прописывают внутри тега table):
  • border - ширина бордюра в пикселях. Если указать значение, равное 0, то границы не будет.
  • widht - ширина таблицы. можно указать значение в процентах (какое место она будет занимать на странице) или в пикселях.

Параметры задаются такими переменными, как ALIGNBGCOLORBORDERBORDERCOLORCELLPADDINGCELLSPACINGHEIGHTWIDTHCOLSPANNOWRAPROWSPANVALIGN. Их еще называют атрибутами.

Атрибуты тега table

  • ALIGN - Выравнивание по правому (right) или левому (left) краю.
  • BGCOLOR - цвет фона. 
  • BORDER - толщина бордюра в пикселях. 
  • BORDERCOLOR - цвет бордюра. 
  • CELLPADDING - расстояние между бордюром и содержимым ячейки. 
  • CELLSPACING - расстояние между двумя рамками таблицы (т.к. по умолчанию, таблица имеет двойную рамку, и если задать значение cellspacing=0, то рамка будет одинарная.
  • HEIGHT - высота, может измеряться как в пикселях ( в этом случае единицу измерения опускаем, т.е. например, height="100", так и в % (тогда это будет выглядеть следующим образом: height="100%").
  • WIDTH - ширина, так же как и высота измеряется в пикселях и в процентах.
  • style="float: left; margin: 0 5px 2px 0;" - обтекание таблицы текстом слева,
  • style="float: right; margin: 0 0 2px 5px;" - обтекание таблицы текстом справа.

Атрибуты тега td

  • ALIGN - так же означает выравнивание содержимого ячеек.
  • BGCOLOR - цвет фона ячейки,
  • BORDERCOLOR - цвет рамки ячейки,
  • COLSPAN - число ячеек таблицы, объединенных по горизонтали, таким образом можно задать, например, шапку таблицы. Более подробно в примерах разберем ниже.
  • NOWRAP - заставляет содержимое ячейки отображаться в ней без переноса по строке.
  • ROWSPAN - показывает число ячеек, объединенных по вертикали.
  • VALIGN - вертикальное выравнивание содержимого. Переменные: top - по верхнему краю, middle - по середине, bottom - по нижнему краю.

Простая таблица

Код простой таблицы, состоящей из 2 столбцов и 3 строк будет иметь следующий вид:

<table border="1" width="52%"> <tr>   <td>содержимое в 1 столбце и 1 строке</td>   <td>содержимое во 2 столбце и 1 строке</td> </tr> <tr>   <td>содержимое в 1 столбце и 2 строке</td>   <td>содержимое в 2 столбце и 2 строке</td> </tr> <tr>   <td>содержимое в 1 столбце и 3 строке</td>   <td>содержимое в 2 столбце и 3 строке</td> </tr></table>

Внешний вид:

 <table><tr>
<td>Содержимое столбца 1 строки 1</td>
<td>Содержимое столбца 2 строки 1</td></tr>
 <tr>
<td>Содержимое столбца 1 строки 2</td>
<td>Содержимое столбца 2 строки 2</td></tr></table>

Сложные таблицы

Наибольшие затруднения вызывает у начинающих вебмастеров создание сложных таблиц. Для этого воспользуемся приёмами - "таблица в таблице", объединение столбцов и объединение строк.

Таблица в таблице

   Для того, чтобы вложить таблицу в таблицу, нужно вставить код таблицы 2 в нужную ячейку основной таблицы. Пример:

1 ячейка 2 ячейка
ячейка 1 таблицы 2 ячейка 2 таблицы 2
ячейка 3 таблицы 2 ячейка 4 таблицы 2
4 ячейка 5 ячейка 6 ячейка

Скопировать код:

<table border="3"><tr><td>1 ячейка</td><td>2 ячейка</td>
<td><table border="1" bgcolor="A1CCDD"><tr><td>ячейка 1 таблицы 2</td><td>ячейка 2 таблицы 2</td></tr><tr><td>ячейка 3 таблицы 2</td><td>ячейка 4 таблицы 2</td></tr></table></td></tr><tr><td>4 ячейка</td><td>5 ячейка</td><td>6 ячейка</td></tr></table>

Объединение столбцов с помощью colspan

Тег Colspan служит для объединения столбцов. Присуждаем colspan значение 2, чтобы объединить 2 ячейки в одну. Таким образом, создадим шапку таблице.

Ячейка на два столбца
Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

Код:

<table>
<tbody>
<tr>
<th style="text-align: center;" colspan="2">Ячейка на два столбца</th>
</tr>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</tbody>
</table>

Объединение строк при помощи rowspan

Объединение работает в этом случае по вертикали сливая ячейки. Задаем значение атрибуту rowspan, чтобы указать сколько ячеек необходимо слить.

Ячейка на две строки Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4
Ячейка 5 Ячейка 6 Ячейка 7

Код:

<table>
<tbody>
<tr>
<th rowspan="2">Ячейка на две строки</th>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
<tr>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
<td>Ячейка 7</td>
</tr>
</tbody>
</table>

Как вставить таблицу на сайт

Для корректного отображения таблицы в сообщении на сайте, нужно добавлять теги таблицы в запись в режиме HTML (для вордпресс - это режим "Текст"). Некоторые платформы и движки некорректно отображают таблицы (такие, как например, Blogger и Ucoz). Есть секрет вставки таблицы в сложных случаях - необходимо перед вставкой сжать код в любом онлайн-компрессоре кода.

 

7 ответов к «Как создать таблицы HTML»

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *