Розрахунок розмірів таблиці (ширина, висота)
Браузер може використовувати один із двох алгоритмів розрахунку значення ширини таблиці: з фіксованою та автоматично визначеною шириною. Конкретний спосіб розрахунку для відповідної таблиці творці Web-сторінок можуть вказувати шляхом вибору значення table-layout.
Table-layout
Значення: auto fixed inherit
Початкове значення: auto
Алгоритм із фіксованою шириною
Значення table-layout: fixed говорить браузеру, що знаходити розміри таблиці потрібно за допомогою «фіксованого» алгоритму обчислень. Подібний метод розрахунку вимагає від агента найменших зусиль, т.к. Шукану ширину визначають значення властивості width таблиці, її стовпців та осередків.
Насамперед агент використовує ширину стовпців із конкретно заданими значеннями (не auto). Потім переглядає осередки першого рядка. Осередки із заданою шириною (не auto) визначають ширину тих стовпців, куди вони входять. Стовпцям з шириною auto, що залишилися, призначається приблизно рівна ширина, достатня, щоб заповнити залишок місця в таблиці.
Підсумковою шириною таблиці стає сума ширин стовпців або значення width табличного елемента table, точніше більше значень.
Істотним аспектом цієї моделі є облік ширини осередків лише першого рядка. Тому якщо верхня комірка таблиці має ширину 200, а будь-яка з розташованих нижче в тому ж стовпці – 350 пікселів, стовпцю таблиці буде призначено ширину 200. У моделі з фіксованою структурою налаштування рядків нижче за першу ігноруються.
Перевага такої моделі полягає в тому, що вона набагато швидше за автоматичну. Ця модель залежить від конкретних значень ширини стовпців і таблиці і не враховує осередки нижче першого рядка, так що потреба в розборі синтаксису та обчисленнірозмірів вмісту всієї таблиці знаходження ширини останньої немає.
table-layout: fixed допоможе зменшити час виведення програми. Досить переконатися, що задана конкретна ширина всіх стовпців або осередків першого рядка таблиці.
Алгоритм із автоматично визначеною шириною
Модель з автоматично визначеною шириною, по суті, не відрізняється від моделі, що застосовувалася в таблицях HTML, межі яких розсувалися по ширині, щоб вмістився весь вміст. У рекомендації CSS значення table-layout: auto гарантує, що незалежно від того, як браузер налаштований за умовчанням, для обчислення розміру таблиці буде використано саме цей метод.
Цей метод більш трудомісткий для браузера. Втім, незважаючи на більший час на обробку, мати таблицю та комірки з автопідбором розміру за вмістом іноді буває бажано.
Оформлення таблиць
Для управління видом таблиць ніякі специфічні характеристики не потрібні. Основні прийоми оформлення та форматування типових компонентів таблиць такі.
Вміст-текст
font та будь-які властивості шрифтів;
всі характеристики, що задають формат тексту;
color (для зміни кольору).
Вирівнювання всередині осередків таблиці
text-align - горизонтальне вирівнювання тексту в комірці;
vertical-align – вертикальне вирівнювання тексту в комірці.
Застосування цих властивостей до елемента
Колір фону та ілюстрації
У осередках, рядках, їх групах, стовпцях та групах стовпців, а також таблиці в цілому можна задати свій колір тла або фонове зображення: background та інші властивості, що задають тло.
Відступи
Для вказівки відступу зовні таблиці можна використовувати будь-яку відповідну властивість(Margin, padding).
До внутрішніх елементів: осередків, рядків, стовпців – поняття «відступ» не застосовується.
Заповнення та розбивка між осередками
padding та властивості формування заповнення в CSS можна задавати для кожного окремого осередку, а не всіх відразу.
У HTML простір між осередками визначається атрибутом клітинисхильності. Прямого аналога йому у CSS немає. Найближчим за призначенням є властивість border-collapce:separate та вказівка для розширення простору між осередками значення border-spacing.
Розмір та позиціонування таблиці
Таблиця позиціонується як будь-який інший блок.
width – крім рядків та груп рядків;
height – крім стовпців та груп стовпців.
Властивості стовпців
Осередки таблиць завжди є нащадками рядків, проте в CSS описує чотири дозволені властивості стовпців
Border
Background
Width
Visibility
Практика
Оформіть 3 таблиці за допомогою стилів CSS:
1)