Таблиците в HTML документи се използват главно за две неща.
Първо, те се използват за представяне на данни в удобен за възприемане вид. Редовете и колоните в таблиците улесняват значително не само възприемането, но и анализа на информацията, съдържаща се в таблицата.
Отделните клетки на таблица могат да съдържат текст, графика и други обекти.
Съдържащите се в клетките обекти могат да се използват като елементи за хипервръзка.
Второто, за което се използват таблиците в HTML документите е за точно позициониране в рамките на Web страницата на всички обекти в нея (текст, графика и др.).
Въпреки възможностите, които предоставя HTML 4.0 за решаване на тази задача със средствата разгледани в глава 16, таблиците продължават да се използват широко в HTML документите и за тази цел.
Общият вид на изходния код на таблица изглежда
по следния начин:
...............................
<TABLE>
<CAPTION>.........</CAPTION>
<TR><TH>.....</TH><TH>.....</TH><TH>.....</TH></TR>
<TR><TD>.....</TD><TD>.....</TD><TD>.....</TD></TR>
..............................
<TR><TD>.....</TD><TD>.....</TD><TD>.....</TD></TR>
</TABLE>
.............................
Основата на таблицата е тага <TABLE ...>........</TABLE>.
Между началната и крайната част на тага <TABLE ... > се използват други тагове, позволяващи създаването на разнообразни структури на таблиците.
Чрез атрибутите в таговете, използвани в таблиците, се определя желаният външен вид на таблиците.
Атрибутите в тага <TABLE ...> задават определени свойства на цялата таблица.
Два от използваните атрибути в тага <TABLE ... > и техните стойности са посочени в табл. 11.1.
Атрибути |
Стойност на атрибута |
Резултат от използване |
ALIGN= |
left |
Таблицата се подравнява спрямо левия край на прозореца
на браузера |
center |
Таблицата се позиционира в средата на прозореца |
|
right |
Таблицата се подравнява спрямо десния край на прозореца
на браузера |
|
WIDTH= |
число |
Задава се ширина на таблицата в пиксели. |
число% |
Ширината на таблицата се задава в % от ширината на
прозореца на браузера |
Останалите атрибути на тага <TABLE ...> са посочени в следващия параграф.
Отделните редове в таблицата се задават с тага <TR>.....</TR>.
Всеки отделен ред съдържа в себе си определен брой клетки. Най-малкият елемент на таблицата е клетката.
Клетките са два вида.
Първият вид са заглавните клетки, в които се записват заглавията на колоните.
Вторият вид клетки са клетките с данни. В тях се съдържат данните на таблицата.
Тагът за задаване на заглавните клетки е <TH>.....</TH>.
Тагът за клетки с данни е <TD>.....</TD>.
Таговете <TH> и <TD> имат два атрибута , с които могат да се обединяват съседни клетки в една, както по редове (от ляво на дясно), така и в колони (от горе надолу).
С атрибута ROWSPAN="число" (брой редове) се обединяват 2 и повече съседни клетки във вертикална посока.
С атрибута COLSPAN="число" (брой колони) се обединяват две и повече съседни клетки в хоризонтална посока.
Заглавие на таблица се задава с тага <CAPTION>......</CAPTION>.
Този таг се записва непосредствено след тага <TABLE ...>. Между началния и крайния таг за таблица може да има само един таг <CAPTION>......</CAPTION>.
Тагът <CAPTION> има само един атрибут ALIGN. Стойностите на атрибута за този таг са посочени в табл.11.2.
Стойности |
Резултат от използване |
|---|---|
left |
Заглавието е над таблицата в левия и край |
right |
Заглавието е над таблицата в десния и край |
top |
Заглавието е центрирано над таблицата |
bottom |
Заглавието е центрирано под таблицата |
На фиг.11.1. е показан изходения код на тбл. 11.2
| <table WIDTH="100%" BORDER
BGCOLOR="#CCFFFF" > <CAPTION align="top"> Стоиности на атрибута ALIGH в тага <CAPTION> </CAPTION> <tr BGCOLOR="#FFFFCC"> <th>Стойности </th> <th>Резултат от използване</th> </tr> <tr> <td>left</td> <td>Заглавието е над таблицата в левия и край</td> </tr> <tr> <td>right</td> <td>Заглавието е над таблицата в десния и край</td> </tr> <tr> <td>top</td> <td>Заглавието е центрирано над таблицата </td> </tr> <tr> <td>bottom</td> <td>Заглавието е центрирано под таблицата</td> </tr> </table> |
В HTML 4.0 са въведени специални тагове за структуриране на таблиците в отделни участъци, както и други атрибути, свързани със структурата и външния вид на таблицата (Приложение 2).