Html povezivanje ćelija tablice : HTML vježba 5.2 : Bartol plus

Vježba 5.2

Vježba 5.2: HTML tablice - povezivanje ćelija.zip

Načinite mapu Vjezba 5 i u njoj mapu slike.
Preuzmite i raspakirajte .zip datoteku, pomoću gornje poveznice.
Slike prekopirajte u mapu slike koju ste načinili u mapi Vjezba 5.
<style> element
Kako bi tablicu vizualno oblikovali koristimo css. Budući da ne koristimo odvojenu css datoteku sa stilovima, css oblikovanja smo smjestili u <style> element, koji se nalazi unutar <head> elementa.
Preuzmite datoteku tablica-bojeva.html.

tablica-brojeva.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tablica brojeva</title>
  <style>
  body {
    background-color: ivory;
  }
  caption {
    color: darkblue;
    font-size: 20px;
  }
  td {
    padding: 15px;
    border: 1px solid red;
  }
  </style>
</head>  
<body>

</body>
</html>

Unutar <style> elementa su pomoću css selektora dodana oblikovanja:
boje pozadine (engl. background-color)
boje teksta (engl. color)
veličine fonta (engl. font-size)
odmaka (engl. padding)
poravnanja teksta (engl. text-align)
Osim oblikovanja koja se nalaze u <style> elementu, ne trebate dodati nikakva css oblikovanja kako bi dobili tablicu koja se nalazi na predlošku sa slike 5.2.
Tablicu umetnite unutar već postojećeg <body> elementa.
Koristite samo html elemente za oblikovanje tablice i za umetanje slike. Nikakve html elemente osim ovih ne trebate koristiti.
Tablica treba imati slijedeće dijelove <caption>, <thead>, <tbody> i <tfoot>
Prvi redak tablice umetnite unutar <thead> elementa tablice.
Posljednji redak tablice umetnite unutar <tfoot> elementa.
Ostatak tablice se treba nalaziti unutar <tbody> elementa.
U pojedine ćelije umetnite odgovarajuće slike.
Ćelije koje zauzimaju više redaka ili stupaca povežite pomoću svojstva rowspan, odnosno colspan.
Slika 5.2
Spremite html dokumente u mapu Vjezba 5 pod imenom zadanim imenom.
Otvorite web stranicu u web pregledniku. Provjerite je li izgled web stranica istovjetan onome na slici 5.2.

Rješenje vježbe 5.2

Usporedite dobiveni kôd s kôdom rješenja Vježbe 5.2

Rješenje vježbe 5.2: HTML tablice - povezane ćelije

Vježba - HTML povezivanje ćelija tablice

Vježba 5.2 - Cilj vježbe je naučiti načiniti tablicu, koristeći pri tome povezivanje stupaca i redaka.

Vježba 5.2

Rješenje vježbe 5.2

Naši pokrovitelji

Naša preporuka

Besplatne usluge: