Главная страница Случайная страница
Разделы сайта
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Таблиці. Важливим інструментом Web-дизайну є таблиці, які використовуються не лише для виведення табличних даних
|
|
Важливим інструментом Web-дизайну є таблиці, які використовуються не лише для виведення табличних даних, але і для управління взаємним розміщенням тексту й графіки, створення колонок газетного типу, кольорових ефектів та ін. Таблиця задається тегом < TABLE> …< /TABLE>, що має цілий ряд опцій:
Таблиця 2
| Опція | Призначення |
| ALIGN=" вирівнювання" | Вирівнювання усієї таблиці відносно тексту, в якому вона знаходиться (left, center або right) |
| BORDER=" число" | Ширина бордюру таблиці, у пікселях |
| CELLSPACING=" число" | Відстань між комірками, у пікселях |
| CELLPADDING=" число" | Розмір вільного простору між границями комірки та її вмістом, у пікселях |
| HSPACE=" число" | Розмір вільного простору зліва та справа від таблиці, у пікселях |
| VSPACE=" число" | Розмір вільного простору зверху і знизу від таблиці, у пікселях |
| WIDTH=" ширина" | Ширина таблиці у пікселях або відсотках від ширини вікна броузера |
| BACKGROUND=" IMAGES\ptichka.jpg" | Заповнює комірку фоновим малюнком. Необхідно вказати URL малюнка |
| BGCOLOR=" CCFFFF" | Визначає колір фону комірки |
| COLSPAN | Визначає кількість стовпців, які об¢ єднуються. За замовчуванням має значення 1 |
| ROWSPAN | Визначає кількість рядків, які об¢ єднуються. За замовчуванням має значення 1 |
| VALIGN | Визначає спосіб вертикального вирівнювання змісту комірки. Можливі значення: top, bottom, middle. За замовчуванням – рівняння по центру (VALIGN=" middle) |
Таблицю визначають таким чином:
< table>
< tr>
< td> Вміст комірки< /td>
< td> Вміст комірки< /td>
...
< /tr>
< tr>
< td> Вміст комірки< /td>
< td> Вміст комірки< /td>
...
< /tr>
...
< /table>
Тег < TR> …< /TR> визначає рядок таблиці, а тег < TD> …< /TD> — комірку в рядку. Якщо комірку треба залишити пустою, то в неї розміщують символ пропуску & nbsp;
Завдання 1. Створити таблицю.
< HTML>
< HEAD>
< meta http-equiv=" Content-Type" content=" text/html; charset=UTF-8" >
< TITLE> Розклад занять навчальних груп
< /TITLE>
< /HEAD>
< BODY BGCOLOR=" FFFFFF" >
< P ALIGN=CENTER>
< FONT COLOR=" RED" SIZE=" 6" FACE=" ARIAL" >
< B> Навчальна група
< /B> < /FONT> < BR> < /P>
< FONT COLOR=" BLUE" SIZE=" 4" FACE=" COURIER" >
< B> Понеділок < /B> < /FONT> < BR>
< table width=" 100%" border=" 1" cellspacing=" 0" cellpadding=" 0" bordercolorlight=" #009966" bordercolordark=" #9999FF" >
< tr bgcolor=" #9999FF" >
< td> Заняття < /td>
< td> 1 група < /td>
< td> 2 група < /td>
< td> 3 група < /td>
< /tr>
< tr bgcolor=" #33CCCC" >
< td> 1< /td>
< td> Інформатика < /td>
< td> Історія < /td>
< td> Математика < /td>
< /tr>
< tr bgcolor=" #33CCCC" >
< td> 2< /td>
< td> Російська мова < /td>
< td> Література < /td>
< td> Англійська мова < /td>
< /tr>
< tr bgcolor=" #33CCCC" >
< td> 3< /td>
< td> Математика < /td>
< td> Математика < /td>
< td> Історія < /td>
< /tr>
< /table>
< /BODY>
< /HTML>
У цьому прикладі границя таблиці виконана у двох кольорах. Це досягається за рахунок використання атрибутів BORDERCOLORLIGHT та BORDERCOLORDARK.
Завдання 2. Створити “неправильну” таблицю.
| Характеристики | |||
| Середній зріст, см | Середня вага, кг | ||
| Стать | Чоловіча | ||
| Жіноча |
......................................................................................
< table border=" 1" cellpadding=" 5" cellspacing=" 0" >
< tr>
< td colspan=" 2" rowspan=" 2" > & nbsp; < /td>
< td colspan=" 2" > Характеристики< /td>
< /tr>
< tr>
< td> Середній зріст, см < /td>
< td> Середня вага, кг < /td>
< /tr>
< tr align=" center" >
< td rowspan=" 2" > Пол< /td>
< td> Чоловіча < /td>
< td> 177< /td>
< td> 73< /td>
< /tr>
< tr align=" center" >
< td> Жіноча < /td>
< td> 166< /td>
< td> 65< /td>
< /tr>
< /table>
........................................................................
|
|