Html tablice - raspored sati : HTML vježba 5.3 : Bartol plus

Vježba 5.3

Načinite mapu 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-raspored-sati.html.

tablica-raspored-sati.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tablica - raspored sati</title>
  <style>
    body {
      color: #34495E;
      background-color: ivory;
      text-align: center;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      text-align: center;
    }
    h1 {
        font-weight: 100;
    }
    table {
      width: 100%;
      border: 1px solid #90A4AE;
    }
    thead tr {
      background-color: #F4D03F;
    }
    tr {
      height: 50px; 
      line-height: 50px;
    }
  </style>
</head>
<body>
  <h1>Raspored sati</h1>

</body>
</html>

U postojeću datoteku umetnite tablicu i oblikujte je prema slici 5.3
Tablica treba imati slijedeće dijelove <colgroup>, <thead> i <tbody>.
Širinu (engl. width: 25%) i boju pozadine prvog stupca (engl. background-color: #F4D03F) postavite koristeći <col> element.
Širinu ostalih pet stupaca (engl. width: 15%) postavite koristeći samo jedan <col> element.
Ćelije koje zauzimaju više redaka povežite pomoću svojstva rowspan.
Za Matematiku možete koristiti kôd boje #D32F2F, za SJWP #2196F3, za Engleski #FFEB3B, za Hrvatski #7CB342, za Računalstvo #FF7043, za Mreže #BDBDBD i za Baze podataka #AB47BC.
Više o načinu dodjeljivanja boje teksta i pozadine, pročitajte u članku:
Css boja teksta i pozadine
Slika 5.3
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.3.

Rješenje vježbe 5.3

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

Rješenje vježbe 5.3: HTML tablice - raspored sati

Vježba - HTML tablice - raspored sati

Vježba 5.3 - Cilj vježbe je primjeniti napredno oblikovanje tablice koristeći povezivanje ćelija.

Vježba 5.3

Rješenje vježbe 5.3

Naši pokrovitelji

Naša preporuka

Besplatne usluge: