Tabele
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 :
KOD:
<table> <tr> <td></td> </tr> </table>
DIZAJN:
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:
KOD:
<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
heder – Glavna slika | ||
meni / navigacija | ||
|
||
futer |
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:
tekst
tekst tekst tekst |
tekst |
sa valign:
tekst
tekst tekst tekst |
tekst |
Trackback from your site.