abc HTML5 i CSS TUTORIAL

Dodavanje tabele /INSERT TABLE/ 


Slika 1. TAG-ovi za tabelu

Dodavanje tabele /INSERT TABLE/    Sintaksa: <TABLE BORDER="piksel" WIDTH="procent%" ><TR><TD></TD></TR></TABLE>

<TABLE> </TABLE> - Tabela
<TR> </TR> - Red tabele
<TD></TD> - Ćelija tabele

Značenja oznaka:

  • <TABLE> Početak tabele.
  • BORDER="piksel" Debljina linija tabele u pikselima.
  • WIDTH="procent%" Širina u procentima u odnosu na prozor.
  • <TR> Početak reda.
  • <TD> Početak ćelije.

N a p o m e n a: - Mora se navesti TAG za svaku ćelija (). Sadržaj se može navesti samo u ćeliji tj. u TAG-u <TD>.
- TAG-ovi tabele su pisanu nazubljeni radi lakšeg razumijevanja.

Tabela /TABLE/ se sastoji od kolona i redova. Na presjeku kolone i reda nalazi se ćelija /CELL/. Vidi o tabeli >>


Slika 2. Tabela /TABLE/


Slika 3. Dijelovi tabele

Red /ROW/ je horizontalna grupa ćelija.

Kod za red: <tr> </tr>

Kolona /COLUMN/ je vertikalna grupa ćelija

Kolona se formiara navođenjem reda <tr> </tr> i u njemu TAG za ćeliju <td>Sadržaj</td>

Ćelija /COLUMN/ je element tabele sa sadržajem:

Kod za ćeliju /CELL/: <td>Sadržaj</td>

Primjer 1. Tabela sa jednim redom i jednom ćelijom bez teksta.

Kod Objašnjenje Ispis na ekran
<!DOCTYPE html>
<html>
<head><title>Dodavanje tabele </title></head>
<body>
<table border="1" width="100%">
  <tr>
    <td> </td>
  </tr>
</table>
</body></html>

Tabela sa jednim redom i jednom ćelijom bez teksta.

<tr> </tr> - Kreira red
<td> </td> - Kreira ćeliju

Primjer 2. Tabela sa jednim redom i dvije ćelije bez teksta.

Kod Objašnjenje Ispis na ekran
<!DOCTYPE html>
<html>
<head><title>Dodavanje tabele </title></head>
<body>
<table border="1" width="100%">
  <tr>
    <td> </td>
    <td> </td>
  </tr>
</table>
</body></html>

Tabela sa jednim redom i dvije ćelije bez teksta.

<tr> </tr> - Kreira red
<td> </td> - Kreira ćeliju

 

Primjer 3. Tabela sa dva reda sa po jednom ćelijom bez teksta.

Kod Objašnjenje Ispis na ekran
<!DOCTYPE html>
<html>
<head><title>Dodavanje tabele </title></head>
<body>
<table border="1" width="100%">
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
  </tr>
</table>
</body></html>

Tabela sa dva reda sa po jednom ćelijom bez teksta.

<tr> </tr> - Kreira red
<td> </td> - Kreira ćeliju

 

Primjer 4. Kreirati tabelu sa jednim redom i dvije kolone (tj. dvije ćelije u jednom redu). Tekst u prvoj ćeliji je jedan a u drugoj broj 2.

Kod Objašnjenje Ispis na ekran
<!DOCTYPE html>
<html>
<head><title>Dodavanje tabele2</title></head>
<body>
<table border="1" width="100%">
  <tr>
    <td>jedan </td>
    <td>2 </td>
  </tr>
</table>
</body></html>

Tabela sa jednim redom i dvije ćelije bez teksta.

jedan 2

Primjer 5. Kreirati tabelu sa jednim redom i tri ćelije.

Kod Objašnjenje Ispis na ekran
<!DOCTYPE html>
<html>
<head><title>Dodavanje tabele3</title></head>
<body>
<table border="1" width="100%">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>
</body></html>

Ćelije se navode tagom (<td>Sadržaj</td>) .
1 2 3

Primjer 5. Kreirati tabelu sa tri reda i po jednom ćelijom u svakom redu.

Kod Objašnjenje Ispis na ekran
<!DOCTYPE html>
<html>
<head><title>Dodavanje tabele3</title></head>
<body>
<table border="1" width="100%">
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
</table>
</body></html>

Svaki red počinje sa TAG-om <TR>.
Svaka ćelija se navodi TAG-om <td>Sadržaj</td>.
1
2
3

Primjer 6. Kreirati dvije tabele. Pva ima red sa tri ćelije a druga tabela jednu kolonu sa tri reda (tri reda sa po jednom ćeliju u svakom).

Kod Objašnjenje Ispis na ekran
<!DOCTYPE html>
<html>
<head><title>Dodavanje tabele3</title></head>
<body>
<table border="1" width="100%">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>
druga tabela
<table border="1" width="100%">
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
</table>
</body></html>

Svaki red počinje sa TAG-om <tr> .
Ćelija počinje sa <td> .
1 2 3
Druga tabela
1
2
3

Primjer 7. Kreirati tabelu sa jednim redom i dvije kolone (tj. dvije ćelije u jednom redu). Tekst u prvoj ćeliji je jedan a u drugoj broj 2.

Kod Objašnjenje Ispis na ekran
<!DOCTYPE html>
<html>
<head><title>Dodavanje tabele4</title></head>
<body>
<table border="1">
  <tr>
    <td>red 1, ćelija 1</td>
    <td>red 1, ćelija 2</td>
  </tr>
  <tr>
    <td>red 2, ćelija 1</td>
    <td>red 2, ćelija 2</td>
  </tr>
</table>
</body></html>		 Tabela sa jednim redom i dvije ćelije bez teksta. Nije navedena širina tabele zato je široka koliko je potrebno za ispis teksta u tabli.
red 1, ćelija 1 red 1, ćelija 2
red 2, ćelija 1 red 2, ćelija 2

Daljnji rad
Primjer 1. Kreirati tabelu sa dva reda i dvije kolone. Tekst ćelija u prvom redu 1 i 2, a drugom redu 23 45.

Primjer 2: Kreirati tabelu sa dva reda i tri kolone. Tekst ćelija u prvom redu 2, 4 i 6, a drugom redu 111 222 333.

(Pri pisanju se mogu koristiti standardne opcije  Edit/Copy, Edit/Paste) . 

Prozor na dnu stranice je namjenje za provjeru koda:
- kopirajte kod (edit, copy, paste ili CTRL+C, CTRL+V ili DRAG&DROP metodom), editovanje je moguće u prozoru

Index