Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
ВебТех Конспект лекций 2011 укр.doc
Скачиваний:
37
Добавлен:
18.08.2019
Размер:
928 Кб
Скачать
☆

Атрибут 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>

Атрибут bgcolor

Даний атрибут дозволяє встановити колір фону. У залежності від того, з яким тегом (TABLE, TR, TD) він застосовується, колір фону може бути встановлений для всієї таблиці, для рядка або для окремої клітинки. Значенням даного атрибуту є RGB-код або стандартну назву кольору.

<HTML>

<BODY>

   <CENTER>

   <TABLE BORDER BGCOLOR=yellow>

     <TR BGCOLOR=blue>

       <TD> Текст або дані </ TD>

       <TD BGCOLOR=red> Текст або дані

       </ TD>

       <TD> Текст або дані </ TD>

     </ TR>

     <TR BGCOLOR=green>

       <TD> Текст або дані </ TD>

       <TD> Текст або дані </ TD>

       <TD BGCOLOR = lime> Текст або дані

       </ TD>

     </ TR>

   </ TABLE>

   </ CENTER>

</ BODY>

</ HTML>

Атрибут background

Даний атрибут задає фонове зображення для таблиць. Застосуємо до тегам TABLE і TD. Його значенням є URL файлу з фоновим зображенням. Застосування цього атрибуту розглядається нижче.

Використання таблиць в дизайні сторінки

Таблиці хороші тим, що при бажанні можна зробити їх межі невидимими. Це дозволяє за допомогою тега <ТАВLЕ> красиво розміщувати на сторінці текст і графіку. Поки тег <ТАВLЕ> залишається єдиним потужним засобом форматування в HTML. Дизайнери Web-сторінок зараз мають практично тієї ж свободою щодо використання "порожнього простору", що і творці друкованих сторінок. Таблиці найкраще допомагають відійти від ієрархічного розміщення тексту на Web-сторінках.

Якщо браузер підтримує таблиці, він зазвичай правильно відображає найбільш цікаві ефекти, отримані з їх допомогою

<HTML>

<BODY>

 <CENTER>

 <TABLE CELLPADDING = "10" CELLSPACING = " 0

        "BORDER=" 16 ">

   <TR>

     <TD ALIGN="center">

       <H2> Інтернет-Університет

           Інформаційних Технологій </ H2>

       <H3> Ласкаво просимо! </ H3>

       <TABLE BORDER WIDTH =" 100% " >

         <TR>

           <TD ALIGN="center"> <I> Навчальний курс

            "Основи Web-технологій" </ I> </ TD>

         </ TR>

       </ TABLE>

     </ TD>

   </ TR>

 </ TABLE >

 </ CENTER>

</ BODY>

</ HTML>

Рис. 4.2. Використання таблиць в дизайні