При создании веб-страниц часто нужно структурировать какую-либо информацию и представить ее в виде таблиц.

В этой заметке я публикую информацию о том, как можно создать самую простую таблицу с помощью HTML.

Работать с таблицами для начинающего веб-разработчика может быть не совсем просто, т.к. нет одного элемента, который сразу бы создал таблицу. Чтобы таблица появилась, нужно использовать целую серию HTML элементов. Самые главные из них рассмотрим прямо сейчас.

Прежде чем начнем, нужно понимать, что составными элементами таблицы являются строки, столбцы(колонки) и ячейки.

Строки располагаются по горизонтали таблицы:

2

На изображении они выделены зеленым цветом.

Столбцы (колонки) располагаются по вертикали таблицы:

1

На изображении они выделены красным цветом.

Ячейка - это элемент таблицы, который образуется на пересечении строки и столбца.

3

На изображении некоторые из них выделены синим цветом.

Самый главный элемент, который создает таблицу - это парный элемент

<table></table>

Но, написав только его никакой таблицы у нас не появиться.

Убедимся в этом здесь:

Для того, чтобы таблица появилась, нужно сообщить браузеру сколько строк и колонок в ней должно быть.

Указание количества строк в таблице производится с помощью элемента <tr></tr>, а указание количества столбцов с помощью элемента <td></td>.

Правило для создания таблицы следующее:

сначала создается одна строка, в ней, по порядку, создаются столбец за столбцом, затем создается следующая строка, в ней также создаются столбцы и.т.д.

Давайте посмотрим, как это будет выглядеть, если создавать таблицу с помощью HTML-кода:

<table>
<tr>
<td>Столбец 1</td>
<td>Столбец 2</td>
</tr>
<tr>
<td>Столбец 1</td>
<td>Столбец 2</td>
</tr>
</table>

Только что мы с вами создали самую простую HTML-таблицу. В таблице есть 2 строки, которые создавались с помощью элемента tr и в каждой строке есть 2 столбца, которые создавались с помощью элемента td.

Единственное, в ней пока еще нет границ, но это уже полноценная таблица. Создание и оформление границ для таблицы - это задача стилей CSS. В разделе по HTML я останавливаться на этом не буду.

Это основы, которые нужно знать для создания таблиц. Попробуйте сами поэкспериментировать с этим и создавать таблицы с разным количеством строк и столбцов.