 |
Главная Случайная страница Контакты | Мы поможем в написании вашей работы! | |
Теги оформлення таблиць
|
|
| Тег | Форма запису | Примітка |
| TABLE | <Тавlе>текст</тавlе> | Оголошення таблиць. |
| TR | <TR> текст </TR> | Тег рядка. |
| TD | <TD> текст </TD> | Тег даних. |
Атрибути тега <TABLE>
| Атрибут | Форма запису | Примітка |
| BORDER | <TABLE BORDER=X> | Задає рамку навколо таблиці. |
| WIDTH | <TABLE WIDTH=XX%> | Задає ширину таблиці як Хх% від ширини сторінки або як XX пікселів. |
| BGCOLOR | <TABLE BGCOLOR= "#RRGGBB"> | Задає колір фону таблиці. |
Атрибути тегів <ТD> і <TR>
| Атрибут | Форма запису | Примітка |
| ALIGN | <TD ALIGN=X> | Встановлює вирівнювання по горизонталі (Right, Left, Center) |
| V ALIGN | <TD VALIGN=X> | Встановлює вирівнювання по вертикалі (Top.Middle. Bottom. Baseline) |
| BGCOLOR | <TD BGCOLOR= "#RRGGBB"> | Задає колір фону осередку. |
1. Запустіть стандартну програму Блокнот (Notepad).
2. Наберіть у вікні редактора:
<HTML>
<HEAD>
<TITLE> Учбовий файл HTML </TITLE>
</HEAD>
<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 BORDER=”1” WIDTH=100% BGCOLOR="99CCCC">
<TR BGCOLOR="CCCCFF" ALIGN=CENTER>
<TD>№ пари </TD> <TD> група l </TD> <TD> група 2 </TD> <TD> група З </TD>
</TR>
<TR>
<TD>1</TD> <TD> Англійська мова</ТD> <Тd>математика</тd> <Тd>історія</тd>
</TR>
<TR>
<TD>2</TD> <Тd>філософія</тd> <Тd>інформатика</тd> <Тd>англ.мова</тd>
</TR>
<TR>
<TD>3</TD> <Тd>історія</тd> <Тd>інформатика</тd><тd> Фізика </ТD>
</TR>
</TABLE>
</BOBY>
</HTML>
3. Збережіть файл під ім'ям 1.HTML.
4. Для перегляду створеної Web-сторінки завантажте браузер Microsoft Internet Explorer.
Завдання 5.
1. Доповніть отриману Web-сторінку за аналогією розкладом на подальші дні – вівторок, середу, четвер, п'ятницю.
Лабораторна робота 3. Таблиці.
Варіант 1
Таблиця задається тегом: <table></table>, таблиця складається з рядків і стовпців.
<tr></tr> - рядок таблиці
<td></td> - стовпець таблиці
Отже, перед вами таблиця з двох рядків і трьох стовпців. Для наочності елементи таблиці виділені різними кольорами. Межі таблиці не задані, тому ви їх не бачите.
Отже:
<table>
<tr></tr>
<tr></tr>
</table>
Спочатку задаємо рядки. У нашому прикладі їх два. Тепер у кожному рядку задамо по три стовпці:
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Отже, тепер нам треба заповнити каркас, що вийшов:
<table>
<tr>
<td> 1x1 </td>
<td> 1x2 </td>
<td> 1x3 </td>
</tr>
<tr>
<td> 2x1 </td>
<td> 2x2 </td>
<td> 2x3 </td>
</tr>
</table>
Перша цифра - це номер ряду, а друга – номер стовпця (1х2 - перший ряд, другий стовпець і т.д).
Це виглядатиме так:
| 1x1 | 1x2 | 1x3 |
| 2x1 | 2x2 | 2x3 |
Фону (блакитного або жовтого, як у прикладі) ще не видно. Фон задається параметром bgcolor="колір_фону". Фон можна задати для таблиці в цілому, для ряду, для стовпця (у межі одного ряду). У нашому випадку ми задаємо фон для кожного стовпця.
<table>
<tr>
<td bgcolor="#FFCC33">1x1</td>
<td bgcolor="#336699">1x2</td>
<td bgcolor="#FFCC33">1x3</td>
</tr>
<tr>
<td bgcolor="#336699">2x1</td>
<td bgcolor="#FFCC33">2x2</td>
<td bgcolor="#336699">2x3</td>
</tr>
</table>
Пригадаємо параметри height і width - ви можете їх задати для всієї таблиці, для одного ряду, для стовпця. Пригадаємо, що висота і ширина можуть задаватися як в пікселях, так і відсотках. У нашому випадку ми задамо ширину і висоту в пікселях для стовпців.
<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33"> 1x1 </td>
<td width="50" bgcolor="#336699"> 1x2 </td>
<td width="50" bgcolor="#FFCC33"> 1x3 </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> 2x1 </td>
<td width="50" bgcolor="#FFCC33"> 2x2 </td>
<td width="50" bgcolor="#336699"> 2x3 </td>
</tr>
</table>
Ви можете задати висоту і ширину для всієї таблиці, тоді всі стовпці й ряди поділять даний нам простір порівну, якщо не задавати їм цей простір персонально (у відсотках від загальної ширини (висоти) таблиці або пікселях).
Повернемося до нашого прикладу: одержали те, що хотіли
Тепер нам залишилося лише вирівняти вміст усередині таблиці:
<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33"> <center> 1x1 </center> </td>
<td width="50" bgcolor="#336699"> <center> 1x2 </center> </td>
<td width="50" bgcolor="#FFCC33"> <center> 1x3 </center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center> 2x1 </center> </td>
<td width="50" bgcolor="#FFCC33"> <center> 2x2 </center> </td>
<td width="50" bgcolor="#336699"> <center> 2x3 </center> </td>
</tr>
</table>
У кожному стовпці можуть бути і картинки, і текст, і навіть таблиці (в цьому випадку вони називаються - вкладені таблиці). І теги, які ми застосовуємо для форматування тексту, - всі ті ж.
Повернемося до нашого прикладу, і поговоримо про вертикальне вирівнювання вмісту таблиці, тобто про те як можна зробити так, щоб вміст стовпця не тільки розташовувався рівно посередині її (як за умовчанням), а ще вгорі або внизу. Вертикальне вирівнювання задається таким атрибутом - valign="middle" (top, bottom) - вміст конкретного стовпця буде у середині стовпця (вгорі або внизу):
Ось приклад, а зараз як це пишеться:
<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33" valign="top"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699"> <center>1x2</center> </td>
<td width="50" bgcolor="#FFCC33" valign="bottom"> <center>1x3</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699" valign="bottom"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
<td width="50" bgcolor="#336699" valign="top"> <center>2x3</center> </td>
</tr>
</table>
valign прописаний не для всіх стовпців, тільки для тих, де текст розташований зверху або знизу.
Поговоримо про параметри colspan і rowspan. Colspan - визначає кількість стовпців, на які тягнеться даний стовпець, а rowspan - кількість рядів (ці параметри можуть приймати значення від 2 і більше, тобто наш осередок може розтягуватися на два і більш за стовпець (ряду)). Тепер, щоб було все зрозуміло, звернемося до прикладів.
У даному прикладі ми використовували параметр colspan=2, прописавши його для стовпця 1х1. Код буде таким:
<table>
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
<td width="50" bgcolor="#336699"> <center>2x3</center> </td>
</tr>
</table>
Прошу вас звернути увагу, на те, що параметр width для осередку 1х1 в нашому прикладі не вказаний, якщо вам потрібно задавати цей параметр, то в нашому прикладі для осередку 1х1 його треба було б прописати рівним 100 пікселям, оскільки все-таки осередок 1х1 довший за інші в два рази.
І друге, на що прошу вас звернути увагу, в нашому прикладі немає стовпця 1х3, тобто в першому ряду всього лише два осередки, оскільки осередок 1х1 рівний сам по собі двом осередкам по довжині (що ми і вказали параметром colspan). Якби ми прописали стовпець 1х3, тоді у нас вийшла б така нісенітниця:
Тепер, коли ми розібралися з параметром colspan, розглянемо параметр rowspan. Принцип дії тут той же:
Давайте, подумаємо, що ж ще можна зробити з нею, наприклад, можна позбавитися простору між стовпцями таблиці:
Це досягається за допомогою атрибуту cellspacing, рівного нулю:
<table cellspacing=0>
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699" rowspan="2"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
</tr>
</table>
Можна навпаки збільшити простір між стовпцями – cellspacing=5, тоді одержимо таке:
Тепер задамо атрибут cellpadding=5:
Для тих, хто все ще не може скласти код сам, - ось він (для останнього варіанту таблиці):
<table cellpadding=5>
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2" valign="top"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699" rowspan="2" valign="top"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699" valign="bottom"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33" valign="bottom"> <center>2x2</center> </td>
</tr>
</table>
Вкладені таблиці – це звичайні таблиці, що розташовуються в елементах іншої таблиці.
Припустимо, у нас уже є велика таблиця, дві колонки якої забито текстом якогось змісту, а третя між ними – для краси:
| З кожним днем в інтернеті з'являється все більше бек і бук. Це особливі істоти, роль яких у розвитку сучасного суспільства не зрозуміла, але проте саме їх присутність помітна. Буки і бяки вимагають особливого звернення до себе, якщо звертатися до них як до нормальних людських особин, то вас не зрозуміють. | Ось таблиця, яка показує скільки бук, бяк та інших істот мешкає в інтернеті:
Кінець таблиці |
Отже, перед нами таблиця з одного ряду, з трьома стовпцями, в третьому осередку не можна не помітити вкладену таблицю. Тепер код:
<table>
<tr>
<td width="200" valign="top" background="blue.gif" align="center"> Зкожним днем в інтернеті з'являється все більше бяк і бук. Це особливі істоти, роль яких у розвитку сучасного суспільства не зрозуміла, але проте саме їх присутність помітна. Буки і бяки вимагають особливого звертання до себе, якщо звертатися до них як до нормальних людських особин, то вас не зрозуміють.</td>
<td width="10" background="white.gif"> </td>
<td width="200" valign="top" background="blue.gif" align="center">Вот таблиця, яка показує скільки бук, бек і інших мешкає в інтернеті:
<br><br>
<table cellspacing="3">
<tr>
<td width="50" background="white.gif">буки</td><td background="white.gif">65% населения</td>
</tr>
<tr>
<td width="50" background="white.gif">бяки</td><td background="white.gif">20% населения</td>
</tr>
<tr>
<td width="50" background="white.gif">др.</td><td background="white.gif">15% населения</td>
</tr>
</table>
<br><br>
За цим все</td>
</tr>
</table>
На жаль, код вийшов об'ємний, проте в ньому немає нічого складного: вкладена таблиця нічим не відрізняється від звичайної.
Але все таки тут є деякі нюанси, на які слід звернути увагу: background="картинка.gif" - раніше ми говорили про параметр bgcolor, який задає колір фону для таблиці (ряду, осередку), а параметр background задає фонову картинку для таблиці (ряду, осередку).
А зараз сам нюанс: ніби було б логічніше прописати просто білий фон для вкладеної таблиці (bgcolor="#ffffff"), а не мучитися, створюючи просто білу картинку і роблячи її фоном (background="white.gif"), адже так воно швидше. Так, швидше, але річ у тому, що якщо IE (Internet Explorer) відображає параметр bgcolor для вкладених таблиць, то NN (Netscape Navigator) цей параметр для вкладених таблиць відмовляється відображати, тому доводиться йти обхідним шляхом, використовуючи background.
У цьому останньому розділі, присвяченому таблицям, ми поговоримо про рамки. Рамка вводиться параметром border. Задамо рамку рівну 3 пікселям:
<table border="3">
Нашій рамці ми можемо задати колір. Хай він буде чорним у нашому прикладі:
<table border="3" bordercolor="#000000">
Дата публикования: 2015-04-07; Прочитано: 306 | Нарушение авторского права страницы | Мы поможем в написании вашей работы!
