9.1 Использование атрибутов
Стилизация таблиц в HTML может быть выполнена различными способами. Один из них — это использование атрибутов непосредственно в теге таблицы и ее элементах. Хотя современные веб-разработчики обычно предпочитают использовать CSS для стилизации, понимание атрибутов HTML полезно для базовой стилизации.
Основные атрибуты таблицы
Атрибут border
Определяет толщину границы таблицы. Обычно значение указывается в пикселях.
<table border="1">
<tr>
<th>Имя</th>
<th>Оценка</th>
</tr>
<tr>
<td>Иван</td>
<td>91</td>
</tr>
<tr>
<td>Мария </td>
<td>94</td>
</tr>
<tr>
<td>Нина</td>
<td>89</td>
</tr>
</table>
Атрибут cellpadding:
Определяет внутренние отступы ячеек (отступы внутри ячеек от их границ).
<table cellpadding="10">
<tr>
<th>Имя</th>
<th>Оценка</th>
</tr>
<tr>
<td>Иван</td>
<td>91</td>
</tr>
<tr>
<td>Мария</td>
<td>94</td>
</tr>
<tr>
<td>Нина</td>
<td>89</td>
</tr>
</table>
Атрибут cellspacing:
Определяет расстояние между ячейками.
<table cellspacing="5">
<tr>
<th>Имя</th>
<th>Оценка</th>
</tr>
<tr>
<td>Иван</td>
<td>91</td>
</tr>
<tr>
<td>Мария</td>
<td>94</td>
</tr>
<tr>
<td>Нина</td>
<td>89</td>
</tr>
</table>
Атрибуты width и height:
Определяют ширину и высоту таблицы. Эти атрибуты можно использовать также в тегах <td> и <th> для установки размеров ячеек.
<table style="text-align: left;" width="100%" height="200">
<tr>
<th width="50%">Имя</th>
<th width="25%">Проект</th>
<th width="25%">Город</th>
</tr>
<tr>
<td>Алиса</td>
<td>25</td>
<td>Париж</td>
</tr>
</table>
Атрибут align:
Определяет выравнивание таблицы на странице (left, right, center).
<table align="center">
<tr>
<th>Имя</th>
<th>Оценка</th>
</tr>
<tr>
<td>Иван</td>
<td>91</td>
</tr>
<tr>
<td>Мария</td>
<td>94</td>
</tr>
<tr>
<td>Нина</td>
<td>89</td>
</tr>
</table>
Атрибут bgcolor:
Определяет цвет фона таблицы или ячеек.
<table bgcolor="#f0f0f0">
<tr>
<th>Имя</th>
<th>Оценка</th>
</tr>
<tr>
<td>Иван</td>
<td>91</td>
</tr>
<tr>
<td>Мария</td>
<td>94</td>
</tr>
<tr>
<td>Нина</td>
<td>89</td>
</tr>
</table>
9.2 Атрибуты для ячеек таблицы
Атрибуты для ячеек таблицы
Атрибут colspan:
Объединяет ячейки по горизонтали.
<td colspan="2">Объединенная ячейка</td>
Атрибут rowspan:
Объединяет ячейки по вертикали.
<td rowspan="2">Объединенная ячейка</td>
Атрибут align:
Определяет горизонтальное выравнивание содержимого ячейки (left, right, center).
<td align="center">Центрированный текст</td>
Атрибут valign:
Определяет вертикальное выравнивание содержимого ячейки (top, middle, bottom).
<td valign="top">Текст у верхней границы</td>
Атрибут bgcolor:
Определяет цвет фона для ячейки.
<td bgcolor="#ffcc00">Цветной фон</td>
9.3 Полный пример
Полный пример стилизации таблицы с атрибутами:
<table border="1" cellpadding="10" cellspacing="5" width="80%" align="center" bgcolor="#e0e0e0">
<caption>Список студентов и их оценки</caption>
<thead bgcolor="#c0c0c0">
<tr>
<th align="left">Имя</th>
<th align="center">Возраст</th>
<th align="right">Город</th>
</tr>
</thead>
<tbody>
<tr>
<td>Иван</td>
<td align="center">30</td>
<td align="right">Лондон</td>
</tr>
<tr>
<td colspan="2" align="center">Мария и Петр</td>
<td align="right">Ливерпуль</td>
</tr>
<tr>
<td rowspan="2" valign="middle">Анна</td>
<td>25</td>
<td>Манчестер</td>
</tr>
<tr>
<td>27</td>
<td>Лидс</td>
</tr>
</tbody>
<tfoot>
<td colspan="3" align="center">Конец таблицы</td>
</tfoot>
</table>
Объяснение примера
border="1": устанавливает границу таблицы толщиной в 1 пиксельcellpadding="10": устанавливает внутренний отступ в 10 пикселей для всех ячеек таблицыcellspacing="5": устанавливает расстояние в 5 пикселей между ячейками таблицыwidth="80%": устанавливает ширину таблицы в 80% от ширины родительского элементаalign="center": центрирует таблицу на страницеbgcolor="#e0e0e0": устанавливает цвет фона для таблицы<caption>: добавляет заголовок таблицы-
<thead>и<tbody>: группируют заголовки и тело таблицы. Цвет фона для заголовков установлен с помощьюbgcolor="#c0c0c0" <th>и<td>: используются для определения ячеек заголовков и данных<align>и<valign>: определяют горизонтальное и вертикальное выравнивание содержимого ячеек<colspan>и<rowspan>: объединяют ячейки по горизонтали и вертикали
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ