6Основе HTML

Таблице

У HTML таблице се примењују, се не само за оно за шта смо навикли да оне служе (као скуп података, распоређених по редовима и ступцима), већ и за лакше размештање информације на html-страници. Простије речено, могуће је целу html-страницу представити у виду таблице, на пример, сместити изборник у њен леви стубац, основну информацију у средњи стубац, а допунске везе (линкове) у десни стубац.

Сама таблица у HTML задаје се таговима <TABLE> i </TABLE>, редови таблице (смештају се између тагова <TABLE> i < /TABLE>) помоћу тагова <TR> i </TR>, а стубци таблице (смештају се између тагова <TR> и </TR>) помоћу тагова <TD> i </TD>.

На пример, направићемо таблицу која се састоји из 1 реда и 2 стубца. HTML-код:

<table>
  <tr>
    <td>Прва ћелија</td>
    <td>Друга ћелија</td>
  </tr>
</table>

Код се може записати и овако:

<table><tr><td>Прва ћелија</td><td>Друга ћелија</td></tr></table>

Али, обично је редова и стубаца таблице много и при таквом писању можемо лако да се збунимо. Зато је препоручљивији први начин. У прегледачу тај код се види овако:

.

.

Стандардно, таблица се приказује у прегледачу без рама. Да би се рам видео, користи се, већ нама познати атрибут border:

<table border="1">
  <tr>
    <td>Прва ћелија</td>
    <td>Друга ћелија</td>
  </tr>
</table>

И тада ће прегледач показати:

Значење атрибута border утиче само на спољашњи рам, рамови међу ћелијама не могу се мењати. Они се могу приказивати или не. На пример, ако променимо значење атрибута border с 1 на 10, oнда ћемо добити:

.

.

Може се мењати боја спољног рама уз помоћ атрибута bordercolor.На пример:

<table border="10" bordercolor="#FF0000">
  <tr>
    <td>Прва ћелија</td>
    <td>Друга ћелија</td>
  </tr>
</table>

Тада ћемо у прегледачу видети:
.

.

Да  би променили растојање међу суседним ћелијама користимо атрибут cellspacing. Ради очигледности, направићемо сложенију таблицу: два реда и три ступца и применићемо атрибут cellspacing:

.

<table border="5" cellspacing="10">
  <tr>
    <td>Прва ћелија</td><td>Друга ћелија</td><td>Tрећа ћелија</td>
  </tr>
  <tr>
    <td>Четврта ћелија</td><td>Пета ћелија</td><td>Шеста ћелија</td>

  </tr>
</table>

.

Прегледач ће показати:

.

Да се зада отступ унутар ћелија, користи се атрибут cellpadding. Ако у нашем HTML-коду променимо први ред, рецимо овако:

<table border="5" cellpadding="10">

добијамо

.

Да би раширили ћелије по хоризонтали (ступцима) или по вертикали (редовима), у HTML примењују се следећи атрибути:

.

colspan – раширење ћелија по хоризонтали (ступцима);

rowspan – раширење ћелија по вертикали (редовима).

.

На пример, изменимо наш HTML-код тако:
.

<table border="5" cellpadding="10">
  <tr>
    <td colspan="2">Прва и друга ћелија</td><td>Tрећа ћелија</td>
  </tr>
  <tr>
    <td>Четврта ћелија</td><td>Пета ћелија</td><td>Шеста ћелија</td>
  </tr>
</table>

.

у прегледачу видимо:

 А ако је овако:

.

<table border="5" cellpadding="10">
  <tr>
    <td>Прва ћелија</td><td>Друга ћелија</td><td rowspan="2">Трећа и шеста ћелија</td>
  </tr>
  <tr>
    <td>Четврта ћелија< /td>< td>Пета ћелија</td>
  </tr>
</table>

.

Добијамо:

.

Изменити размере таблице и ћелија могуће је помоћу атрибута width (ширина) и height(висина). Њихово значење, задаје се у пикселима или процентима. На пример:

<table width="75%" height="25%">

.

Аналогно је и за ћелије. Хоризонтално поравнање таблице на страници, врши се помоћу већ познатог атрибута align. Његово значење такође ти је већ познато: center (по центру), left (по левом крају) i right (по десном крају). Тај атрибут се примењује и за поравнање садржаја у ћелијама. На пример, за поравнање целе таблице то изгледа овако:

.

<table align="center">
  <tr>
    <td>Прва ћелија</td><td>Друга ћелија</td>
  </tr>
</table>

а за то, да поравнамо једну од ћелија треба да напишемо овако:
.

<table align="center">
  <tr>
    <td align="left">Прва ћелија</td><td>Друга ћелија</td>
  </tr>
</table>

.

За вертикално поравнање садржине ћелија предвиђен је атрибут valign, који има следећа значења:

baseline – по базној линији;

bottom – по доњем крају;

middle – по средини (прећутно значење);

top – по горњем крају.

.

Пример:  <td valign="top">Прва ћелија</td>

.

Боја позадине целе таблице или појединих делова њених ћелија поставља се помоћу атрибута bgcolor. О томе како изабрати значење боје у HTML говорили смо раније. Пример:

.

<table border="5" cellpadding="10"bgcolor="#FFFFFF">
  <tr>
    <td>Прва ћелија </td>< td>Друга ћелија</td><td rowspan="2">Трећа и шеста ћелија</td>
  </tr>
  <tr>
    <td>Четврта ћелија</td>< tdbgcolor="#FF0000">Пета ћелија</td>
  </tr>
</table>

.

У прегледачу видимо:

.

Уз помоћ атрибута background можемо задати позадину целе таблице или појединих ћелија графичким објектом. Пример за позадину целе таблице:

<table background="put do slike">

За ћелију, HTML-код ће бити:

<td background="put do slike">

.

Као што сам рекла на почетку, у ћелију се може ставити било шта: текст, слике или друга таблица. Управо зато је она веома згодна за размештање садржаја странице у одвојене блокове.

.

Помоћу ових знања, можете направити и цео сајт, а мени је био циљ само да представим  основе о HTML.

.