Лекції
Почати
Почати навчання
JavaRush /Курси /Frontend SELF UA /Стилізування таблиць

Стилізування таблиць

Frontend SELF UA
Рівень 5 , Лекція 4
Відкрита

9.1 Використання атрибутів

Стилізування таблиць в HTML може бути виконано різними способами. Один з них — це використання атрибутів безпосередньо в тегу таблиці та її елементах. Хоча сучасні веб-розробники зазвичай надають перевагу використанню CSS для стилізування, розуміння атрибутів HTML корисне для базового стилізування.

Основні атрибути таблиці

Атрибут border

Визначає товщину рамки таблиці. Зазвичай значення вказується в пікселях.

HTML 
    
      <table border="1">
        <tr>
          <th>Ім'я</th>
          <th>Оцінка</th>
        </tr>
        <tr>
          <td>Іван</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Марія </td>
          <td>94</td>
        </tr>
        <tr>
          <td>Ніна</td>
          <td>89</td>
        </tr>
      </table>

Атрибут cellpadding:

Визначає внутрішні відступи комірок (відступи всередині комірок від їх меж).

HTML 
    
      <table cellpadding="10">
        <tr>
          <th>Ім'я</th>
          <th>Оцінка</th>
        </tr>
        <tr>
          <td>Іван</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Марія</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Ніна</td>
          <td>89</td>
        </tr>
      </table>
Telegram

Атрибут cellspacing:

Визначає відстань між комірками.

HTML 
    
      <table cellspacing="5">
        <tr>
          <th>Ім'я</th>
          <th>Оцінка</th>
        </tr>
        <tr>
          <td>Іван</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Марія</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Ніна</td>
          <td>89</td>
        </tr>
      </table>

Атрибути width і height:

Визначають ширину і висоту таблиці. Ці атрибути можна використовувати також у тегах <td> та <th> для встановлення розмірів комірок.

HTML 
    
      <table style="text-align: left;" width="100%" height="200">
        <tr>
          <th width="50%">Ім'я</th>
          <th width="25%">Проект</th>
          <th width="25%">Місто</th>
        </tr>
        <tr>
          <td>Аліса</td>
          <td>25</td>
          <td>Париж</td>
        </tr>
      </table>

Атрибут align:

Задає вирівнювання таблиці на сторінці (left, right, center).

HTML 
    
      <table align="center">
        <tr>
          <th>Ім'я</th>
          <th>Оцінка</th>
        </tr>
        <tr>
          <td>Іван</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Марія</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Ніна</td>
          <td>89</td>
        </tr>
      </table>

Атрибут bgcolor:

Визначає колір фону таблиці або комірок.

HTML 
    
      <table bgcolor="#f0f0f0">
        <tr>
          <th>Ім'я</th>
          <th>Оцінка</th>
        </tr>
        <tr>
          <td>Іван</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Марія</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Ніна</td>
          <td>89</td>
        </tr>
      </table>

9.2 Атрибути для комірок таблиці

Атрибути для комірок таблиці

Атрибут colspan:

Об'єднує комірки по горизонталі.

HTML 
    
      <td colspan="2">Об'єднана комірка</td>

Атрибут rowspan:

Об'єднує комірки по вертикалі.

HTML 
    
      <td rowspan="2">Об'єднана комірка</td>

Атрибут align:

Визначає горизонтальне вирівнювання вмісту комірки (left, right, center).

HTML 
    
      <td align="center">Центрований текст</td>

Атрибут valign:

Визначає вертикальне вирівнювання вмісту комірки (top, middle, bottom).

HTML 
    
      <td valign="top">Текст у верхній границі</td>

Атрибут bgcolor:

Визначає колір фону для комірки.

HTML 
    
      <td bgcolor="#ffcc00">Кольоровий фон</td>

9.3 Повний приклад

Повний приклад стилізування таблиці з атрибутами:

HTML 
    
      <table border="1" cellpadding="10" cellspacing="5" width="80%" align="center" bgcolor="#e0e0e0">
        <caption>Список студентів та їх оцінки</caption>
        <thead bgcolor="#c0c0c0">
          <tr>
            <th align="left">Ім'я</th>
            <th align="center">Вік</th>
            <th align="right">Місто</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Іван</td>
            <td align="center">30</td>
            <td align="right">Лондон</td>
          </tr>
          <tr>
            <td colspan="2" align="center">Марія та Петро</td>
            <td align="right">Ліверпуль</td>
          </tr>
          <tr>
            <td rowspan="2" valign="middle">Анна</td>
            <td>25</td>
            <td>Манчестер</td>
          </tr>
          <tr>
            <td>27</td>
            <td>Лідс</td>
          </tr>
        </tbody>
        <tfoot>
          <td colspan="3" align="center">Кінець таблиці</td>
        </tfoot>
      </table>

Пояснення прикладу

  • border="1": встановлює рамку таблиці товщиною в 1 піксель
  • cellpadding="10": встановлює внутрішній відступ в 10 пікселів для всіх комірок таблиці
  • cellspacing="5": встановлює відстань в 5 пікселів між комірками таблиці
  • width="80%": встановлює ширину таблиці у 80% від ширини батьківського елемента
  • align="center": центрує таблицю на сторінці
  • bgcolor="#e0e0e0": встановлює колір фону для таблиці
  • <caption>: додає заголовок таблиці
  • <thead> і <tbody>: групують заголовки і тіло таблиці. Колір фону для заголовків встановлено за допомогою bgcolor="#c0c0c0"
  • <th> і <td>: використовуються для визначення комірок заголовків і даних
  • <align> і <valign>: визначають горизонтальне і вертикальне вирівнювання вмісту комірок
  • <colspan> і <rowspan>: об'єднують комірки по горизонталі і вертикалі
Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ