Створення таблиць. Таблиці в HTML є одним з найнеобхідніших елементів і самими універсальними засобами

Читайте также:

Таблиці в HTML є одним з найнеобхідніших елементів і самими універсальними засобами форматування малюнків та тексту. Таблиця задається тегом <table></table>

У тегу <table> можуть бути наступні необов'язкові атрибути:

· Background = “... “ – URL малюнка-фону;

· Bgcolor = ” колір “ – колір фону;

· Border = “ число“ – товщина рамки в пік селях;

· Bordercolor = “ колір“ – колір рамки;

· Align = “... “ – вирівнювання таблиці щодо документа (сеnter, left або right);

· Cellpadding = “ число“ – відстань від тексту в осередку до рамки;

· Cellspacing = “ число“ – відстань між осередками;

· Width = “ число“ – ширина в пікселях, відсотках.

Тег <caption> задає рядок заголовка таблиці. Після нього йдуть інші елементи. У тегу <caption> тільки один параметр align=:

· top – розташовує заголовок над таблицею (значення за умовчанням);

· bottom – розташовує заголовок під таблицею.

Таблиця може не мати заголовка. Заголовок таблиці не обрамляється рамкою.

Таблиці складаються з рядків і стовпців (осередків).

<tr></tr> - рядок таблиці
<td></td> - стовпець (осередок) таблиці

Тег <td> може мати наступні параметри:

height = “ число” – указує висоту осередку у відсотках або пікселях;
align = “…” – вирівнювання тексту в осередку (left, right або center);
valign = “…” – вирівнювання тексту в осередку по вертикалі (top – по верхньому краю, middle – по центру, bottom – по нижньому краю);
colspan = “число”– указує кількість стовпців, яку займає один осередок;
rowspan =“число”– указує кількість рядків, яку займає один осередок (за умовчанням =1);
background = “ адреса малюнка” – задає фоновий малюнок осередку.

Скріншоти сайта

Головна сторінка

HTML-код сторінок

Меню

<html>

<head>

<style>

li {display:inline-block; float: left; margin-right:100px;}

img {width:140; height:40}

</style>

</head>

<body background=foon.jpg>

<table align=center cellspacing=0 cellpadding=10 width=700 >

<tr>

<td height=40> <a href=hh.html target=bot><img src="1.png" name="glavnaya"

onmouseover="document.glavnaya.src='2.png';"

onmouseout="document.glavnaya.src='1.png';"></a> </td>

<td > <a href=zoo.html target=bot><img src="3.png" name="zoo"

onmouseover="document.zoo.src='4.png';"

onmouseout="document.zoo.src='3.png';"> </a></td>

<td > <a href=foto.html target=bot><img src="5.png" name="foto"

onmouseover="document.foto.src='6.png';"

onmouseout="document.foto.src='5.png';"> </td>

<td > <a href=merp.html target=bot><img src="7.png" name="merp"

onmouseover="document.merp.src='8.png';"

onmouseout="document.merp.src='7.png';"> </a> </td>

<td > <a href=reg.html target=bot><img src="9.png" name="reg"

onmouseover="document.reg.src='10.png';"

onmouseout="document.reg.src='9.png';"> </a> </td>

</tr>

</table>

</body>

</html>

Дата добавления: 2015-12-08; просмотров: 56 | Нарушение авторских прав

mybiblioteka.su - 2015-2024 год. (0.007 сек.)