Как сделать таблицу в HTML — примеры кода для начинающих

Таблицы всегда нужны для четкого распределения каких либо данных, будь то расписания, прайс листы, распорядок дня, список сотрудников и т.д. Сейчас мы разберем, как сделать таблицу в html и добавим немного css для внешнего вида. Данная статья рассчитана на новичков, на тех кто уже понимает что такое html и css.

Как сделать таблицу в HTML основными тегами

Для того чтоб создать базовую html таблицу без каких либо параметров, используют следующие теги:

• <table> — главный тег таблицы, с которого все начинается.
• <thead> — раздел таблицы в котором размещаются заголовки таблицы.
• <tfoot> — раздел таблицы в котором размещаются данные нижнего колонтитула.
• <tbody> — раздел таблицы в котором размещаются основные данные.
• <tr> — строка таблицы, в которой будут ячейки с данными.
• <th> — ячейка заголовок, в которой обычно размещают тип данных (имя, email, адрес).
• <td> — обычная ячейка, в которой размещаются основные данные.

Пример кода простой HTML таблицы

На данном примере отображен код простой html таблицы, состоящей из вышеприведенных тегов. В главном теге таблицы <table> задаем атрибут border=»1″ для выполнения обводки, чтоб более четко видеть нашу таблицу.

<table border="1">
    <thead>
        <tr>
            <th>Имя</th>
            <th>Возраст</th>
            <th>E-mail</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Имя</td>
            <td>Возраст</td>
            <td>E-mail</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Иван</td>
            <td>25</td>
            <td>ivan@example.ru</td>
        </tr>
        <tr>
            <td>Мария</td>
            <td>23</td>
            <td>mariya@example.ru</td>
        </tr>
        <tr>
            <td>Екатерина</td>
            <td>20</td>
            <td>ekaterina@example.ru</td>
        </tr>
    </tbody>
</table>

Основные атрибуты таблицы еще могут быть такими:

• border — рамка таблицы.
• cellpadding — внутренние отступы.
• cellspacing — расстояние между ячейками.

Пример кода HTML таблицы с CSS оформлением

В данном примере мы создаем практически такую же таблицу как и в прошлом примере, но уже с другими данными. Затем, добавляем CSS стили чтоб изменить внешний вид html таблицы.

<table border="1">
    <thead>
        <tr>
            <th>Название</th>
            <th>Цена</th>
            <th>Артикул</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Название</td>
            <td>Цена</td>
            <td>Артикул</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Чайник</td>
            <td>500р.</td>
            <td>0001</td>
        </tr>
        <tr>
            <td>Сковорода</td>
            <td>700р.</td>
            <td>0002</td>
        </tr>
        <tr>
            <td>Кастрюля</td>
            <td>1000р.</td>
            <td>0003</td>
        </tr>
    </tbody>
</table>

Далее, добавляем CSS код между тегами <style> и </style>.

table {
  border-collapse: collapse;
  width: 50%;
  margin: 20px auto;
}

th, td {
  border: 1px solid #333;
  padding: 10px;
  text-align: center;
}

th {
  background-color: #f2f2f2;
}

С помощью border-collapse: collapse; рамки ячеек объединяются, а padding делает таблицу удобнее для чтения. Текст размещаем по центру с помощью text-align и задаем фон с помощью background-color.

Слияние ячеек (colspan и rowspan)

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

<table border="1">
    <thead>
        <tr>
            <th colspan="3">Рейтинг автомобилей</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Mercedes</td>
            <td>10 000 000р.</td>
            <td>2023г.</td>
        </tr>
        <tr>
            <td>BMW</td>
            <td>5 000 000р.</td>
            <td>2020г.</td>
        </tr>
        <tr>
            <td rowspan="3">LADA</td>
            <td>700 000р.</td>
            <td>2018г.</td>
        </tr>
        <tr>
            <td>600 000р.</td>
            <td>2017г.</td>
        </tr>
    </tbody>
</table>

Теперь мы объединили атрибутом colspan столбцы, а атрибутом rowspan — строки.

Итоги создания таблицы HTML

Теперь вы узнали как сделать таблицу в HTML и как применять к ней те или иные атрибуты, которые будут структурировать ваши данные. А также, как применять CSS стили, изменяя внешний вид таблицы. Но, вручную постоянно заполнять таблицу будет не очень удобно, потому как данных может быть очень много. Для этого обычно используют языки программирования, например, такой язык как PHP. С помощью него генерируют строки таблицы сразу заполняя данными, но это уже в следующих статьях…