Что такое таблица

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

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

Основные теги таблиц

Для создания таблицы используются следующие теги:

Тег	Назначение
`<table>`	таблица
`<tr>`	строка таблицы
`<td>`	ячейка таблицы
`<th>`	заголовок таблицы

Создание таблицы

Простейшая таблица:

<table>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>

<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>

Разбор: - <table> — создаёт таблицу - <tr> — создаёт строку - <td> — создаёт ячейку

Заголовки таблицы

Для заголовков используется тег:

<th>

Пример:

<table>
<tr>
<th>Имя</th>
<th>Возраст</th>
</tr>

<tr>
<td>Иван</td>
<td>18</td>
</tr>

<tr>
<td>Анна</td>
<td>19</td>
</tr>
</table>

Заголовки отображаются жирным шрифтом.

Таблица студентов (пример)

<table>
<tr>
<th>Имя</th>
<th>Группа</th>
<th>Возраст</th>
</tr>

<tr>
<td>Иван</td>
<td>ИС-21</td>
<td>18</td>
</tr>

<tr>
<td>Анна</td>
<td>ИС-21</td>
<td>19</td>
</tr>

<tr>
<td>Олег</td>
<td>ИС-22</td>
<td>18</td>
</tr>

</table>

Атрибут border

Чтобы сделать границы таблицы, можно использовать атрибут:

border

Пример:

<table border="1">

Однако в современных сайтах оформление таблиц выполняется через CSS.

Объединение ячеек

Иногда требуется объединить ячейки.

Для этого используются атрибуты: - colspan - rowspan

Объединение столбцов

<td colspan="2">Объединённая ячейка</td>

Объединение строк

<td rowspan="2">Объединение строк</td>

Пример таблицы с объединением

<table border="1">

<tr>
<th>Имя</th>
<th colspan="2">Оценки</th>
</tr>

<tr>
<td>Иван</td>
<td>5</td>
<td>4</td>
</tr>

</table>