Таблиці, будова таблиць, таблична верстка
ці теги створюють новий ряд (рядок) осередків
вміст комірки - table header (заголовок таблиці)
текст всередині цих тегів буде виділений напівжирним шрифтом і відцентровано
вміст комірки
width - ширина таблиці і осередків вказується в "%" або в пікселях "800", вказувати в HTML висоту таблиць і комірок не рекомендується (код не пройде валідацію), для вказівки висоти, використовуйте таблиці стилів - CSS
border - товщина рамки
cellspacing - відстань між осередками
cellpadding - відстань між рамкою комірки і текстом
align - вирівнювання по горизонталі (зліва = "left" центр = "center" справа = "right")
valign - вирівнювання по вертикалі (верх = "top" середина = "middle" низ = "bottom")
colspan - кількість осередків по горизонталі
rowspan - кількість осередків по вертикалі
Таблиця з одним осередком
| Комірка |
| Це осередок № 1 |
| Це осередок № 2 |
| Це осередок № 3 |
Додавши таблиці, осередку клас (class = ".") Або id (id = "."), Можна буде управляти їх зовнішнім виглядом, використовуючи CSS. Для початку змінимо, значення параметрів border і cellpadding на "0" і допишемо в код таблиці класи. Кожному класу в CSS задамо властивості, наприклад, якщо ми використовуємо на сторінці три варіанти заголовків (h1, h2 і h3), тоді кожному з них дамо свій клас (h1 class = "zag1") - (h2 class = "zag2") - (h3 class = "zag3"). В CSS пишемо:
zag1 font: 36px verdana, arial, helvetica, sans-serif; / * Шрифт, розмір шрифту * /
color. # 000; / * Колір шрифту * /
font-weight: 900; / * Насиченість шрифту * /
>
.zag2 font: 28px helvetica, arial, sans-serif;
color. # 666;
font-weight: 800;
>
.zag3 font: 20px sans-serif;
color. #ccc;
font-weight: 700;
>
В CSS перед ім'ям класу ставиться крапка - (.name), а якщо використовується ID (ідентифікатор), то перед ім'ям ID ставиться решітка # - (#name). Ім'я класу і ідентифікатора, обов'язково повинно починатися з літери, якщо їх в CSS багато, щоб не заплутатися можна додавати цифри - (.name1) - (.name2). Ім'я ідентифікатора повторяться не повинно, наприклад якщо у Вас на сторінці, кілька таблиць, кожної давайте ім'я, відмінне від іншого - (table id = page) - (table id = menu) - (table id = content), застосовувати один і той же ім'я класу можна бути скільки завгодно - (p class = text) - (span class = text) - (strong class = text), але тоді і властивості елементів, будуть однаковими.
В Інтернеті можна скачати довідники по CSS, хороший довідник по CSS, написав Влад Мержевіч, скачати його можна натиснувши на це посилання
Проста табличная сторінка
Тепер трохи CSS
body margin. 0;
padding. 0;
background-color: #fff;
>
h1, h2 color. # 5E985A;
font-weight: 700;
padding-left. 4px;
>
h3 color. # 507E4B;
font-weight: 700;
padding: 0 0 3px 0;
margin. 0;
>
header. left_top. content_top. right_top background-color: # 95C094;
>
left background-color: # C1DAC0;
color. # 333;
padding. 7px 7px 0 7px;
>
content background-color: #fff;
color. # 333;
padding. 7px 7px 20px 7px;
>
right background-color: # C1DAC0;
color. # 333;
padding. 7px 7px 0 7px;
>
right p font: 11px sans-serif;
color. # 333;
line-height: 1.5;
>
footer background-color: # 95C094;
text-align. center;
padding-top. 15px;
padding-bottom. 15px;
>
footer p font: 10px verdana, arial, helvetica, sans-serif;
color. #fff;
>
Глобальні стилі задають вид елементів всього документа.
Для цього використовується
Розміщується в заголовку документа.