Izrada web stranice - umetanje i uređivanje tablica

Dodavanje tablica u HTML datoteku

Tablice se u web dizajnu koriste dizajn rasporeda elemenata na stranici, precizno slaganje elemenata, formulare, pisanje teksta u dva stupca i sl.

Danas se uporaba tablica izbjegava, a raspored elemenata na stranici određuje se uporabom slojeva. Kako je za taj dio potrebno poznavanje stilova, u ovom trenutku za raspored elemenata na stranici koristit ćemo tablice.

Oznaka za umetanje tablice na web stranicu je <table>. Svaka tablica (table) ima određen broj redova (tr), a svaki red određen broj ćelija (td).

Primjer:

Rezultat HTML koda:

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

je tablica

Okvir tablice se ne vidi, jer nije definiran. S dodavanjem okvira i ostalim atributima oznake img upoznat ćemo se u sljedećoj lekciji.

Zadatak 1

Napravite novu datoteku tablice.htm. (programom Notepad2). Nakon osnovnih oznaka dodajte u dokument sljedeći kod:

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Spremite promjene i pogledajte stranicu u web pregledniku.

Zadatak 2

Uređivanje tablica

Ukoliko je potrebno, okvir tablici dodajemo atributom border. Vrijednost atributa je debljina vanjskog ruba tablice u pikselima.

Primjer:

  <table border=“1”>

dodaje tablici okvir debljine 1 pixel.

Atribut align određuje položaj tablice na stranici. Vrijednosti atributa align su: left, center, right.

Primjer:

  <table align=“center”>

postavit će tablicu na sredinu stranice.

Ostali atributi oznake table:
  height - visina
  width – širina

Vrijednost atributa height i width može se izraziti u:
  pikselima => "400"
  postocima => "80%”

Napomena: Ove atribute moguće je pridodati i tablici i ćeliji!

Zadatak 3

1. Dodajte okvir debljine "2" tablici u dokumentu tablice.htm
2. Tablicu postavite na sredinu stranice.
3. Postavite širinu tablice na 80%

Zadatak 4

• Na portalu za udaljeno učenje Nikola Tesla (web dizajn => Uvod u HTML) u lekciji Tablice=>Izrada tablice proučite atribute colspan i rowspan te riješite zadatak za vježbu na dnu stranice.
• Na školskoj stranici (u izborniku dokumenti, mapi informatika) pronađite i riješite križaljku imena tablice_krizaljka

Zadatak 5

U dokumentu odgovori.htm napravite tablicu oblika:

• U lijevu gornju ćeliju umetnite sliku škole
• U desnu gornju ćeliju stavite naslov Web dizajn – osnove HTML-a
• U lijevu donju ćeliju upišite tekst:
  • Uvod u HTML
  • Slika na web stranici
  • Tablice
  • Liste
  • Poveznice
• U desnoj donjoj ćeliji neka ostanu odgovori na pitanja

Izgled stranice

	Web dizajn – osnove HTML-a
Uvod u HTML Slika na web stranici Tablice Liste Poveznice	Odgovori na pitanja...