CSS. Урок 8 Таблиці

Таблиці без стилю

Ознайомившись в уроках html з тегами <table> <th> <tr> <td> ви вже можете побудувати таблицю у web документі, але без прикрас. Для поліпшення зовнішнього вигляду таблиці, варто застосовувати стилі таблиць

Отже, розглянемо основне:

  1. Тло елементів таблиці
  2. Рамки елементів таблиці
  3. Згортання рамок
  4. Розміри елементів таблиці
  5. Форматування вмісту таблиці

8.1 Тло таблиці

Для таблиці, як і для всіх інших елементів html з тлом, застосовується css - властивість background. Про цю властивість розповідалося в уроці №3

За допомогою background можна налаштувати тло всієї таблиці(table), або окремих рядків(tr), або окремих комірок(th,td). В наступному прикладі вся таблиця має сіре тло, одна комірка - зелене, а рядочок має жовте тло.

css код
.gray {
background-color:lightgray;
}
.yellow {
background-color:yellow;
}
.green {
background-color:lightgreen;
}

html код
<table class = "gray">
<tr><th>text</th><th class = "green">text </th></tr>
<tr class = yellow><td>text</td><td>text </td></tr>
<tr><td>text</td><td>text </td></tr>
</table>

8.2 Рамки таблиці

Для налаштування рамок таблиць використовують властивість border. Ця властивість розглянута в уроці №7

Якщо властивість border застосувати тільки для тега table, то таблиця матиме виключно зовнішню рамку. Для створення всіх рамок т властивість border застосувати для всіх тегів таблиці.

Наступний приклад демонструє використання border у таблиці:

css код
table, th, td {
border:1px solid red;
}

html код
<table>
<tr><th> name</th><th> class </th></tr>
<tr><td> Antony Grag </td><td> 11 </td></tr>
<tr><td> Eugeniy Sandick </td><td> 11 </td></tr>
</table>

8.3 Згортання рамок boder-collapse

З прикладу видно, що рамки навколо клітинок мають відступ від рамки навколо таблиці. Для того, щоб цей відступ прибрати треба додати css властивість boder-collapse:collapse до тега table.

css код
table { border-collapse:collapse; }
table, th, td {
border:1px solid red;
}

html код
<table>
<tr><th> name</th><th> class </th></tr>
<tr><td> Antony Grag </td><td> 11 </td></tr>
<tr><td> Eugeniy Sandick </td><td> 11 </td></tr>
</table>

8.4 Ширина та висота таблиці

Ширина і висота таблиці задається властивостями width:значення; та height:значення; відповідно. Значення розміру можуть бути як абсолютні (наприклад px), так і відносні (наприклад %).

Розглянемо приклад:

css код
table {
border-collapse:collapse;
width:100%;
}
table, th, td {
border:1px solid red;
}
th {height:40px;}

html код
<table>
<tr><th> name</th><th> class </th></tr>
<tr><td> Antony Grag </td><td> 11 </td></tr>
<tr><td> Eugeniy Sandick </td><td> 11 </td></tr>
</table>

8.5 Форматування вмісту таблиці.

Горизонтальне розташування тексту встановлюється для елементів <th> та <td> стилем text-align:значення.

Значення може бути left, right, center. За замовченням - left.

Вертикальне розташування тексту встановлюється для елементів <th> та <td> стилем vertical-align:значення.

Значення може бути top, bottom, center. За замовченням - center.

Розглянемо приклад:

css код
table {
border-collapse:collapse;
width:100%;
}
table, th, td {
border:1px solid red;
}
th,td {height:40px;
text-align:center;
vertical-align:bottom;
}

html код
<table>
<tr><th> name</th><th> class </th></tr>
<tr><td> Antony Grag </td><td> 11 </td></tr>
<tr><td> Eugeniy Sandick </td><td> 11 </td></tr>
</table>

Виконайте вправу №6 в зишиті..

Виконайте вправу в редакторі html

Завантажте файл із зображеннями таблиці. Створіть таблиці в html документі за зразком, використовуючи стилі.