В html верстке можно создавать таблицы. Для этого существуют тэги table, tr, th и td. 

table – это контейнер для таблицы; 

tr – создает строки таблицы; 

td – ячейка таблицы; 

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

Пример: 

    <table> 

        <tr> 

            <th>№ п/п</th> 

            <th>Продукт</th> 

            <th>Стоимость</th> 

        </tr> 

        <tr> 

            <td>1</td> 

            <td>Смартфон</td> 

            <td>100 р</td> 

        </tr> 

        <tr> 

            <td>2</td> 

            <td>Телевизор</td> 

            <td>500 р</td> 

        </tr> 

    </table> 

Для создания рамки воспользуемся уже изученным свойством css border: 

    <style> 

        table { 

            border: solid 2px black; 

        } 

        td { 

            border: solid 2px black; 

        } 

        th { 

            border: solid 2px black; 

        } 

    </style> 

Результат: 

Как видно из результата – сама таблица и её ячейки имеют свои собственные рамки. Для того, что бы их объеденить в одну, существует свойство border-collapse:collapse, которое надо применить к тэгу table: 

        table { 

            border: solid 2px black; 

            border-collapse: collapse; 

        } 

Результат: 

Так же можно применять и другие css свойства, пример: 

        td, th { 

            padding: 5px; 

            text-align: center; 

        } 

Ячейки таблиц можно объединять. Для этого существуют атрибут colspan ( объединяет по горизонтали) и rowspan (объединяет по вертикали). Данным атрибутам присваивается целое число – количество ячеек, которые надо объединить. 

    <table> 

        <tr> 

            <th>№ п/п</th> 

            <th>Продукт</th> 

            <th>Стоимость</th> 

            <th>Дата покупки</th> 

        </tr> 

        <tr> 

            <td>1</td> 

            <td>Смартфон</td> 

            <td>100 р</td> 

            <td rowspan="2">20.12.2023</td> 

        </tr> 

        <tr> 

            <td>2</td> 

            <td>Телевизор</td> 

            <td>500 р</td> 

        </tr> 

    </table> 

Далее в таблице представлены тэги и их атрибуты для создания таблиц.  

Примечание: как правило атрибуты, которые можно заменить свойствами css, сейчас не используются. 

Тэги для создания таблиц.