HTML Тег <table>
Пример
Простая 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>and-shhipunov@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>and-shhipunov@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;
}
Попробуйте сами »