Урок №17. HTML. Таблиці

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



HTML/CSS. Як додати таблицю в HTML-код на веб-сайті?

HTML Таблиця. Приклад

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
Спробуйте самі! »

Визначення таблиці в HTML

Таблиця в HTML визначається тегом <table>. Кожен рядок таблиці визначається тегом <tr>. Заголовок таблиці визначається тегом <th>. За замовчуванням заголовки таблиць виділені жирним шрифтом і центровані. Чарунка з данними в таблиці (data/cell) визначається тегом <td>.

Приклад:

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Спробуйте самі! »

Примітка: Елементи <td> є контейнерами даних таблиці. Вони можуть містити всілякі елементи HTML; текст, зображення, списки, інші таблиці тощо


HTML таблиця - додавання межі таблиці (border)

Якщо ви не вкажете межу для таблиці, вона буде відображатися без кордонів. Межа встановлюється за допомогою CSS властивості border.

Приклад:

table, th, td{
  border: 1px solid black;
}
Спробуйте самі! »

Примітка: Не забувайте визначати межі як для таблиці, так і для чарунок таблиці.


HTML таблиця - згорнуті межі (border-collapse)

Якщо ви хочете, щоб рамки таблиці відображалися в один кордон, додайте CSS-властивість border-collapse.

Приклад:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
Спробуйте самі! »

HTML таблиця - додавання внутрішнього відступу в чарунках (padding)

Внутрішній відступ чарунки визначає простір між вмістом чарунки та її межами. Якщо ви не вказуєте внутрішній відступ, чарунки таблиці відображатимуться без відступу.

Щоб встановити додавання внутрішнього відступу, використовуйте CSS властивість padding:

Приклад:

th, td {
  padding: 15px;
}
Спробуйте самі! »

HTML таблиця - вирівнювання заголовків ліворуч (text-align)

За замовчуванням заголовки таблиць виділені жирним шрифтом і центровані. Для вирівнювання заголовків таблиць використовуйте CSS властивість text-align:

Приклад:

th {
  text-align: left;
}
Спробуйте самі! »

HTML таблиця - додавання інтервалу між кордонами (border-spacing)

Інтервал між кордонами визначає простір між чарунками. Щоб встановити інтервал між кордонами, використовуйте CSS властивість border-spacing:

Приклад:

table {
  border-spacing: 5px;
}
Спробуйте самі! »

Примітка: Якщо таблиця має border-collapse, то встановлення border-spacing ніяк е впливає.


HTML таблиця - чарунки, які охоплюють багато стовпців (colspan)

Щоб зробити чарунку, яка охоплює більш ніж один стовпець, використовуйте атрибут colspan:

Приклад:

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>
Спробуйте самі! »

HTML таблиця - чарунки, які охоплюють багато рядків (rowspan)

Щоб зробити чарунку, яка охоплює більш ніж один рядок, використовуйте атрибут rowspan:

Приклад:

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>
Спробуйте самі! »

HTML таблиця - додавання підпису (caption)

Щоб додати підпис до таблиці, використовуйте тег <caption>:

Приклад:

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>
Спробуйте самі! »

Примітка: Тег <caption> має бути вставлений відразу після тегу <table>


Особливий стиль для однієї таблиці (id)

Щоб визначити особливий стиль для окремої таблиці, додайте атрибут id (ідентифікатор) до таблиці:

Приклад:

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Тепер ви можете визначити особливий стиль для цієї таблиці:

table#t01 {
  width: 100%;
  background-color: #f1f1c1;
}
Спробуйте самі! »

І додати нові стилі для цієї таблиці:

table#t01 tr:nth-child(even) {
  background-color: #eee;
}
table#t01 tr:nth-child(odd) {
  background-color: #fff;
}
table#t01 th {
  color: white;
  background-color: black;
}
Спробуйте самі! »

Резюме розділу


Перевірте себе вправами!


HTML теги таблиці

Тег Опис
<table> Визначає таблицю
<th> Визначає чарунку заголовка таблиці
<tr> Визначає рядок у таблиці
<td> Визначає чарунку в таблиці
<caption> Визначає підпис таблиці
<colgroup> Визначає групу з одного або декількох стовпців у таблиці для форматування
<col> Вказує властивості стовпців для кожного стовпця в елементі <colgroup>
<thead> Групує вміст заголовка (head) в таблиці
<tbody> Групує вміст тіла (body) в таблиці
<tfoot> Групує вміст нижнього колонтитула (footer) в таблиці

Примітка: Для отримання повного списку всіх доступних HTML тегів, відвідайте довідник HTML тегів.



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.