Вивчивши елементи HTML для визначення таблиці, подивіться, як вплинути на зовнішній вигляд таблиці. Мова HTML також надає інструменти для цього, але стандарт CSS2 надає набагато більше можливостей форматування.

З точки зору таблиці стилів, таблиця - це поле, яке містить внутрішні поля для рядків, стовпців або комірок. Є ще деякі можливості форматування, але є такі, які неможливо визначити так легко. Виходячи з цього, таблиці - оскільки вони розміщені або у вікні рівня блоку, або в рядку із заміненим вмістом - мають поля, рамки, внутрішні поля та вміст.

Відповідно, елемент TABLE створює анонімне поле, яке містить поле, що містить саму таблицю, і поле, що містить ім'я таблиці, якщо остання існує. Обидва поля мають власні поля, рамки, внутрішні поля та вміст. Розміри анонімного вікна є якомога меншими, що включає таблицю та поле з іменами. Поля між таблицею та полем об'єднуються, якщо два поля знаходяться один на одному. Переміщення таблиці переміщує весь вікно, тому воно також переміщує поле заголовка.

Місцезнаходження адреси

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

Ширина адресного вікна така ж, як ширина таблиці для нижнього або верхнього розміщення. Звичайно, ситуація інша, якщо поставити на бік. Звичайно, це справедливо лише до тих пір, поки за допомогою властивості width не буде встановлено певне значення ширини вікна.

Положення тексту заголовка всередині вікна можна встановити звичайним способом, тобто горизонтально за допомогою властивості text-align і вертикально за допомогою властивості vertical-align.

Наприклад, встановіть адресу внизу, до тієї ж ширини, що і ваша таблиця, з вирівнюванням за лівим краєм:

Внутрішня стратифікація столу

Це добре відомо, оскільки це може вплинути на фони, що з’являються. Як і інші елементи, внутрішні елементи таблиці створюють прямокутні вікна із вмістом, внутрішніми полями та рамкою. Однак вони не мають запасу.

Насправді ми можемо уявити, що рядки та стовпці визначають сітку, і кожен блок напружений на цих сітках. Обидва рядки, групи стовпців або комірки. Все це буде для нас дуже важливо, щоб ми могли дізнатися, де буде виглядати задній двір.

На малюнку нижче показано накладені шари кожної групи та клітини, витягнуті із стандарту. Скрізь ми бачимо колір, який до нього потрапляє, тому що над ним немає іншого встановленого кольору: або над ним нічого немає, або те, що над ним, - це середній колір.

таблиць

Фон будь-якого з полів у будь-якому шарі можна встановити за допомогою властивостей фону, або зробити його абстрактним словом, і в цьому випадку будуть видно основні кольори. Порожні комірки завжди прозорі.

Наступний приклад ілюструє шари. У першому рядку є чотири комірки, але другий рядок не містить комірок, тому видно фон таблиці, за винятком того, де розташований перший рядок комірок.

Для відображення таблиці стандарт CSS2 визначає два типи алгоритмів, один з яких повинен бути відомий усім браузерам. Кращі гравці знають обидва, і в цьому випадку функція макета таблиці дозволяє їм вибирати між валютами.

Визначення розмірів

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

Вирівняти вміст комірки

Якщо з якихось причин висота комірки перевищує висоту вмісту комірки, виникає питання, куди має йти вміст. Для цього можна використовувати властивість вертикального вирівнювання.

Горизонтальне вирівнювання вмісту комірки можна встановити за допомогою властивості text-align.

Lбthatуsбg

Установивши властивість видимості для згортання, ви можете видалити цілий рядок або стовпець або групу з них. Сенс цього поєднується із використанням сценаріїв: ви можете динамічно видаляти або відображати рядок або стовпець без необхідності перекроювати таблицю.

Рамки та внутрішні розділові лінії

Перший спосіб їх встановити - це параметр кадру елемента TABLE. Кожне зі значень, перерахованих в описі параметрів, визначає, де відображати, а де не відображати кадр. Подібним чином параметр rules може бути використаний для вказівки внутрішніх розділових ліній, які відображатимуться. Параметр border також може бути використаний для вимкнення (0 значень) зовнішнього кадру або встановлення його ширини в пікселях.

Стандарт CSS визначає два різні стандарти кадрування. В одному кожна комірка має суцільний каркас, і між кадрами сусідніх комірок є проміжок. З іншого боку, навпаки, між клітинами видно просту сітку. У моделі кадру з двома кадрами властивості фреймів комірок як різні, так і різні.

Перемикання між двома моделями можна здійснити за допомогою властивості border-kolaps. Щоб встановити першу згадану модель кадру, потрібно додати окремі значення, тоді як якщо не вказано жодне значення або значенням згортання надано властивість, друга модель набуде чинності.

Різні обрамлена модель

У цьому випадку ви можете вказати відстань між сусідніми комірками, використовуючи властивість інтервалу меж. У цій моделі групи рядків і рядків та рядки не можна згрупувати в одному кадрі. Наступний приклад показує макет таблиці в цьому випадку:

Звичайно, на те, що відбувається з порожніми клітинками, також можна впливати. Для цього підходить властивість empty-cells.

Поодинокі кадри

Другий варіант за замовчуванням - коли кадр сусідніх комірок збігається.

Однак тоді виникає питання про те, який параметр повинен бути дійсним, якщо параметр кадру відрізняється від двох сусідніх комірок. У цьому випадку застосовуються такі правила:

  1. Для кадрів, для яких значення стилю межі приховано в елементі, процедура над усіма іншими значеннями: не відображається.
  2. Жодне значення не має найнижчого пріоритету, тобто якщо для будь-якого іншого елемента, що застосовується до цього кадру, встановлено інше значення, воно придушує це значення: буде кадр.
  3. У всіх інших випадках більш тонкі кадри придушуються товстішими. Для декількох кадрів однакової товщини стилі передують один одному в наступному порядку: подвійний, суцільний, штриховий, пунктирний, гребенястий, виїмковий, паз, і нарешті вставлений. .
  4. Якщо кадри відрізняються лише кольором, виграє комірка, яка виграє проти рядка, рядок, який виграє проти групи рядків, виграє стовпець, який виграє проти групи стовпців, і нарешті кадр таблиці.

Проблема перекриття комірок

У разі перекриття комірок, так що коли комірку замінює інша комірка, слід враховувати, що комірка, що перекривається, має поле, що охоплює розташування комірок, які простягаються до розташування комірок. Від цього залежать рами на задньому дворі.

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