У звичайних текстових редакторах таблиці використовують для наочного подання числової чи текстової інформації. У web-дизайні таблиці відіграють більшу роль. Часто їх використовують для позиціювання графічних чи інших об’єктів на екрані. Таблиці утворюють з невидимиим межами(рамками), а вклітинках розташовують картинки, тексти тощо.
Таблиці створюють за допомогою таких тегів:
<TABLE параметри > <TC> Заголовок таблиці </TC> Тут пишемо теги для заповнення клітинок таблиці рядок за рядком. </TABLE> |
Для заповнення клітинок таблиці використовують такі парні теги(закриваючі теги можна не зазначати).
<TR>... </TR> |
Формують рядок таблиці |
<TH> текст </TH> |
Формують клітинку з заголовком рядка чи стовпця |
<TD> текст </TD> |
Формують текст кожної клітинки |
Заголовки рядків і стовпців виводитимуться товстішим шрифтом.
Приклад . Створимо на web-сторінці таблицю-витяг з табеля успішності Світлани за три перші чверті з трьох предметів: інформатики, геометрії та алгебри.
<CENTER> <TABLE BORDER=3 <Table Width=300 BGCOLOR="yellov" BORDERCOLOR="green"> <TC><I>< FONT SIZE=+3 COLOR="RED"> Мої оцінки за три чверті:</FONT> </I></TC> <TR> <TH></TH> <TH> I чверть </TH> <TH> II чверть </TH> <TH> III чверть </TH> </TR> <TR> <TH> ALIGN="left"> Інформатика </TH> <TD> 11 </TD> <TD> 11 </TD> <TD> 11 </TD> </TR> <TR> <TH > ALIGN="left"> Геометрія </TH> <TD> 11 </TD> <TD> 10 </TD> <TD> 10 </TD> </TR> <TR> <TH > ALIGN="left"> Алгебра </TH> <TD> 11 </TD> <TD> 10 </TD> <TD> 10 </TD> </TR> </TABLE> </CENTER><P>
|
Щоб об’єднати у рядку декілька послідовних клітинок, наприклад, дві в одну, у відповідному першому тезі <TH> чи <TD> записують параметр ROWSPAN=2. А щоб об’єднати у стовпці дві клітинки в одну, викоритсовують параметр COLSPAN=2.
Колір рамки таблиці задають параметром BORDERCOLOR="колір рамки", а колір тла клітинок - параметром BGCOLOR="колір фону". Товщину рамки в пікселях задають параметром BORDER="товщина рамки,3". Якщо значення параметра - число нуль або параметра немає, то рамка буде невидимою.