html.okpython.net
Основы создания сайтов
HTML :: Тег <table>
В HTML тег <table> (от англ. table – таблица) предназначен для создания таблиц, каждая из которых должна состоять хотя бы из одной строки и одного столбца, создаваемых при помощи элементов <tr> и <td>. Кроме этого, таблицы могут содержать заголовок и другие элементы.
В HTML5 все использовавшиеся ранее атрибуты таблицы считаются устаревшими, поэтому для оформления следует использовать стили CSS.
Синтаксис
<table>
<tr>
<th>...</th>
</tr>
<tr>
<td>...</td>
</tr>
</table>
Закрывающий тег: обязателен.
Атрибуты
Для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.
Ссылки
Официальный сайт W3C: https://html.spec.whatwg.org/multipage/tables.html#the-table-element
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/table
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <!-- Для оформления используем стили, а не атрибуты --> <style> table, th,td{ border: 1px solid black; } table{ border-collapse: collapse } </style> </head> <body> <table> <!-- Заголовок таблицы --> <caption>Простая таблица с заголовком</caption> <!-- Первая строка таблицы --> <tr> <!-- 2 заголовочные ячейки --> <th>1-я колонка</th> <th>2-я колонка</th> </tr> <tr> <!-- 2 обычные ячейки --> <td>Я – первая ячейка второй строки </td> <td>Я – вторая ячейка второй строки</td> </tr> <tr> <td>Я – первая ячейка третьей строки</td> <td>Я – вторая ячейка третьей строки</td> </tr> </table> </body> </html>
Пример №1
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №2</title> <!-- Для оформления используем стили, а не атрибуты --> <style> table, th,td{ border: 1px solid black; } table{ border-collapse: collapse } </style> </head> <body> <table> <caption>Деление на секции с выделением разным фоном</caption> <thead style="background-color: yellow"> <tr> <th>Я – первая заглавная ячейка </th> <th>А я – вторая заглавная ячейка</th> </tr> </thead> <tbody style="background-color: green"> <tr> <td>Я – первая ячейка в первой строке тела</td> <td>Я – вторая ячейка в первой строке тела</td> </tr> <tr> <td>Я – первая ячейка во второй строке тела</td> <td>Я – вторая ячейка во второй строке тела</td> </tr> </tbody> <tfoot style="background-color: grey"> <tr> <td>Итог:</td> <td>использовано три фона</td> </tr> </tfoot> </table> </body> </html>
Пример №2