- основа таблиці
- заголовок таблиці
- секції таблиці
- об'єднання осередків
- Оформлення таблиць CSS властивостями
- Рамки для осередків
- розміри осередків
- Відступи в осередках
- Розташування заголовка
- колір осередків
- Вирівнювання вмісту осередку
- Оформлення вмісту комірки
- Всі CSS стилі застосовуються до таблиці
Наша взаимовыгодная связь https://banwar.org/
У недавньому минулому популярність таблиць була неймовірно висока, вони використовувалися не тільки для представлення табличних даних, але також були основним засобом для формування структури документа (не дивлячись на ряд недоліків). В даний час для верстки документа все більше використовують блоковий елемент DIV.
Таблиця ж залишається основним елементом мови HTML, яка незамінна для створення складних конструкцій, для представлення табличних даних, де блокові елементи безсилі, і не володіють такою варіативністю.
основа таблиці
Таблиця є складною конструкцією, і формується з декількох HTML тегів. На першому етапі вона будується з блочного елемента <TABLE> </ TABLE>, який представляє фундамент, основу таблиці. Наступний етап в побудові - рядки таблиці, які формуються за допомогою парних тегів <TR> </ TR>:
<TABLE> <TR> </ TR> <TR> </ TR> </ TABLE>
Заключний етап побудови таблиці є створення осередків. Для цієї мети є дві категорії тегів:
- <TH> </ TH> - парний тег створює осередок, яка служить заголовком стовпця, даний тег є не обов'язковим;
- <TD> </ TD> - обов'язковий парний тег створює осередки - основу таблиці;
<TABLE> <TR> <TH> Заголовок 1 </ TH> <TH> Заголовок 2 </ TH> <TH> Заголовок 3 </ TH> <TH> Тема 4 </ TH> <TH> Тема 5 </ TH > </ TR> <TR> <TD> Осередок 1,1 </ TD> <TD> Осередок 1,2 </ TD> <TD> Осередок 1,3 </ TD> <TD> Осередок 1,4 </ TD> <TD> Осередок 1,5 </ TD> </ TR> <TR> <TD> Осередок 2,1 </ TD> <TD> Осередок 2,2 </ TD> <TD> Осередок 2,3 < / TD> <TD> Осередок 2,4 </ TD> <TD> Осередок 2,5 </ TD> </ TR> <TR> <TD> Підсумок 1 </ TD> <TD> Підсумок 2 </ TD> <TD> Підсумок 3 </ TD> <TD> Підсумок 4 </ TD> <TD> Підсумок 5 </ TD> </ TR> </ TABLE>
Рис 1. Таблиця
Як видно з коду розташованого вище, таблиця містить чотири рядки (<TR>) і п'ять стовпців. Осередки першого рядка - заголовки стовпців (<TH>). З другого рядка по четверту осередки містять основні дані таблиці (<TD>). Теги <TH>, <TD> універсальні, і можуть містити в собі не тільки звичайний текст, а й всілякі теги, аж до інших таблиць!
Зверніть увагу на структуру таблиці, вона має строго вкладену ієрархічну структуру, якщо її порушити і переставити теги в іншому порядку, таблиця, або не відобразиться на сторінці, або відобразиться, але не коректно. Основні правила при конструюванні таблиці:
- Парний тег <TABLE> основа таблиці, всі інші теги вкладені в нього;
- Парний тег <TR> другий рівень таблиці або її рядок, повинен бути вкладений в тег <TABLE>;
- Парні теги <TH> і <TD> третій рівень таблиці або її осередки, повинні бути вкладені в тег <TR> і містять табличні дані;
- Якщо помістити будь-який інший тег або текст поза парного тега <TD>, то ці дані будуть проігноровані і ніяк не відобразиться на веб-сторінці;
заголовок таблиці
У таблиці передбачена можливість додавання заголовка, за допомогою парного тега <CAPTION>, який розміщується слідом за тегом <TABLE>. В принципі його можна вставити в будь-яке місце таблиці, це не є помилкою. За замовчуванням текст заголовка виводиться над таблицею.
<TABLE> <CAPTION> Тема Таблиці </ CAPTION> <TR> <TH> Заголовок 1 </ TH> <TH> Заголовок 2 </ TH> <TH> Заголовок 3 </ TH> <TH> Тема 4 </ TH > <TH> Тема 5 </ TH> </ TR> <TR> <TD> Осередок 1,1 </ TD> <TD> Осередок 1,2 </ TD> <TD> Осередок 1,3 </ TD> <TD> Осередок 1,4 </ TD> <TD> Осередок 1,5 </ TD> </ TR> <TR> <TD> Осередок 2,1 </ TD> <TD> Осередок 2,2 </ TD > <TD> Осередок 2,3 </ TD> <TD> Осередок 2,4 </ TD> <TD> Осередок 2,5 </ TD> </ TR> <TR> <TD> Підсумок 1 </ TD> <TD> Підсумок 2 </ TD> <TD> Підсумок 3 </ TD> <TD> Підсумок 4 </ TD> <TD> Підсумок 5 </ TD> </ TR> </ TABLE> 
Мал. 2. Таблиця з заголовком.
секції таблиці
За допомогою секцій, які представляють собою парні теги, таблицю можна розбити на логічно частини. Вони не відображаються браузером на сторінці, однак для кожної з них можна задати своє уявлення. Існують наступні три логічні частини:
- <THEAD> - Секція заголовків стовпців;
- <TBODY> - Секція основи таблиці;
- <TFOOT> - Секція підсумкових даних, резюмуюча всю таблицю;
<THEAD>, <TBODY>, <TFOOT>, поміщаються всередину таблиці <TABLE>, і повинні містити теги <TR>:
<TABLE> <CAPTION> Тема Таблиці </ CAPTION> <THEAD> <TR> <TH> Заголовок 1 </ TH> <TH> Заголовок 2 </ TH> <TH> Заголовок 3 </ TH> <TH> Тема 4 </ TH> <TH> Тема 5 </ TH> </ TR> </ THEAD> <TBODY> <TR> <TD> Осередок 1,1 </ TD> <TD> Осередок 1,2 </ TD> < TD> Осередок 1,3 </ TD> <TD> Осередок 1,4 </ TD> <TD> Осередок 1,5 </ TD> </ TR> <TR> <TD> Осередок 2,1 </ TD> <TD> Осередок 2,2 </ TD> <TD> Осередок 2,3 </ TD> <TD> Осередок 2,4 </ TD> <TD> Осередок 2,5 </ TD> </ TR> </ TBODY> <TFOOT> <TR> <TD> Підсумок 1 </ TD> <TD> Підсумок 2 </ TD> <TD> Підсумок 3 </ TD> <TD> Підсумок 4 </ TD> <TD> Підсумок 5 < / TD> </ TR> </ TFOOT> </ TABLE>
об'єднання осередків
Вище була розглянута таблиця з простою структурою, а що якщо необхідно її ускладнити, наприклад, об'єднати кілька осередків в одну. Для цього випадку існують спеціальні атрибути COLSPAN і ROWSPAN тегів <TD> і <TH>. Перший служить для об'єднання по горизонталі, другий по вертикалі. Значним для атрибута злучити число поєднуваних осередків:
1. Для об'єднання по горизонталі перших чотирьох осередків останнього рядка таблиці, необхідно атрибуту COLSPAN тега <TD> (в якому міститься текст "Підсумок 1") присвоїти значення 4:
<TD COLSPAN = "4"> Підсумок (1 + 2 + 3 + 4) </ TD>
2. Для об'єднання осередків по вертикалі основної частини документа (частина <TBODY>), скористайтеся атрибутом ROWSPAN зі значенням 2:
<TD ROWSPAN = "2"> Осередок (1,1 + 2,1) </ TD> <TD ROWSPAN = "2"> Осередок (1,2 + 2,2) </ TD> <TD ROWSPAN = "2 "> Осередок (1,3 + 2,3) </ TD> <TD ROWSPAN =" 2 "> Осередок (1,4 + 2,4) </ TD>
Зверніть увагу, якщо об'єднувати осередки атрибутами COLSPAN або ROWSPAN, необхідно прибрати з коду об'єднані осередки, крім тієї з якої починається об'єднання, їх кількість буде залежати від значення атрибута COLSPAN, ROWSPAN.
Тобто, в прикладі 1, об'єднуються чотири осередки, починаючи з першої, якій призначається атрибут COLSPAN = 4 (тому що з неї починається об'єднання), інші три необхідно видалити (тому що вони вважаються об'єднаними). У коді залишиться тільки п'ята осередок (тому що вона не входить в об'єднання).
За таким же принципом буде об'єднання по вертикалі. У другому прикладі, першим чотирьом осередкам рядки присвоюється атрибут ROWSPAN = 2, в результаті перші чотири нижні осередки прибираються з коду, тому що вони вважаються об'єднаними. Крім останньої, яка не входить в об'єднання.
<TABLE> <CAPTION> Тема Таблиці </ CAPTION> <THEAD> <TR> <TH> Заголовок 1 </ TH> <TH> Заголовок 2 </ TH> <TH> Заголовок 3 </ TH> <TH> Тема 4 </ TH> <TH> Тема 5 </ TH> </ TR> </ THEAD> <TBODY> <TR> <TD ROWSPAN = "2"> Осередок (1,1 + 2,1) </ TD> < TD ROWSPAN = "2"> Осередок (1,2 + 2,2) </ TD> <TD ROWSPAN = "2"> Осередок (1,3 + 2,3) </ TD> <TD ROWSPAN = "2" > Осередок (1,4 + 2,4) </ TD> <TD> Осередок 1,5 </ TD> </ TR> <TR> <TD> Осередок 2,5 </ TD> </ TR> </ TBODY> <TFOOT> <TR> <TD COLSPAN = "4"> Підсумок 1+ Підсумок 2+ Підсумок 3+ Підсумок 4 </ TD> <TD> Підсумок 5 </ TD> </ TR> </ TFOOT> </ TABLE>
Мал. 4. Об'єднання осередків таблиці за допомогою атрибутів COLSPAN, ROWSPAN.
Оформлення таблиць CSS властивостями
Після створення таблиці засобами HTML, переходимо до наступного етапу, оформлення таблиці за допомогою стилів CSS, які можна застосувати до тегам <TABLE>, <TH>, <TD>, <CAPTION>.
Рамки для осередків
Рамку навколо осередків можна малювати за допомогою CSS властивості border, з наступним синтаксисом:
border: "товщина лінії" "тип накреслення" "колір";
- товщина лінії - може здаватися в пікселях (px), а також за допомогою спеціальних зарезервованих слів: thin (2 px), medium (4 px) і thick (6 px);
- тип накреслення - значення атрибута спеціальні слова: dotted (точковий пунктир), dashed (пунктирна лінія), solid (лінія), double (подвійна лінія) і т.д.
<STYLE> TABLE, TH, TD {border: 1px solid black} </ STYLE>
Рис 5. Застосування до осередків таблиці властивості border, для обрамлення кожного осередку рамкою.
Якщо необхідно, щоб рамка була тільки між осередками, а не обрамляла кожну окремо, необхідно скористатися стильовою властивістю border-collapse, що приймає значення:
- collapse - рамка між осередками тільки одна;
- separate - кожна клітинка обрамляється власної рамкою;
<STYLE> TABLE, TH, TD {border: 1px solid black; border-collapse: collapse;} </ STYLE>
Рис 6. Застосування до таблиці властивості border-collapse. Сусідні комірки відділяються однією рамкою.
розміри осередків
За замовчування розміри осередків, браузер формує в залежності від їх змісту, якщо необхідно задати статичну форму, скористайтеся стильовою властивістю width, height. При цьому, якщо вміст комірки не поміщається в один рядок, то відбувається його перенесення на наступну.
<STYLE> TH, TD {width: 100px} TH {height: 30px} </ STYLE>
Рис 7. Застосування властивості width і height, для завдання ширини і висоти осередків.
Відступи в осередках
Існує два види відступів зовнішні і внутрішні, перший вид відступу задається між кордонами сусідніх осередків, другий від кордонів осередків до їх вмісту. CSS властивості створюють відступи вказані нижче:
- padding - внутрішній відступ, значення встановлюється в пікселях (px);
- border-spacing - зовнішній відступ, значення встановлюється також в пікселях (px). Даний параметр не слід вживати, якщо {border-collapse: collapse}, тому що відступ встановлюється між кордонами сусідніх осередків, а при наявність зазначеного властивості сусідні осередки відділені лише однією рамкою;
<STYLE> CAPTION, TH, TD {padding: 5px} </ STYLE>
Мал. 8. Застосування до таблиці властивості padding, для завдання відступів.
Розташування заголовка
За замовчуванням заголовок таблиці розташовується над нею, однак місце положення можна міняти за допомогою стильової властивості caption-side, які приймає значення:
- top - заголовок розташовується над таблицею;
- bottom - заголовок розташовується під таблицею;
<STYLE> CAPTION {caption-side: top} </ STYLE>
колір осередків
Для зафарбовування комірки певним кольором необхідно скористатися властивістю background-color:
<STYLE> TH {background-color: # E0E6FA;} TD {background-color: # F6F8FE;} <STYLE>
Мал. 9. Застосування до осередку властивості background-color.
Вирівнювання вмісту осередку
Для вирівнювання вмісту комірки по горизонталі і вертикалі за допомогою таких стильові властивості:
- text-align - горизонтальне вирівнювання вмісту комірки, приймає значення left, center, right;
- vertical-align - вертикальне вирівнювання вмісту. Значення: top, middle, bottom;
<STYLE> CAPTION {text-align: left; vertical-align: middle} TH, TD {text-align: center; vertical-align: middle} </ STYLE>
Мал. 10. Вирівнювання вмісту комірок властивостями text-align і vertical-align.
Оформлення вмісту комірки
Під оформлення вмісту розуміється форматування тексту знаходиться в осередках. Основне CSS властивість, що застосовується для цієї мети є font:
<STYLE> CAPTION {font: bold 20px "sans-serif"} TH {font: bold 17px "sans-serif"} TD {font: normal 15px "sans-serif"} </ STYLE>
Мал. 11. Оформлення вмісту комірки властивістю font.
Детальніше про властивість font, а також інших стильових властивостей для оформлення тексту читайте в статті Оформлення тексту за допомогою CSS
Всі CSS стилі застосовуються до таблиці
<STYLE> TABLE, TH, TD {border: 1px solid black; border-collapse: collapse;} TH, TD {width: 100px} TH {height: 30px} CAPTION, TH, TD {padding: 5px} CAPTION {caption- side: top} TH {background-color: # E0E6FA;} TD {background-color: # F6F8FE;} CAPTION {text-align: left; vertical-align: middle} TH, TD {text-align: center; vertical- align: middle} CAPTION {font: bold 20px "sans-serif"} TH {font: bold 17px "sans-serif"} TD {font: normal 15px "sans-serif"} </ STYLE> </ STYLE>
Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.
