Struktura web strane

Osnovnu strukturu web strane čine tabele, DIV slojevi (kontejneri) i CSS stilovi.

Napomena: Tabele ćemo koristiti za upoznavanje sa HTML-om, kasnije ćemo koristiti samo DIV tagove, obzirom da današnji standardi podrazumevaju Tableless design.

Tabele

Kreiranje tabele

Postavite kursor na stranici gde želite da ubacite tabelu i kliknite na Insert->Table opciju. Otvoriće vam se Table dijalog boks.

Postoje sledeće opcije:

Rows, Columns – Ovde birate koliko će vaša tabela imati redova i kolona

Table width – Ovde određujete kolika će biti širina tabele, ako unesete vrednost u pikselima tada će širina biti fiksna, procente unesite za fleksibilnu širinu (ako se prozor čitača smanjuje ili povećava i tabela shodno tome menja širinu).

Border tickness – Ovde unosite vrednost za debljinu ivica tabele, ako ostavite prazno polje ivica tabele će se prikazati kao da je uneto 1 px, a ako unesete vrednost 0, ivice se neće prikazati.

Cell padding – Ovde unosite vrednost za razmak između ivica ćelije i sadržaja unutar ćelije. Ako ostavite prazno polje, razmak će se prikazati kao 1 px, a ako ne želite nikakav razmak, unesite nulu.

Cell spacing - Ovde unosite vrednost za razmak između ćelija tabele. Ako ne uneste ništa u polje, razmak će se prikazati kao da ste uneli 2 px, ako ne želite razmak, unesite vrednost nula.

Header – Sadržaj u zaglavljima redova i kolona se formatira drugačije nego sadržaj ostalih ćelija. Screen readers drugačije identifikuju sadržaj u tim zaglavljima kako bi pomogli osobama sa oslabljenim vidom u razumevanju sadržaja tabele.

Opcije za pristupačnost tabela:

Caption – Ovde se unosi naslov tabele koji će se pojaviti van tabele na vrhu prvog reda.

Summary – Ovde se unosi opis tabele, sakriven je od čitača, ali ga čitaju Screen Reader-i.

Kliknite na OK i tabela će biti uneta na vašu Web stranicu.

Osnovna struktura tabele 1 red i 1 kolona, je :

<table>

<tr>

<td></td>

</tr>

</table>

tr (table row) na neki način označava red tabele, a td (table data) ćeliju te tabele. Sve što unosimo u tabelu unosimo u okviru td taga. (odnosno između <td> i </td>). Tabele i redovi mogu dodatno da se formatiraju, pa dobijaju dodatne atribute:

<table width="300" border="2">

<tr>

<td></td>

</tr>

</table>

U okviru jedne tabele možemo ubaciti drugu tabelu, ubacivanjem u okviru ćelije.

Za potrebe kursa unapred smo isplanirali izgled strane. Osnovna tabela ima tri reda i jednu kolonu. u trećem redu je ubačena nova tabela sa jednim redom i dve kolone.Širina naše strane, a samim tim i glavne tabele će biti statična 800px

Ako selektujemo tabelu u dizajn prikazu dokumenta, u Property Inspector-u će se pojaviti podešavanja vezana za tabelu. Ovde se nalaze sve opcije koje smo podesili u Table dijalog boksu.

Korisni atribut za tabele je valign=“top“ koji se dodaje td tagu. Na ovaj način sadržaj u ćeliji je uvek poravnat sa vrhom ćelije.

npr: bez valign:

sa valign: