Вёрстка таблиц в HTML: <table>, <tr>, <td>

Верстка таблиц в HTML выполняется с использованием элементов <table>, <td>, <tr>. Эти элементы позволяют создавать таблицы с ячейками и строками. Вот как создать простую таблицу с использованием этих элементов:

<table border="1">
    <tr>
        <td>Ячейка 1,1</td>
        <td>Ячейка 1,2</td>
    </tr>
    <tr>
        <td>Ячейка 2,1</td>
        <td>Ячейка 2,2</td>
    </tr>
</table>

В приведенном примере создается таблица с двумя строками и двумя столбцами. Вот пояснения к элементам таблицы:

• <table>: Это контейнер, который определяет начало и конец таблицы.

  • Атрибут border=”1” используется для добавления границы таблицы для визуальной наглядности. Вы можете настроить стиль границы с помощью CSS.

• <tr>: Это элемент, который представляет собой строку в таблице. Он содержит одну или несколько ячеек <td> или <th>.

  • <tr> используется для создания новой строки в таблице.

• <td>: Это элемент, представляющий ячейку таблицы. Он содержит фактический контент ячейки.

  • <td> используется для добавления данных в ячейку таблицы.

Важные атрибуты и альтернативные элементы:

• <th>: Элемент <th> также используется для создания ячеек таблицы, но он обычно используется для заголовков столбцов или строк. Заголовки визуально обычно выделяются жирным шрифтом и центрируются.

• Атрибуты rowspan и colspan: С помощью этих атрибутов можно объединять ячейки по горизонтали и вертикали.

Пример с объединением ячеек:

<table border="1">
    <tr>
        <td rowspan="2">Объединенная ячейка</td>
        <td>Ячейка 1,2</td>
    </tr>
    <tr>
        <td>Ячейка 2,2</td>
    </tr>
</table>

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