Utisci korisnika

Pre nepunih mesec dana kupila sam paket kurseva: PRIPREME ZA POLAGANJE CAMBRIDGE INTERNATIONAL DIPLOMA IN BUSINESS. Obično neki opšti utisak formiramo na kraju, ali ja u ovom trenutku želim sa…

Kada sam na fakultetu polagala ispit iz Obrazovne tehnologije jedno od pitanja je bilo nastava na daljinu. Pojam, značenje, prednosti i nedostaci su mi bili poznati ali u isto vreme daleki, nedostižni…


Kompletna lista utisaka

Testiranje online

Arhitektura računara

Za one koji žele da znaju više.

Windows OS

Ovo bi svakako trebalo da probate.

Odnosi s javnošću

Koliko znate PR?

Pogledajte još neke od testova

Newsletter

Ukoliko želite da Vas redovno obaveštavamo o novostima sa Link eLearning sajta prijavite se na našu newsletter listu.

Ime:

Prezime:

Email:


Anketa

Arhiva anketa

BAZA ZNANJA


Kurs: Adobe Dreamweaver CS5.5

Modul: Linkovi, tabele i forme

Autor: Vuk Ninić

Naziv jedinice: Tabele


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


Postoje sledeće opcije:

  • Rows, Columns - definišemo koliko će tabela imati redova (Rows) i kolona (columns)
  • Table width – određujemo kolika će biti širina tabele, ako unesemo vrednost u pikselima tada će širina biti fiksna, procente unosimo za fleksibilnu širinu koja zavisi od Parent elementa ili prozora browsera.
  • Border tickness - određujemo vrednost za debljinu ivica tabele. Ako ostavimo prazno polje, ivica tabele će se prikazati kao da je uneto 1 piksel, a ako unesemo vrednost 0, ivica se neće prikazati.
  • Cell padding – određujemo vrednost za prostor, razmak između ivica ćelije i sadržaja unutar ćelije. Ako ostavimo prazno polje, razmak će se prikazati kao 1 piksela, a ako unesemo vrednost 0, razmaka neće biti.
  • Cell spacing - ovde unosimo vrednost za razmak između samih ćelija tabele. Ako ne unesemo ništa u polje, razmak će se prikazati kao da smo uneli 2 piksela, a ako unesemo vrednost 0, razmaka neće biti.
  • Header - sadržaj u zaglavljima redova i kolona se formatira drugačije nego sadržaj ostalih ćelija i definiše se drugačije.
  • 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 se ta informacija prosleđuje Screen Reader aplikacijama za osobe slabijeg vida, radi identifikovanja sadržaja.


Ukoliko potvrdimo klikom na ok, kreiraćemo novu tabelu kao na slici ispod,

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 tabele

Tabelu 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.


Dakle, počinjemo sa <table> tagom:

<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


Vidimo dva tr taga koji predstavljaju dva reda, a u svakom od njih po tri polja -td.

Sa druge strane, u dizajn prikazu, ako selektujemo celu tabelu u Properties Inspectoru će se pojaviti podešavanja.

 

A – ID tabele
B – broj redova i kolona
C – širina tabele (% ili px)
D – Cellpading i Cellspacing
E – Align opcije tabele (kao sa tekstom)
F – klasa tabele
G - Help
H – Border
J – brisanje, čišćenje širina kolona (Clear Column Widths), brisanje visina redova (Clear Row Heights), pretvaranje širina u piksele iz procenata (Convert Table Widths to Pixels), pretvaranje širina u piksele iz procenata (Convert Table Widths to Pixels)


Formatiranje 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


DW je odmah ponudio da kreira opis i postavio Compound selektor na osnovu pozicije kursora. Kursor je, u ovom slučaju, bio u jednoj ćeliji i zato je ponudio #data tr td, gde je #data id tabele, tr predstavlja red, a td ćeliju. Ako bismo nastavili i tako kreirali opis, on bi se odnosio na sve ćelije te tabele. Slično tome, možemo selektorom “gađati” redove sa, na primer, #tabela tr ili sve heading ćelije sa određenom klasom preko #neki_id tr th.klasa i tako dalje. Sve ovo možemo i sami uraditi iz CSS Styles panela, bez upotrebe Properties Inspectora.

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.


Smatrate da je ova lekcija korisna?  Preporučite je. Broj preporuka:0


Molimo Vas unesite svoje podatke i dobićete pristup besplatnim lekcijama.

Ime: 
Prezime: 
Email: