Kurs: --- Adobe Dreamweaver CS5.5 Materijali vezani uz ovu lekciju: - Test tabele - Tabele (PDF dokument)
Tabele u HTML dokumentima nikako ne bi trebalo koristiti za strukturiranje saržaja, već samo za ono za šta su i namenjene, a to je tabelarno strukturiranje podataka. Ranijih godina dizajneri su kreirali nevidljive tabele u koje su raspoređivali elemente strana i tako kreirali raspore. Danas je ta tehnika napuštena zbog širokih mogućnosti CSS-a, a tabele su došle na svoje. Kada želimo da dodamo tabelu, postavićemo kursor na željeno mesto i izabrati Insert > Table iz padajućeg menija, ili Table opciju iz panela Insert. U oba slučaja, dobićemo Table dijalog koji vidimo na sledećoj slici. Dijalog za kreiranje tabele
Nova tabela u dizajn prikaz <table width="80%" border="0" cellspacing="0" cellpadding="2"> <tr> <th scope="col"> </th> <th scope="col"> </th> <th scope="col"> </th> <th scope="col"> </th> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table>
Struktura tabeleTabelu okružuje <table> tag, sa određenim atributima koje smo pomenuli (Width, Border, Cellspacing, Cellpadding, Summary). Obratite pažnju na to da se podešavanja tabele unose kao html atributi, CSS ćemo koristiti kasnije za stilizaciju.
<table> </table> Koji sadrži atribute: <table width="80%" border="0" cellspacing="0" cellpadding="2"> </table> Svaki red1 u tabeli se označava <tr> tagom (Table Row Tag) <table width="80%" border="0" cellspacing="0" cellpadding="2"> <tr> </tr> </table> Dok se svaka ćelija označava <td> (Table Data Tag), eventualno sa <th> (Table Header Tag), ukoliko je header ćelija. <table width="80%" border="0" cellspacing="0" cellpadding="2"> <tr> <td>Ovo je sadržaj ćelije</td> </tr> Ovako smo kreirali tabelu sa jednom jedinom ćelijom. Jedan red i jedna ćelija. Možda već naslućujete da kod HTML tabela ne postoje kolone, barem što se koda tiče. Ukoliko bismo imali tabelu sa dva reda i tri kolone, njen kod bi izgledao ovako:
<table> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> Tabela redovi ćelije Tabela redovi ćelije
Sa druge strane, u dizajn prikazu, ako selektujemo celu tabelu u Properties Inspectoru će se pojaviti podešavanja. A – ID tabele
Kao i kod CSS-a uopšte, možemo unositi stilizaciju i formatiranje tabele, bilo pomoću CSS Styles panela, bilo pomoću Properties Inspectora. Ukoliko postavimo kursor unutar ćelije, označimo ćeliju, red ili kolonu, u Properties Inspectoru možemo menjati podešavanja. Properties Inspector dok je selektovana kolona tabele
Ukoliko ne postoji već postojeći CSS za izabrani elemenat, izborom bilo koje opcije DW će nam ponuditi da kreira novi opis, kao što možemo videti sa sledeće slike:
Novi CSS rule dijalog
Ako bismo stavili samo tr td ili tr th ili tr i tako dalje, opis bi se odnosio na sve moguće tabele, pogotovo ako je eksterni CSS primenjen na sve stranice, odnosio bi se na sve tabele na sajtu, odnosno na njihove delove.
Importovanje tabelarnih podataka Ako već posedujemo Word ili Excel dokumenta sa tabelarnim podacima, najlakši način kreiranja tabele sa tim podacima u DW-u je pomoću opcije Import Tabular Data do koje možemo doći na dva načina: File > Import > Tabular Data ili Insert > Table Objects > Tabular Data. Otvoriće se Import Tabular Data dijalog. Dijalog za import tabelarnih podataka
U polju Data file unosimo lokaciju izvornog fajla. Klikom na dugme Browse otvaramo dijalog za lociranje fajla na računaru. Možemo odrediti delimiter koji zavisi od dokumenta sa podacima. Zatim možemo odrediti width: Fit to data koji postavlja širinu shodno podacima ili možemo odrediti širinu u pikselima/procentima. Postoje i opcije za podešavanje atributa Cell Padding, Cell Spacing i Border, kao i formatiranja prvog reda.
|