Создание таблиц в HTML
Сегодня мы разберем создание таблиц в HTML. Раньше я уже писал, что создание сайтов основывалось лишь на одних таблицах, ведь вы согласитесь, что сайт можно разделить на строки и столбцы, которые будут напоминать таблицу. Например, шапка сайта, отдельная строка, верхнее меню также отдельная строка, левая и центральная часть сайта, отдельная строка, где каждая часть является отдельной ячейкой и т.д. Но все это уже в прошлом. Однако, на данный момент, бывают такие ситуации, что при создании сайта, в некоторых случаях удобнее и быстрее применить таблицу. Поэтому мы с Вами сегодня и разбираем данную тему. Для того чтобы создать таблицу, существует тег table, в котором за отображение строк отвечает тег tr, а за отображение ячеек отвечает тег td. Начнем создавать с вами таблицу и помещать в нее различные значения.
<html>
<head>
<title>Создание таблиц</title>
</head>
<body>
<table border="1">
<tr>
<td>Ячейка номер 1</td>
<td>Ячейка номер 2</td>
<td>Ячейка номер 3</td>
</tr>
<tr>
<td colspan="3">Ячейка шириной в 3 ячейки</td>
</tr>
<tr>
<td>Ячейка номер 5</td>
<td>Ячейка номер 6</td>
<td>Ячейка номер 7</td>
</tr>
</body>
</html>
Результат выполнения кода будет следующим:
Начнем разбирать, что мы здесь написали. Как я и говорил, мы открываем тег table, в котором добавляем необязательный атрибут border, данный атрибут отвечает за рамку, которая будет отображаться вокруг данной таблицы и выделять ее границы. Мы добавили этот атрибут для наглядности таблицы. После тега table, открываем тег tr, который отвечает за строку, внутри которой мы размещаем ячейки с информацией, при помощи тега td. Продолжать данную последовательность действий можно ровно столько, сколько Вам необходимо. Также внутри таблиц, можно создавать другие таблицы и т.д. В одной из строк, мы к ячейке добавили еще один необязательный атрибут colspan, при помощи которого мы можем объединять ячейки, указав, сколько ячеек нам необходимо объединить. В данном случае мы указали, что хотим, чтобы данная ячейка была шириной в три ячейки, т.е. шириной в целую строку. Мы могли бы и указать ширину в 2 ячейки, тогда была бы необходимость указывать еще одну ячейку для полноценной таблицы (для того чтобы закончить строку, ведь в предыдущей строке было 3 ячейки, следовательно и в следующей должно быть 3 ячейки). Также существует атрибут rowspan, который в отличие от colspan, отвечает за высоту объединяемых ячеек. Приводить пример данному атрибуту я не буду, но Вы можете попробовать его применить на своем коде. Это все, что я хотел бы рассказать сегодня о таблицах. Еще раз повторюсь, что они применяются в практике довольно редко, но при необходимости, Вы можете их использовать, и в этом Вас никто не осудит.
