Как создать таблицы 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). Есть секрет вставки таблицы в сложных случаях - необходимо перед вставкой сжать код в любом онлайн-компрессоре кода.

 

Оцените статью
Добавить комментарий

  1. Анонимный

    спасибо

    Ответить
  2. Анонимный

    Большое спасибо!

    Ответить
  3. Анонимный

    БОЛЬШОЕ СПАСИБО! бУДУ УЧИТЬСЯ.

    Ответить
  4. Анонимный

    Позновательно, поучительно, ОГРОМНОЕ СПАСИБО!

    Ответить
  5. Анонимный

    у Вас опечатка

    Ответить
  6. Аноним

    Заметила, в таблице. Исправлю.

    Ответить
  7. Анонимный

    Большое спасибо!

    Ответить