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

Відео: GoToWeb - Відеокурс Html і Css, урок 14, Таблиці html, властивості таблиць, об`єднання осередків

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

Відео: Word для початківців. Урок 14: Таблиця альбомного формату

Здрастуй, шановний читачу.

Це чотирнадцятий урок вивчення CSS. У цей уроці ви дізнаєтеся як оформляти таблиці і як працювати з окремими елементами таблиці.

Перед вивченням даного уроку пройдіть попередні уроки:

Урок 1. Що таке CSS?
Урок 2. Базові селектори
Урок 3. Групові селектори і селектори нащадків
Урок 4. Псевдоселектори посилань
Урок 5. Шрифти
Урок 6. Оформлення тексту
Урок 7. Рамки
Урок 8. Оформлення списків
Урок 9. Спадкування
Урок 10. Блокова модель
Урок 11. Висота і ширина блоку
Урок 12. Конфлікти полів
Урок 13. Робота з зображеннями. Частина 1
Урок 13. Робота з зображеннями. Частина 2

Теорія та практика

Як ви вже пам`ятаєте таблиця будується в html за допомогою тегів, і (І при необхідності ).

оформлення таблиці



Для того щоб задати властивість для елемента нам необхідний селектор. Цим селектором можуть виступати такі теги як table, tr, td, th, так і всілякі раннє вивчені селектори class і id. Розглянемо на прикладі:

12345678910111213141516171819202122232425262728293031
lt;htmlgt;lt;headgt;lt;titlegt; Головнаlt;/titlegt;lt;meta http-equiv="Content-Type" content="Text / html- charset = utf-8"gt;lt;link rel="Stylesheet" type="Text / css" href="Style.css"gt;lt;/headgt;lt;bodygt;lt;div id="Content"gt;lt;tablegt;lt;trgt;lt;tdgt; iaculislt;/tdgt;lt;tdgt; adipiscinglt;/tdgt;lt;tdgt; pretiumlt;/tdgt;lt;tdgt; egestaslt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt; placeratlt;/tdgt;lt;tdgt; luctuslt;/tdgt;lt;tdgt; tristiquelt;/tdgt;lt;tdgt; dignissimlt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt; dictumlt;/tdgt;lt;tdgt; tinciduntlt;/tdgt;lt;tdgt; velitlt;/tdgt;lt;tdgt; maurislt;/tdgt;lt;/trgt;lt;/tablegt;lt;/divgt;lt;/bodygt;lt;/htmlgt;

А зараз додамо якусь оформлення нашої таблиці в CSS:

123456789101112
table{border-collapse:collapse- / * Прибираємо подвійну кордон між осередками * /}td, th{padding:10px- / * Внутрішні відступи для тега заголовка (th) таблиці і осередки (td) в 10 пікселів (px) * /border:1px solid #cccccc- / * Сіра межа для тега заголовка і осередки * /}th{background-color:# C1D3FF- / * Блакитний колір фону заголовка (th) * /}

Як таблиця виглядала до застосування властивостей і після:
CSS властивості таблиць

Відео: WordPress - плагін TablePress. Уроки WordPress. Урок # 14

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

Всі осередки (td) можуть мати як ширину, так і висоту, які ми ставили через властивості width(Ширина) і height(Висота). Тобто таблиця це звичайний контейнер схожий на. Але справа в тому, що блок більш гнучкий. Хоча раніше сторінки версталися за допомогою таблиць, але дана технологія давно застаріла і не використовується. Але я пам`ятаю як свій перший сайт верстав саме на таблицях :).

Успіхів вам у освоєнні таблиць!

Більше практикуйтеся!

Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!