Як змінити розмір таблиці в HTML
Розміри таблиці, її висота і ширина, визначаються автоматично в залежності від того, що містять в собі осередки. Чим більше наповнення в осередках, тим більше розміри таблиці і навпаки.
Однак можливості CSS дозволяють змінити розмір таблиці в HTML, вказуючи саме ті значення ширини і висоти, які необхідні. Справедливості заради слід зазначити, що ще атрибути таблиці дозволяють задавати потрібні розміри. Однак, в даний момент ми поговоримо лише про CSS.
Необхідно підкреслити, що кожна таблиця має свою мінімальну ширину і мінімальну висоту, на які впливає її зміст. І навіть якщо ви задасте значення ширини і висоти ще менше, то нічого не станеться. Сторони таблиці не переступив свій мінімум.
Щоб вказати ширину таблиці необхідно використовувати CSS-властивість width, а щоб поставити висоту необхідно застосовувати властивість height.
На прикладі це виглядає наступним чином.
table {width: 500px; height: 100px; }
Результат в браузері: 
Повний код:
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Таблиця з заданими розмірами </ title> <style> table {border: solid 1px blue; border-collapse: collapse; width: 500px; height: 100px; } Td, th {border: solid 1px blue; padding: 10px; } </ Style> </ head> <body> <table> <caption> Таблиця з заданими розмірами </ caption> <tr> <th> 1 </ th> <th> 2 </ th> <th> 3 < / th> <th> 4 </ th> <th> 5 </ th> </ tr> <tr> <th> 1 </ th> <th> 2 </ th> <th> 3 </ th> <th> 4 </ th> <th> 5 </ th> </ tr> <tr> <th> 1 </ th> <th> 2 </ th> <th> 3 </ th> <th> 4 </ th> <th> 5 </ th> </ tr> </ table> </ body> </ html>
Значення ширини і висоти таблиці можуть бути задані, як абсолютною величиною (в пікселях), так і відносної - у відсотках. Наприклад, 20px і 20% відповідно.
Якщо ви використовуєте відсотки, щоб задати розміри таблиці, то вони будуть вираховуватися, відштовхуючись від розмірів батьківського елементу. Якщо говорити про нашому прикладі, то мова йде про вікно браузера.
Існує ще одне значення - auto. І воно є особливим, оскільки з його допомогою обчислення ширини і висоти таблиці відбувається автоматично, за умовчанням. На практиці вказівка цього значення виглядає ось так.
width: auto;
або
height: auto;
Хочемо акцентувати вашу увагу на ще такий важливий момент. Що висоту у відсотках краще не вказувати, оскільки, як правило, в такому випадку вони працювати не буду.
Вказівка розмірів окремих осередків і стовпців
Якщо ви вважаєте, що браузер не коректно поставив ширину колонок, відштовхуючись від вмісту комірок, то ви маєте право розміри осередків і стовпців вказати самостійно. І зараз ми поговоримо про те, як змінити розмір комірки в таблиці HTML.
Зміна розмірів осередків здійснюється за допомогою тих же самих CSS-властивостей, що і розміри таблиці, а саме: width і height.
Щоб додати стилі осередкам, можна використовувати один з двох варіантів:
- Задати осередкам індивідуальні імена класів. Виглядати це буде ось так: class = "cell-50px"
А після цього слід застосувати стилі для даних класів.
- Задіяти атрибут style, всередині якого прописати необхідний CSS-код.
На практиці другий варіант буде виглядати наступним чином:
<Td style = "width: 30px;"> ... </ td>
Однак, хочемо зазначити, що міняти розміри осередків окремо необхідність виникає не так уже й часто. Як правило, це робиться в тих ситуаціях, коли необхідно задати певну ширину стовпців таблиці. В такому випадку, завдання вирішується простіше. Необхідно всього лише вказати ширину осередків першого рядка.
приклад:
<Table> <caption> Таблиця з заданими розмірами </ caption> <tr> <th style = "width: 30px"> 1 </ th> <th> 2 </ th> <th> 3 </ th> <th > 4 </ th> <th> 5 </ th> </ tr> <tr> <th> 1 </ th> <th> 2 </ th> <th> 3 </ th> <th> 4 < / th> <th> 5 </ th> </ tr> <tr> <th> 1 </ th> <th> 2 </ th> <th> 3 </ th> <th> 4 </ th> <th> 5 </ th> </ tr> </ table>
Результат в браузері: 
Як змінити розмір шрифту в таблиці
Найчастіше виникає потреба у зміні розміру тексту в таблиці. Наприклад, в осередках-заголовках. Це можна зробити за допомогою CSS-властивості font-size. Давайте задамо розмір шрифту для елементів <th>:
th {font-size: 30px; }
На цьому даний урок закінчується. Пропоную гарненько помізкувати над домашнім завданням. Прямо так уважно його вивчіть і поміркувати. Всім всього хорошого!