HTML <table> тег

  • Предыдущая страница <svg>
  • Следующая страница <tbody>

Определение и использование

<table> Тэг определяет HTML-таблицу.

Таблица HTML состоит из <table> элемент и один или несколько <tr>и<th> и <td> Состав элементов:

Таблица HTML может также содержать следующие элементы:

Дополнительная информация:

Обучение HTML:HTML таблица

Руководство по HTML DOM:Объект Table

Обучение CSS:Настройка стиля таблицы

Пример

Пример 1

Простая таблица HTML, содержащая два столбца и две строки:

<table>
  <tr>
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>￥3400</td>
  </tr>
</table>

Попробуйте сами

Пример 2

Как добавить сжатые рамки к таблице (используя 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>￥3400</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>￥4500</td>
  </tr>
</table>
</body>
</html>

Попробуйте сами

Пример 3

Как выровнять таблицу направо (используя CSS):

<table style="float:right">
  <tr>
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>￥4500</td>
  </tr>
</table>

Попробуйте сами

Пример 4

Как выровнять таблицу по центру (используя 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>￥3400</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>￥4500</td>
  </tr>
</table>

Попробуйте сами

Пример 5

Как добавить фоновый цвет к таблице (используя CSS):

<table style="background-color:#00FF00">
  <tr>
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>￥4500</td>
  </tr>
</table>

Попробуйте сами

Пример 6

Как добавить внутренний интервал к таблице (используя 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>￥3400</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>￥4500</td>
  </tr>
</table>
</body>
</html>

Попробуйте сами

Пример 7

Как установить ширину таблицы (используя CSS):

<table style="width:400px">
  <tr>
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>￥4500</td>
  </tr>
</table>

Попробуйте сами

Пример 8

Как создать заголовок таблицы:

<table>
  <tr>
    <th>Имя</th>
    <th>Электронная почта</th>
    <th>Телефон</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Попробуйте сами

Пример 9

Как создать таблицу с заголовком:

<table>
  <caption>Сбережения每个月</caption>
  <tr>
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>￥4500</td>
  </tr>
</table>

Попробуйте сами

Пример 10

Как определить ячейки таблицы, простирающиеся на несколько строк или столбцов:

<table>
  <tr>
    <th>Имя</th>
    <th>Электронная почта</th>
    <th colspan="2">Телефон</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

Попробуйте сами

Глобальные свойства

<table> Тег также поддерживает Глобальные свойства HTML.

Свойства событий

<table> Тег также поддерживает События свойств HTML.

Стандартные CSS настройки

Большинство браузеров будут использовать следующие значения по умолчанию для отображения <table> Элементы:

table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: серый;
}

Попробуйте сами

Поддержка браузеров

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка
  • Предыдущая страница <svg>
  • Следующая страница <tbody>