abc HTML5 i CSS TUTORIAL

Povezivanje ćelija /TABLE - CELL SPANS/ <colspan> i <rowspan>


Slika 1. TAG-ovi za tabelu

Povezivanje ćelija /TABLE - CELL SPANS/   Povezivanje kolona - Sintaksa: <colspan="broj_kolona"> Povezivanje redova - Sintaksa: <rowspan="broj_redova">

COLSPAN /COMBINE COLUMNS/ ROWSPAN /COMBINE ROWS/

Mogu se povezivati ćelije redova i ćelije kolona. Povezivanje dvije ćelije kolona <colspan="2">, povezivanje dvije ćelije redova rowspan="2"

table border
Slika 2. Primjeri povezivanja ćelija

Primjer 1. Kreirati tabelu koja povezuje dvije kolone zaglavlja.

Kod Objašnjenje Ispis na ekran

<!DOCTYPE html>
<html>
<head><title>Povezivanje</title></head>
<body>
<h4>&#262;elija koja povezuje dvije kolone:</h4>
<table border="1">
  <tr>
    <th>Ime</th>
    <th colspan="2">Djelo</th>
  </tr>
  <tr>
    <td>Ivo Andri&#263;</td>
    <td>Na drini &#263;uprija</td>
    <td>Prokleta avlija</td>
  </tr>
</table>
</body></html>

Tabela sa pozezivanjem ćelija horizontalnog zaglavlja <th colspan="2">.

Ćelija koja povezuje dvije kolone:

Ime Djelo
Ivo Andrić Na drini ćuprija Prokleta avlija

Primjer 2. Kreirati tabelu koja povezuje dvije ćelije vertikalnog zaglavlja.

Kod Objašnjenje Ispis na ekran

<!DOCTYPE html>
<html>
<head><title>Povezivanje</title></head>
<body>
<h4>&#262;elija koja‚ pozevuje dva reda:</h4>
<table border="1">
  <tr>
    <th>Ime:</th>
    <td>Ivo Andri&#263;</td>
  </tr>
  <tr>
     <th rowspan="2">Djelo:</th>
     <td>Na drini &#263;uprija</td>
     </tr>
   <tr>
     <td>Prokleta avlija</td>
   </tr>
</table>
</body></html>

Tabela sa pozezivanjem ćelija horizontalnog zaglavlja <th rowspan="2">.

Ćelija koja pozevuje dva reda:

Ime: Ivo Andrić
Djelo: Na drini ćuprija
Prokleta avlija
   

Daljnji rad 1:
Primjer 1. Kreirati tabelu sa 4 kolone i 3 reda. Povezati drugu i treću kolone zalavlja.

Primjer 2: Kreirati tabelu sa 4 kolone i 3 reda. Povezati prvu, drugu i treću kolonu zalavlja.

(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