Html tablice : HTML vježba 5.1 : Bartol plus

Vježba 5.1

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.html.

tablica.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Moja tablica</title>
  <style>
  body {
    background-color: ivory;
  }
  table {
    border: 1px chocolate solid;
    color: indigo;
  }
  caption {
    padding: 10px;
    caption-side: bottom;
  }
  th, td {
    width: 100px;
    padding: 10px;
    text-align: center;
  }
  tr > td:first-of-type {
    width: 200px;
    text-transform: uppercase;
  }
  thead {
    background-color: sienna;
  }
  tbody > tr:nth-of-type(2n+1) {
    background-color: sandybrown;
  }
  tbody > tr:nth-of-type(2n) {
    background-color: chocolate;
  }
  </style>
</head>
<body>


</body>
</html>

Unutar <style> elementa su pomoću css selektora dodana oblikovanja:
boje pozadine (engl. background-color)
boje teksta (engl. color)
obruba (engl. border)
poravnanja teksta (engl. text-align)
odmaka (engl. padding)
položaja naslova tablice (engl. caption-side)
širine (engl. width)
pretvorbe malih u velika slova (engl. text-transform)
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.1.
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> i <tbody>
Unutar ćelija <th>, naslovnog dijela <thead> umetnite slike.
Ćelije oblikujte prema slici 5.1.
Primjer umetanja slike unutar ćelije naslova <th> elementa.

<th><img src="slike/chrome.png" alt="Chrome" />Chrome</th>

Tekst ćelija u prvom stupcu napišite malim slovima. Css oblikovanja u <style> elementu, pretvorit će mala slova u velika.
Slika 5.1
Spremite html dokumente u mapu Vjezba 5 pod imenom zadanim imenom.
Otvorite web stranicu u web pregledniku. Provjerite je li izgled web stranica istovjetan onom na slici 5.1.

Rješenje vježbe 5.1

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

Rješenje vježbe 5.1: HTML umetanje tablice

Vježba - HTML umetanje tablice

Vježba 5.1 - Cilj vježbe je naučiti načiniti tablicu koja sadrži html elemente zaglavlja i sadržaja unutar tablice.

Vježba 5.1

Rješenje vježbe 5.1

Naši pokrovitelji

Naša preporuka

Besplatne usluge: