Урок 9. Таблицы в HTML

Таблицы в HTML.

С обновлением языка HTML менялась структура языка появилось множество новых функций, что-то устарело.

Таблицы в данное время остаются не маловажным элементом в создании и верстке сайта.

Для добавления таблицы используется тег <table>. C помощью тега <tr> (table row — строка таблицы) можно добавить строку в таблицу, а для разделения строк на столбцы используется тег <td> (table data — данные таблицы).

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

Содержимое таблицы располагается между тегами <td>, помимо текста в таблицу можно вставить изображения, списки, другие таблицы и прочее.

Для создания «заголовков» в таблице используется тег <th>, текст в таблице будет выделен жирным и выровнен по центру. Других различий между тегом <td> и тегом <th> нет, поэтому допускается использование <th> вместо <td>.

<table>
<tr>
<th>Наименование 1</th>
<th>Наименование 2</th>
</tr>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>
 

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

Таблице можно назначить заголовок при помощи тега <caption>, тег <caption> использует атрибут align который имеет несколько значений для изменения положения заголовка:

• right — выравнивание заголовка по правому краю.
• left — выравнивание заголовка по левому краю.
• top — выравнивание заголовка вверху и по центру таблицы.
• bottom — заголовок располагается внизу таблицы и будет выравнен по центру.

<table>
<caption align="bottom">Пример таблицы</caption>
<tr>
<th>Наименование 1</th>
<th>Наименование 2</th>
</tr>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>
 

Выравнивание таблицы и рамка таблицы

Для заключения таблицы в рамку используйте атрибут border, чтобы выровнять таблицу по определенному краю используйте изученный ранееатрибут align

<table border="1" align="center">
<caption align="bottom">Пример таблицы</caption>
<tr>
<th>Наименование 1</th>
<th>Наименование 2</th>
</tr>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>
 

Объединение строк и столбцов таблицы

Для объединения двух и более столбцов в одну ячейку используйте атрибут colspan, а для объединения двух и более строк используется атрибут rowspan.

<table border="1" align="center">
<caption align="bottom">Пример таблицы</caption>
<tr>
<td rowspan="2">Ячейка 1</td>
<th colspan="2">Ячейка 2</th>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>
 

Задний фон ячейки

Также в таблице можно выделить задний фон ячейки определенным цветом при помощи атрибута bgcolor

<table border="1" align="center">
<caption align="bottom">Пример таблицы</caption>
<tr>
<td rowspan="2">Ячейка 1</td>
<th colspan="2">Ячейка 2</th>
</tr>
<tr>
<td bgcolor="yellow">Ячейка 3</td>
<td bgcolor="blue">Ячейка 4</td>
</tr>
</table>
 

Ширина таблицы, выравнивание содержимого, увеличение отступа от содержимого

Если вы хотите чтобы ваша таблица была определенного размера по ширине можете использовать атрибут width.

По умолчанию содержимое ячеек прижато к левому краю, если использовать атрибут align в теге <tr> все содержимое строки будет выровнено по заданному краю.

Также для увеличения отступа от содержимого внутри ячейки используйтеатрибут cellpadding

<table border="1" align="center" width="250" cellpadding="5">
<caption align="bottom">Пример таблицы</caption>
<tr>
<td rowspan="2">Ячейка 1</td>
<th colspan="2">Ячейка 2</th>
</tr>
<tr align="center">
<td bgcolor="yellow">Ячейка 3</td>
<td bgcolor="blue">Ячейка 4</td>
</tr>
</table>
 

Многие атрибуты для оформления таблицы использованные выше устарели и используются сейчас в Сss, но их можно встретить на устаревших ресурсах, поэтому стоить уделить немного внимания на их изучение.