• Гідрологія і Гідрометрія
• Господарське право
• Економіка будівництва
• Економіка природокористування
• Економічна теорія
• Земельне право
• Історія України
• Кримінально виконавче право
• Медична радіологія
• Методи аналізу
• Міжнародне приватне право
• Міжнародний маркетинг
• Основи екології
• Предмет Політологія
• Соціальне страхування
• Технічні засоби організації дорожнього руху
• Товарознавство продовольчих товарів

Тлумачний словник
Авто
Автоматизація
Архітектура
Астрономія
Аудит
Біологія
Будівництво
Бухгалтерія
Винахідництво
Виробництво
Військова справа
Генетика
Географія
Геологія
Господарство
Держава
Дім
Екологія
Економетрика
Економіка
Електроніка
Журналістика та ЗМІ
Зв'язок
Іноземні мови
Інформатика
Історія
Комп'ютери
Креслення
Кулінарія
Культура
Лексикологія
Література
Логіка
Маркетинг
Математика
Машинобудування
Медицина
Менеджмент
Метали і Зварювання
Механіка
Мистецтво
Музика
Населення
Освіта
Охорона безпеки життя
Охорона Праці
Педагогіка
Політика
Право
Програмування
Промисловість
Психологія
Радіо
Регилия
Соціологія
Спорт
Стандартизація
Технології
Торгівля
Туризм
Фізика
Фізіологія
Філософія
Фінанси
Хімія
Юриспунденкция

Створення таблиць. Частина 1.

У процесі створення сайтів таблиці використовуються дуже часто, оскільки картинки, тексти та інший вміст – усе це розміщено один відносно одного за допомогою таблиці. Ось приклад веб-сторінки, який не обійшовся без використання таблиць:

Отже, таблиця задається за допомогою команди або тега < TABLE > і закривається відповідно - < /TABLE >.

Перед тим, як створюється веб-документ з таблицею, його краще спочатку намалювати на аркуші паперу - потім легше буде створювати їх на комп'ютері.

Але це ще не все: адже будь-яка таблиця складається з окремих чатинок, розташованих в рядках і стовпцях.

Тому, окрім основного тега, треба ще вказувати і інші:

Атрибути < TR >і < /TR > відповідають за рядок таблиці Атрибути < TD >і < /TD >- за стовпці таблиці

Визначимо детально, як у нас вийшла така таблиця.

1) Спочатку пишемо такий код - він задає два рядки:

< table >

< tr >< /tr >

< tr >< tr >

< /table >

2)Далі задаємо по три стовпці в кожному рядку:

< table >

<tr>

< td >< /td >

< td >< /td >

< td >< /td >

< /tr >

< tr >

< td >< /td >

< td >< /td >

< td >< /td >

< /tr >

< /table >

3) Тепер заповнюємо клітинки текстом:

< 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 - перший ряд, другий стовпець). Ось що вийшло після виконаних дій:

4) Далі створюємо фон стовпцям. Для цього існує така зв'язка команд якBGCOLOR="колір". Задати фон для ряду можна за допомогою все того ж атрибуту bgcolor, який треба прописати в тегу <tr>:

<tr bgcolor="pink">

А для завдання фону для усієї таблиці атрибут bgcolor прописується тут: < table >:

< table bgcolor="pink" >

Ось результат:

Як видно, цей варіант таблички ще не зовсім «дорослий» і його треба трішки збільшити.

5) Отже, задаємо висоту і ширину елементам таблиці. Тут згодяться такі атрибути якHEIGHTіWIDTH.

Їх можна задавати для усієї таблиці в цілому, і для одного ряду або для одного стовпця.

Висота і ширина задаються як в пікселях, так і відсотках.

< table >

< tr >

< td height="35" width="50" bgcolor="pink" > 1x1 < /td >

< td width="50" bgcolor="green" > 1x2 < /td >

< td width="50" bgcolor="pink" > 1x3 < /td >

< /tr >

< tr >

< td height="35" width="50" bgcolor="green"> 2x1 < /td >

< td width="50" bgcolor="pink" > 2x2 < /td >

< td width="50" bgcolor="green" > 2x3 < /td >

< /tr >

< /table >

6)Тепер останній крок: вирівнювання вмісту (у нашому випадку це текст) всередині таблиці:

< table >

< tr >

< td height="35" width="50" bgcolor="pink" > < center > 1x1 < /center > < /td >

< td width="50" bgcolor="green" > < center > 1x2 </center> < /td >

< td width="50" bgcolor="pink" > < center > 1x3 </center> < /td >

< /tr >

< tr >

< td height="35" width="50" bgcolor="green" > < center > 2x1 < /center > < /td >

< td width="50" bgcolor="pink" > < center > 2x2 < /center > < /td >

< td width="50" bgcolor="green" > < center > 2x3 < /center > < /td >

</tr>

< /table >

Ось та таблиця, яка була представлена на початку уроку.

Переглядів: 205