- •Тема 1.4 Робота з таблицями та графікою Web-сторінках.
- •Засоби опису таблиць в html
- •Використання таблиць в дизайні
- •Атрибути аlign і valign
- •Атрибут bgcolor
- •Використання таблиць в дизайні сторінки
- •Використання таблиць в дизайні
- •Створення різноколірних таблиць
- •Як працюють фрейми
- •Підготовка утримуваного фрейма
- •Підготовка фрейма main
- •Вкладені і множинні кадрові структури
- •Плаваючі фрейми
- •Vspace - Вертикальний відступ від фрейма до навколишнього контенту.
- •Навігаційні карти
Атрибути аlign і valign
Теги <ТR>, <ТD> і <ТН> можна модифікувати за допомогою атрибутів ALIGN і VALIGN. Атрибут АLIGN визначає вирівнювання тексту і графіки по горизонталі, тобто по лівому або правому краю, або по центру. Горизонтальне вирівнювання може бути задане декількома способами :
ALIGN=blееdleft притискує вміст комірку впритул до лівого краю.
ALIGN=left вирівнює вміст комірку по лівому краю з урахуванням відступу, заданого атрибутом СЕLLPADDING.
АLIGN=сеnter розташовує вміст комірку по центру.
АLIGN=right вирівнює вміст комірку по правому краю з урахуванням відступу, заданого атрибутом СЕLLPADDING.
<HTML>
<BODY>
<TABLE BORDER WIDTH=100%>
<TR>
<TD ALIGN=left>Текст або дані</TD>
<TD ALIGN=center>Текст або дані</TD>
<TD ALIGN=right>Текст або дані</TD>
</TR>
<TR>
<TD ALIGN=right>Текст або дані</TD>
<TD ALIGN=center>Текст або дані</TD>
<TD ALIGN=left>Текст або дані</TD>
</TR>
<TR>
<TD ALIGN=right>Текст або дані</TD>
<TD ALIGN=right>Текст або дані</TD>
<TD ALIGN=right>Текст або дані</TD>
</TR>
<TR>
<TD ALIGN=center>Текст або дані</TD>
<TD ALIGN=center>Текст або дані</TD>
<TD ALIGN=center>Текст або дані</TD>
</TR>
<TR>
<TD ALIGN=left>Текст або дані</TD>
<TD ALIGN=left>Текст або дані</TD>
<TD ALIGN=left>Текст або дані</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Атрибут VALIGN здійснює вирівнювання тексту і графіки усередині комірку по вертикалі. Вертикальне вирівнювання може бути задане декількома способами :
VALIGN=top вирівнює вміст комірку по її верхній межі.
VALIGN=middle центрує вміст комірку по вертикалі.
VALIGN=bottom вирівнює вміст комірку по її нижній межі.
<HTML>
<BODY>
<CENTER>
<TABLE BORDER WIDTH=90%>
<TR>
<TD WIDTH=100>Атрибут VALIGN здійснює
вирівнювання тексту і графіки усередині
комірки по вертикалі.</TD>
<TD VALIGN=top>верх</TD>
<TD VALIGN=middle>середина</TD>
<TD VALIGN=bottom>низ.</TD>
</TR>
<TR VALIGN=top>
<TD> VALIGN=top Вирівнює вміст
комірки по її верхній межі.</TD>
<TD>верх</TD>
<TD>верх</TD>
<TD>верх.</TD>
</TR>
<TR VALIGN=middle>
<TD>VALIGN=middle Центрує вміст
комірки по вертикалі.</TD>
<TD>середина</TD>
<TD>середина</TD>
<TD>середина.</TD>
</TR>
<TR VALIGN=bottom>
<TD>VALIGN=bottom Вирівнює вміст
комірки по її нижній межі.</TD>
<TD>низ</TD>
<TD>низ</TD>
<TD>низ.</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Атрибут BORDER
У тегу <ТАВLЕ> часто визначають, як виглядатимуть рамки, тобто лінії, що оточують елементи таблиці і саму таблицю. Якщо ви не задасте рамку, то отримаєте таблицю без ліній, але простір під них буде відведений. Того ж результату можна добитися, задавши <ТАВLЕ ВОRDER=0>. Іноді хочеться зробити межу потовще, щоб вона краще виділялася. Можна для привертання уваги до рисунка або тексту задати виключно жирні межі. При створенні вкладених таблиць доводиться робити для різних таблиць межі різної товщини, щоб їх легше було розрізняти.
Атрибут CELLSPACING
Атрибут СЕLLSPACING визначає ширину проміжків між комірками в пікселах. Якщо цей атрибут не вказаний, по замовчуванню задається величина, рівна двом пікселам. За допомогою атрибуту СЕLLSPACING= можна розміщувати текст і графіку там, де вам треба. Якщо ви хочете залишити порожнє місце, можна вписати в комірка пропуск.
<HTML>
<BODY>
<CENTER>
<TABLE BORDER CELLSPACING=20>
<TR>
<TD>Текст або дані</TD>
<TD>Текст або дані</TD>
<TD>Текст або дані</TD>
</TR>
<TR>
<TD>Текст або дані</TD>
<TD>Текст або дані</TD>
<TD>Текст або дані</TD>
</TR>
</TABLE>
<TABLE BORDER CELLSPACING=10>
<TR>
<TD>Текст або дані</TD>
<TD>Текст або дані</TD>
<TD>Текст або дані</TD>
</TR>
<TR>
<TD>Текст або дані</TD>
<TD>Текст або дані</TD>
<TD>Текст або дані</TD>
</TR>
</TABLE>
<TABLE BORDER CELLSPACING=0>
<TR>
<TD>Текст або дані</TD>
<TD>Текст або дані</TD>
<TD>Текст або дані</TD>
</TR>
<TR>
<TD>Текст або дані</TD>
<TD></TD>
<TD>Текст або дані</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>