Таблицы

Таблицы используются для отображения данных в виде строк и столбцов.

<table> - контейнер таблицы;
<tr> - строка;
<th> - заголовочная ячейка (жирный текст по умолчанию);
<td> - обычная ячейка;

Например:

index.html

html

<table>
    <tr>
        <th>Наименование</th>
        <th>Кол-во</th>
    </tr>
    <tr>
        <td>Стол</td>
        <td>1</td>
    </tr>
    <tr>
        <td>Стул</td>
        <td>4</td>
    </tr>
</table>

Атрибуты:

border - добавляет рамки;
colspan - ячейка на несколько столбцов;
rowspan - ячейка на несколько строк;

Например:

index.html

html

<table border="1">
    <tr>
        <th rowspan="2">Имя</th>
        <th colspan="2">Контакты</th>
    </tr>
    <tr>
        <th>Телефон</th>
        <th>Email</th>
    </tr>
    <tr>
        <td>MarkusFx</td>
        <td>+7-999-999-9999</td>
        <td>markusfx@mail.com</td>
    </tr>
</table>

Семантические (описывающие смысл) элементы:

<tbody> - тело таблицы;
<thead> - шапка таблицы;
<tfoot> - подвал таблицы;

Например:

index.html

html

<table>
    <thead>
        <tr>
            <th>Товар</th>
            <th>Цена</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Молоко</td>
            <td>50 ₽</td>
        </tr>
        <tr>
            <td>Рыба</td>
            <td>250 ₽</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Итого</td>
            <td>300 ₽</td>
        </tr>
    </tfoot>
</table>

Таблицы ​

Таблицы