RSS feed

Recenzije vaših stranica. Stručna recenzija, kritike, savjeti i pomoć. Prve tri recenzije besplatno!

XHTML tablice

Objavljeno: 19.11.2007. 15:33

HTML tablice trebale bi se koristiti isključivo za prikaz tabličnih podataka, međutim tablice su se sve donedavno koristile za strukturiranje i razmještaj (layout) web stranica. U zadnje vrijeme tablice se koriste sve manje, a zamijenjuje ih kombinacija DIV tagova i CSS koji je zadužen za umjetnički dojam ;)

Pa zašto se onda tablice više ne koriste za strukturiranje web stranica?

Tablice se sastoje od redaka (rows) i stupaca (columns), a za izradu se koristi više tagova. Ništa strašno, ali trebat će vam neko vrijeme da sve uvježbate i polovite sve konce.

Jednostavna tablica

Kako izgleda jednostavna tablica? U primjeru možete vidjeti kod za tablicu dimenzija 3x3, odnosno tablicu koja ima tri stupca i tri retka. Radi vizualnog izgleda, dodan je atribut border, koji više ističe samu tablicu.

  <table border="1">
    <tr>
      <td>1. redak, 1. stupac</td>
      <td>1. redak, 2. stupac</td>
      <td>1. redak, 3. stupac</td>
    </tr>
    <tr>
      <td>2. redak, 1. stupac</td>
      <td>2. redak, 2. stupac</td>
      <td>2. redak, 3. stupac</td>
    </tr>
    <tr>
      <td>3. redak, 1. stupac</td>
      <td>3. redak, 2. stupac</td>
      <td>3. redak, 3. stupac</td>
    </tr>
  </table>

U ovoj, jednostavnoj tablici, koristili smo samo tri taga i jedan atribut. Postoji još nekoliko tagova i atributa, međutim, o tome u sljedećim tutorialima. Za početak, dovoljno je da ovladate i naučiti kako napraviti jednostavnije tablice. U sljedećem tutorialu, koji će također biti posvećen tablicama nešto više.


Kako izgleda naša tablica?

Da vas previše ne držim u neizvjesnosti, evo kako će naša tablica izgledati u internetskom pregledniku.

1. redak, 1. stupac 1. redak, 2. stupac 1. redak, 3. stupac
2. redak, 1. stupac 2. redak, 2. stupac 2. redak, 3. stupac
3. redak, 1. stupac 3. redak, 2. stupac 3. redak, 3. stupac

Što dalje?

Prije nego krenete na sljedeći tutorial, probajte se malo poigrati sa tablicama. Možete napraviti drugačije tablice, kombinirati nešto sa prethodnim tutorialima, možete primjerice podebljati ili nakositi tekst. Pomoću CSS-a, moguće je pak u potpunosti definirati izgled tablice. Naravno, to je moguće i upotrebom nekih atributa, koji, međutim, nisu dozovljeni u XHTML-u.

Evo i primjer koji možete kopirati u Notepad, ili bilo koji drugi program koji koristite za uređivanje XHTML stranica.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Moja prva web stranica - tablice</title></head>
<body>  

<h1>Naslov</h1>
Ovo je moja prva web stranica!
<h2>Podnaslov</h2>
<p>Ovo je prvi redak.<br />
Drugi redak.</p>
<h3>Podnaslov drugi</h3>
<p><strong>Naglaseni</strong><em>tekst</em></p>
 
<h2>Ovo je primjer s tablicama</h2>
  <table border="1">
    <tr>
      <td>1. redak, 1. stupac</td>
      <td>1. redak, 2. stupac</td>
      <td>1. redak, 3. stupac</td>
    </tr>
    <tr>
      <td>2. redak, 1. stupac</td>
      <td>2. redak, 2. stupac</td>
      <td>2. redak, 3. stupac</td>
    </tr>
    <tr>
      <td>3. redak, 1. stupac</td>
      <td>3. redak, 2. stupac</td>
      <td>3. redak, 3. stupac</td>
    </tr>
  </table>
</body>
</html>

uzzi on 01.04.2008. 12:33

ovo mi nije baš nešto stranica

blake on 05.03.2008. 00:07

da, div.ovima i css-om

Lady Makai Design on 08.02.2008. 12:15

Hm dakle umjsto tablica mogli bi se koristiti tagovi. tako bar ja radim. Samo što mi katkad naprave problem. Recimo ako radim neki dizajn u firefoxu. On izgleda normalno. Ali čim upalim IE i idem na tu stranicu onda je recimo jedan box previše u lijevo ili... preuzak je. Jel to mogu kako srediti?

Još jedna stvar što se tiče tablica...
Image slicing. Dakle, jel se to može postići nekako drukčije osim tablicama? Recimo na mom portalu: http://ladymakai.blog.hr/ koristila sam image-slicing u kodu s tablicom. Mogu to nekako lakše riješiti?

Delicious
digg
Ma.gnolia
NewsVine
Reddit
Shadows
YahooMyWeb
 

Komentiraj

:

:


1 + 3 =