1. Skip to Menu
  2. Skip to Content
  3. Skip to Footer

Лекція 3 - CSS, HTML Таблична верстка

Приклад простої табличної верстки
Приклад простої таблиці
Розтягування комірок
Висота та ширина комірок
Вирівнювання та відступи в комірках
Вкладені таблиці

Приклад простої табличної верстки

Основні види верстки Веб-сторінок – це таблична (тег <div> з використанням CSS)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
	Transitional//EN" "http://www.w3.org/
	TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" 
content="text/html; charset=utf8" />
<title>Жорстка таблична верстка сайту</title>
<style type="text/css">
.header {width:100%; height:60px; background-color:#717dc9;
 padding:20px; text-align:center}
.left_col {width:120px; height:460px; background-color:#dddddd;
 padding:15px; vertical-align:top}
.center_col {width:500px; background-color:#ffffff; 
padding:15px; vertical-align:top}
.right_col {width:120px; background-color:#dddddd;
 padding:15px; vertical-align:top}
.footer {width:100%; padding:10px 0 10px 20px;
 background-color:#717dc9; font-size:13px}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="860" align="center">
<tr>
<td colspan="3" class="header">Мій сайт</td>
</tr>
<tr>
<td class="left_col">Меню</td>
<td class="center_col">Зміст</td>
<td class="right_col">Посилання</td>
</tr>
<tr>
<td colspan="3" class="footer">© Права</td>
</tr>
</table>
 </html>

Лекція 3 - CSS, HTML Таблична верстка

 

Розглянемо методи її побудови. Для форматування використані класи css. Вказуємо ширину першої і третьої комірки середнього ряду: width: 120px +2*( padding: 15px )= 150px (ширина однієї комірки) - множимо на 2, отримуємо 300px. Ширина середнього стовпця (комірки) = (дорівнює) ширина таблиці (860px) - (мінус) ширина лівого і правого стовпця (360px) - 2*( padding: 30px )= 300px. <br> Що стосується висоти, то всі комірки одного ряду автоматично вирівнюються за найвищою, тому в стилях, в описах середнього ряду була вказана висота тільки однієї – крайньої лівої. При розрахунку розмірів завжди потрібно враховувати значення padding, margin, border. Значення цих атрибутів задаються так: padding: 20px - внутрішнє поле елемента по всьому своєму периметру дорівнює 20-ти пікселям або так: padding: 10px 0 8px 60px - верхнє внутрішнє поле дорівнює 10-ти пікселям, праве - нулю, нижнє - 8-ми пікселям і ліве - 60-ти пікселям (за годинниковою стрілкою, починаючи зверху). Жорсткість такої верстки полягає в тому, що розміри таблиці задані в пікселях, а не у відсотках, тобто вони не залежать від розміру монітора або вікна браузера.

Приклад простої таблиці

Для більшої наочності розглянемо властивості таблиць детальніше. Тег >table> задає початок і кінець таблиці, будь-яка таблиця, як відомо, складається з рядків і стовпців, для цього є ще два теги: >tr> - рядок таблиці >td> - стовпчик таблиці. Приклад простої таблиці з трьома стрічками та стовпчиками:

Лекція 3 - CSS, HTML Таблична верстка

<html> 
<head> 
<title>Таблиця</title> 
</head> 
<body> 
<table border="1"> 
<tr> 
<td>стрічка1 комірка1</td> 
<td> стрічка1 комірка2</td> 
<td> стрічка1 комірка3</td> 
</tr> 
<tr> 
<td> стрічка2 комірка1</td> 
<td> стрічка2 комірка2</td> 
<td> стрічка2 комірка3</td> 
</tr> 
<tr> 
<td> стрічка3 комірка1</td> 
<td> стрічка3 комірка2</td> 
<td> стрічка3 комірка3</td> 
</tr> 
</table> 
</body> 
</html>

Обрамлення таблиці за допомогою параметра BORDER не завжди однаково працює в різних браузерах. В цьому випадку можна використовувати вкладені таблиці. В першій таблиці потрібно задати ширину за допомогою параметра WIDTH тегу TABLE. Ця таблиця повинна складатися з одного ряду, в якому одна клітинка. У цю комірку потрібно вставити ще одну таблицю, задавши значення параметра WIDTH цієї таблиці рівним 100%. У результаті ширина внутрішньої таблиці буде прагнути до ширини комірки першої таблиці, в якій вона знаходиться. Далі потрібно задати параметр CELLPADDING першої таблиці рівним ширині бордюру в пікселах, який ви хочете побачити навколо вашої уявної таблиці. У нашому прикладі CELLPADDING = 1 для першої таблиці. Залишається задати параметр BGCOLOR для першої таблиці (це буде колір бордюру) і BGCOLOR для другої таблиці (це буде колір фону нашої уявної таблиці). Параметр BORDER обох таблиць повинен бути рівним 0, щоб уникнути відображення справжніх бордюрів таблиць.
Далі наводиться HTML код прикладу:

<TABLE BGCOLOR=black BORDER=0 CELLSPACING=0 
CELLPADDING=1 WIDTH=50% ALIGN=center> 
<TR> 
<TD> 
<TABLE BORDER=0 CELLSPACING=0 BGCOLOR=yellow WIDTH=100%> 
<TR> 
<TD ALIGN=center>Таблица</TD> 
</TR> 
</TABLE> 
 </TD> 
</TR> 
</TABLE>

Розтягування комірок

Часто при роботі з таблицями виникає необхідність розтягнути ті чи інші комірки. Цю задачу вирішують атрибути colspan і rowspan: colspan - визначає яку кількість стовпців буде займати дана комірка, rowspan - кількість рядків, яку займанє комірка. Припустимо що в нашому прикладі нам необхідно "об'єднати" в третьому рядку другу і третю ячейку, для цього атрибуту colspan присвоюємо значення 2 (розтягти на два стовпці) і вставляємо його в потрібне місце.

Лекція 3 - CSS, HTML Таблична верстка

<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border="1">
<tr>
<td> стрічка1 комірка1</td>
<td> стрічка1 комірка2</td>
<td> стрічка1 комірка3</td>
</tr>
<tr>
<td> стрічка2 комірка1</td>
<td> стрічка2 комірка2</td>
<td> стрічка2 комірка3</td>
</tr>
<tr>
<td> стрічка3 комірка1</td>
<td colspan="2"> стрічка3 комірка2</td>
<td> стрічка3 комірка3</td>
</tr>
</table>
</body>
</html>
<html>

Комірка розтяглася на два стовпці, але при цьому зрушила третю комірку, яка власне тепер не потрібна, а тому її потрібно видалити.
Тепер об'єднуємо весь перший стовпчик в одну комірку, використовуючи атрибут rowspan, тобто розтягнемо комірку першого рядка першого стовпця на три рядки і одразу приберемо зайве.

Лекція 3 - CSS, HTML Таблична верстка

	<html><head>
<title>Таблиця</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="3"> стрічка1 комірка1</td>
<td>стрічка1 комірка2</td>
<td> стрічка1 комірка3</td>
</tr>
<tr>
<td>стрічка2 комірка2</td>
<td>стрічка2 комірка3</td>
</tr>
<tr>
<td colspan="2"> стрічка3 комірка2</td>
</tr>
</table>
</body>
</html>

Висота та ширина комірок

Aтрибути width (ширина) і height (висота) застосовані тут до тегів <table>, <tr> і <td>. Таблиця вирівняна по центру тегом <center>

Лекція 3 - CSS, HTML Таблична верстка

<html>
<head>
<title>Таблиця</title>
</head>
<body>
<center>
<table border="1" width="640" height="480">
<tr>
<td rowspan="3" width="150"> стрічка1 комірка1</td>
<td height="30"> стрічка1 комірка2</td>
<td> стрічка1 комірка3</td>
</tr>
<tr>
<td height="30"> стрічка2 комірка2</td>
<td>стрічка2 комірка3</td>
</tr>
<tr>
<td colspan="2" > стрічка3 комірка2</td>
</tr>
</table>
</center>
</body>
</html>

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

 <html>
<head>
<title> Таблиця</title>
</head>
<body>
<center>
<table border="1" width="100%" height="480">
<tr height="25%">
<td width="15%"> стрічка1 комірка1</td>
<td width="25%"> стрічка1 комірка2</td>
<td width="60%"> стрічка1 комірка3</td>
</tr>
<tr height="50%">
<td>стрічка2 комірка1</td>
<td> стрічка2 комірка2</td>
<td>стрічка2 комірка3</td>
</tr>
<tr height="25%">
<td> стрічка3 комірка1</td>
<td> стрічка3 комірка2</td>
<td> стрічка3 комірка3</td>
</tr>
</table>
</center>
</body>
</html> 

У цьому прикладі від загальної ширини таблиці в 640 пікселів віддали 15% першій клітинці, 25% другій та 60% третій. А по висоті з 480 пікселів по 25% першому та третьому рядку, а решту місця другому.
Підредагуємо наведену таблицю під сторінку із назвою, горизонтальним та вертикальним меню.

Лекція 3 - CSS, HTML Таблична верстка

 <html>
<head>
<title>Верстка сторінки</title>
</head>
<body>
<center>
<table border="1" width="640" height="480">
<tr>
<td colspan="5" height="30"><center>Назва</center></td>
</tr>
<tr>
<td height="30" width="20%"><center>кнопка1</center></td>
<td width="20%"><center>кнопка2</center></td>
<td width="20%"><center>кнопка3</center></td>
<td width="20%"><center>кнопка4</center></td>
<td width="20%"><center>кнопка5</center></td>
</tr>
<tr>
<td valign="top">зміст:</td>
<td colspan="4"><center> текст</center></td>
</tr>
</table>
</center>
</body>
</html> 

Вирівнювання та відступи в комірках

Вирівняємо текст за допомогою атрибуту valign - вертикальне вирівнювання.

Лекція 3 - CSS, HTML Таблична верстка

<html>
<head>
<title>Вирівнювання в таблиці</title>
</head>
<body>
<center>
<table width="300" height="300">
<tr>
<td bgcolor="#c0e4ff" valign="top">1</td>
<td bgcolor="#c5ffa0" valign="top"><center>2</center></td>
<td bgcolor="#c0e4ff" align="right" valign="top">3</td>
</tr>
<tr>
<td bgcolor="#c5ffa0">4</td>
<td bgcolor="#ffa0c5"><center>5</center></td>
<td bgcolor="#c5ffa0" align="right">6</td>
</tr>
<tr>
<td bgcolor="#c0e4ff" valign="bottom">7</td>
<td bgcolor="#c5ffa0" valign="bottom"><center>8</center></td>
<td bgcolor="#c0e4ff" align="right" valign="bottom">9</td>
</tr>
</table>
</center>
</body>
</html>

Cellspacing - задає відстань в пікселях між комірками таблиці. Задавши значення cellspacing = "0" можна позбутися "проміжку" між комірками. Приклад, збільшимо "проміжок":

Лекція 3 - CSS, HTML Таблична верстка

<html>
<head>
<title>Відстань між комірками</title>
</head>
<body>
<center>
<table width="300" height="300" cellspacing="15">
<tr>
<td bgcolor="#c0e4ff" valign="top">1</td>
<td bgcolor="#c5ffa0" valign="top"><center>2</center></td>
<td bgcolor="#c0e4ff" align="right" valign="top">3</td>
</tr>
<tr>
<td bgcolor="#c5ffa0">4</td>
<td bgcolor="#ffa0c5"><center>5</center></td>
<td bgcolor="#c5ffa0" align="right">6</td>
</tr>
<tr>
<td bgcolor="#c0e4ff" valign="bottom">7</td>
<td bgcolor="#c5ffa0" valign="bottom"><center>8</center></td>
<td bgcolor="#c0e4ff" align="right" valign="bottom">9</td>
</tr>
</table>
</center>
</body>
</html> 

Атрибут cellpadding (не плутати з cellspacing) - в пікселях задає поля комірок (відступ від кордонів комірок до тексту), приклад:

Лекція 3 - CSS, HTML Таблична верстка

<html>
<head>
<title>Поля таблиці</title>
</head>
<body>
<center>
<table width="300" height="300" cellspacing="0" cellpadding="25">
<tr>
<td bgcolor="#c0e4ff" valign="top">1</td>
<td bgcolor="#c5ffa0" valign="top"><center>2</center></td>
<td bgcolor="#c0e4ff" align="right" valign="top">3</td>
</tr>
<tr>
<td bgcolor="#c5ffa0">4</td>
<td bgcolor="#ffa0c5"><center>5</center></td>
<td bgcolor="#c5ffa0" align="right">6</td>
</tr>
<tr>
<td bgcolor="#c0e4ff" valign="bottom">7</td>
<td bgcolor="#c5ffa0" valign="bottom"><center>8</center></td>
<td bgcolor="#c0e4ff" align="right" valign="bottom">9</td>
</tr>
</table>
</center>
</body>
</html>

Вкладені таблиці

Кожна окремо взята комірка може служити ємністю для інших тегів і тег <table> не є винятком. По суті можна вставити одну таблицю в іншу.

Лекція 3 - CSS, HTML Таблична верстка

<html>
<head>
<title>Вкладена таблиця</title>
</head>
<body>
<center>
<table width="600" height="400" border="1">
<tr>
<td colspan="2"><center>Назва</center></td>
</tr>
<tr>
<td valign="top">зміст:</td>
<td valign="top">
<center>
<br><br>
В одну комірку вкладено таблицю:
<br><br><br>
<table width="200" height="200" cellspacing="0" cellpadding="15">
<tr>
<td bgcolor="#c0e4ff" valign="top">1</td>
<td bgcolor="#c5ffa0" valign="top"><center>2</center></td>
<td bgcolor="#c0e4ff" align="right" valign="top">3</td>
</tr>
<tr>
<td bgcolor="#c5ffa0">4</td>
<td bgcolor="#ffa0c5"><center>5</center></td>
<td bgcolor="#c5ffa0" align="right">6</td>
</tr>
<tr>
<td bgcolor="#c0e4ff" valign="bottom">7</td>
<td bgcolor="#c5ffa0" valign="bottom"><center>8</center></td>
<td bgcolor="#c0e4ff" align="right" valign="bottom">9</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</center>
</body>
</html>

 

Додати коментар


Захисний код
Оновити

  •  Facebook 

Обрати мову

Хто на сайті

На сайті 154 гостей та відсутні користувачі