Пример
Простая HTML таблица, содержащая два столбца и две строки:
<table>
<tr>
<th>Месяц</th>
<th>Накопления</th>
</tr>
<tr>
<td>Январь</td>
<td>100$</td>
</tr>
</table>
Попробуйте сами »
Больше примеров "Попробуйте сами" ниже.
Определение и использование
Тег <table> определяет HTML таблицу.
HTML таблица состоит из одного элемента <table> и одного или более элементов <tr>,
<th>, и <td>.
Элемент <tr> определяет строку таблицы, элемент <th> определяет заголовок таблицы, а элемент <td> определяет ячейку таблицы.
HTML таблица также может включать элементы <caption>, <colgroup>, <thead>, <tfoot>, и <tbody>.
Поддержка браузерами
| Элемент | |||||
|---|---|---|---|---|---|
| <table> | Да | Да | Да | Да | Да |
Глобальные атрибуты
Тег <table> также поддерживает Глобальные атрибуты в HTML.
Атрибуты событий
Тег <table> также поддерживает Атрибуты событий в HTML.
Больше примеров
Пример
Как добавить схлопнутые границы к таблице (с помощью CSS):
<html>
<head>
<style>
table, th, td {
border: 1px solid
black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Месяц</th>
<th>Накопления</th>
</tr>
<tr>
<td>Январь</td>
<td>100$</td>
</tr>
<tr>
<td>Февраль</td>
<td>80$</td>
</tr>
</table>
</body>
</html>
Попробуйте сами »
Пример
Как выровнять таблицу по правому краю (с помощью CSS):
<table style="float:right">
<tr>
<th>Месяц</th>
<th>Накопления</th>
</tr>
<tr>
<td>Январь</td>
<td>100$</td>
</tr>
<tr>
<td>Февраль</td>
<td>80$</td>
</tr>
</table>
Попробуйте сами »
Пример
Как выровнять таблицу по центру (с помощью CSS):
<html>
<head>
<style>
table, th, td {
border: 1px solid
black;
}
table.center {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<table
class="center">
<tr>
<th>Месяц</th>
<th>Накопления</th>
</tr>
<tr>
<td>Январь</td>
<td>100$</td>
</tr>
<tr>
<td>Февраль</td>
<td>80$</td>
</tr>
</table>
Попробуйте сами »
Пример
Как добавить фоновый цвет таблице (с помощью CSS):
<table style="background-color:#00FF00">
<tr>
<th>Месяц</th>
<th>Накопления</th>
</tr>
<tr>
<td>Январь</td>
<td>100$</td>
</tr>
<tr>
<td>Февраль</td>
<td>80$</td>
</tr>
</table>
Попробуйте сами »
Пример
Как добавить отступы к таблице (с помощью CSS):
<html>
<head>
<style>
table, th, td {
border: 1px solid
black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Месяц</th>
<th>Накопления</th>
</tr>
<tr>
<td>Январь</td>
<td>100$</td>
</tr>
<tr>
<td>Февраль</td>
<td>80$</td>
</tr>
</table>
</body>
</html>
Попробуйте сами »
Пример
Как задать ширину таблицы (с помощью CSS):
<table style="width:400px">
<tr>
<th>Месяц</th>
<th>Накопления</th>
</tr>
<tr>
<td>Январь</td>
<td>100$</td>
</tr>
<tr>
<td>Февраль</td>
<td>80$</td>
</tr>
</table>
Попробуйте сами »
Пример
Как создать заголовки таблицы:
<table>
<tr>
<th>Имя</th>
<th>Email</th>
<th>Телефон</th>
</tr>
<tr>
<td>Джон Доу</td>
<td>john.doe@example.com</td>
<td>123-45-678</td>
</tr>
</table>
Попробуйте сами »
Пример
Как создать таблицу с заголовком:
<table>
<caption>Ежемесячные накопления</caption>
<tr>
<th>Месяц</th>
<th>Накопления</th>
</tr>
<tr>
<td>Январь</td>
<td>100$</td>
</tr>
<tr>
<td>Февраль</td>
<td>80$</td>
</tr>
</table>
Попробуйте сами »
Пример
Как определить ячейки таблицы, которые охватывают более одной строки или одного столбца:
<table>
<tr>
<th>Имя</th>
<th>Email</th>
<th colspan="2">Телефон</th>
</tr>
<tr>
<td>Джон Доу</td>
<td>john.doe@example.com</td>
<td>123-45-678</td>
<td>212-00-546</td>
</tr>
</table>
Попробуйте сами »
Связанные страницы
Учебник HTML: HTML таблицы
Справка по HTML DOM: Объект Table
Учебник CSS: Стилизация таблиц
Настройки CSS по умолчанию
Большинство браузеров будут отображать элемент <table> со следующими значениями по умолчанию:
Пример
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
Попробуйте сами »