D gt; і lt;/TD gt ;. Між тегами lt; TD gt; і lt;/TD gt ;, поміщається текст, вставляються картинки і все що буде видно на сторінці сайту.
Теги lt; TR gt; і lt;/TR gt ;, позначають горизонтальну рядок таблиці, а теги lt; TD gt; і lt;/TD gt;- Вертикальну колонку або осередок.
Нижче показана рядок таблиці, яка складається з одного осередку, в коді вона буде розташовуватися так: lt; TR gt; lt; TD gt; Рядок з одного осередку lt;/TD gt; lt;/TR gt; (Рис.3).
Розділимо цей рядок на чотири осередки (Мал. 4) і код буде таким:
lt; TR gt;
lt; TD gt; 1 осередок lt;/TD gt;
lt; TD gt; 2- осередок lt;/TD gt;
lt; TD gt; 3- осередок lt;/TD gt;
lt; TD gt; 4-осередок lt;/TD gt;
lt;/TR gt;
Малюнок 3 - Рядок з одного осередку
Малюнок 4 - Рядок з декількох осередків
Усередині тега lt; TABLE gt; прописуються атрибути; BORDER, CELLPADDING, CELLSPACING. У коді це буде так: lt; TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 gt;
Розглянемо значення цих атрибутів:
BORDER - вказує, чи буде рамка навколо таблиці і її розміри. Рамки можна задати будь-який колір, робиться це значенням BORDERCOLOR= # CC6666 raquo ;;
CELLSPACING - вказує, чи буде простір між осередками таблиці і розміри цього простору, або комірки будуть щільно прилягати одне до одного;
CELLPADDING - вказує, якою буде відступ від країв осередків, для вмісту цих осередків.
Таблиці потрібно вказати розміри, ширину - WIDTH= і висоту - HEIGHT= raquo ;, а також колір - BGCOLOR= # raquo ;. Для кожного осередку, можна задавати свій розмір і колір. Всі ці значення прописуються всередині тега lt; TD gt ;, так:
lt; TD width=650 height=550 bgcolor= # 00FFCC gt;
У наступному прикладі рядок для вмісту сторінки, розділимо на дві частини, і в код цього рядка між тегами lt; TR gt; lt;/TR gt; додамо теги lt; TD gt; lt;/TD gt; для лівої колонки. Тепер шапка і рядок для меню розташовані над двома колонками, замість однієї у першому прикладі, також рядок низу розташована під двома колонками, тому в теги цих рядків додамо атрибут COLSAN=2.
Якщо сторінка буде з трьох колонок, то між тегами lt; TR gt; lt;/TR gt ;, в яких розміщена середня частина сайту, поміщаємо ще одну пару тегів lt; TD gt; lt;/TD gt ;, для правої колонки, значення COLSPAN, дорівнюватиме 3, замість 2 в попередньому прикладі, так як верх і низ сайту, розташовані вже над і під трьома колонками.
У наступному коді, розміри і кольори вказані такі, які застосовувалися до цієї таблиці. (Мал. 5)
lt; HTML gt;
lt; HEAD gt;
lt; TITLE gt; Курсова робота: Інтернет-магазин одягу lt;/TITLE gt;
lt;/HEAD gt;
lt; BODY gt;
lt; BODY gt; Курсова робота: Інтернет-магазин одягу lt;/BODY gt;
lt; TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0 gt;
lt; TR gt;
lt; TD WIDTH=1 HEIGHT=8 BGCOLOR=# FFFFCC rowspan=3 gt; BACKGROUNDLEFT lt;/TD gt;
lt; TD height=100 BGCOLOR=# CCCC99 colspan=2 gt; Курсова робота. Інтернет-магазин одягу lt;/TD gt;
lt; TD WIDTH=1 HEIGHT=80 BGCOLOR=# FFFFCC rowspan=3 gt; BACKGROUNDRIGHT lt;/TD gt;
lt;/TR gt;
lt; TR gt;
lt; TD HEIGHT=250 BGCOLOR= # 0000FE gt; Плаття lt;/TD gt;
lt; TD HEIGHT=250 BGCOLOR=# 66CC66 gt; Спідниці lt;/TD gt;
lt;/TR gt;
lt; TR gt;
lt; TD HEIGHT=250 BGCOLOR=# FF9999 gt; Майки lt;/TD gt;
lt; TD HEIGHT=250 BGCOLOR=# FFFF66 gt; джинси lt;/TD gt;
lt;/TR gt;
lt;/TABLE gt;
lt;/BODY gt;
lt;/HTML gt;
Малюнок 5 - Відображення коду
Ще один вид таблиці, коли вертикальна осередок розташована уздовж кількох або всіх рядків таблиці. Для такого осередку застосовується атрибут ROWSPAN, він вказує, уздовж якого кількість рядків розташовується ця комірка. У нашій таблиці це 4 рядки - для шапки, для меню, центр сторінки, і низ сторінки, значить ROWSPAN=4.
...
