HTML tablice – HTML Tables
Tablice se koriste za prikazivanje podataka u stupcima.
Tablice se više ne koriste za izradu strukture web stranice jer je tu zadaću preuzeo css.
HTML tablica je upisana između početne i završne oznake <table> elementa. Tablica može imati željeni broj redaka a svaki redak upisujemo između početne i završne oznake <tr> elementa.
Svaki redak ima jednaki broj ćelija koje omeđujemo oznakom elementa <td>…</td>.
HTML tablice – osnovni elementi
Označavanje početka i kraja tablice: <table> … </table>
Početak i kraj dijela gdje se nalazi zaglavlje stupaca: <thead> … </thead>
Početak i kraj zaglavlja kolone: <th> … </th>
Početak i kraj tdela stranice unutar kojeg se nalazi podaci: <tbody> … </tbody>
Početak i kraj retka tablice: <tr> … </tr>
Početak i kraj polja s podacima: <td> … </td>
Primer tablice u HTML-u:
<table>
<thead>
<tr>
<th>Naziv 1 </th>
<th>Naziv 2 </th>
</tr>
</thead>
<tbody>
<tr>
<td>Ćelija 1 u 1. redu </td>
<td>Ćelija 2 u 1. redu </td>
</tr>
<tr>
<td>Ćelija 3 u 2. redu </td>
<td>Ćelija 4 u 2. redu </td>
</tr>
</tbody>
</table>
Naziv 1 | Naziv 2 |
---|---|
Ćelija 1 u 1. redu | Ćelija 2 u 1. redu |
Ćelija 3 u 2. redu | Ćelija 4 u 2. redu |
Svojstvo border elementa <table>
Želimo li prikazati rubove tablice koristimo svojstvo border i dodjeljujemo mu vrijednost debljine crte ruba tablice. Ako svojstvo border nije definirano rubovi tablice ne će biti prikazani.
Svojstvo širine tablice : width Attribute
Zadano tablica zauzima prostor koji je dostatan kako bi bio prikazan sadržaj svih stupaca tablice.
U slučaju da je širina sadržaja manja od roditeljskog elementa i želimo je povećati moramo koristiti svojstvo width.
Roditeljski element je element u kojem je definirana tablica, najčešće je to <body> element koji zauzima cijeli prozor web preglednika).
Svojstvo width može biti izraženo kao apsolutna vrijednost u pikselima ili kao relativna vrijednost u postotcima u odnosu na roditeljski element.
Svojstvo rowspan tablice : rowspan Attribute
Kada želimo protegnuti stupac kroz više redaka koristimo svojstvo rowspan <td> elementa. Dodjeljujemo mu vrijednost u kojoj određujemo broj redaka kroz koja se proteže stupac.
Primjer stupca koji se proteže kroz 3 retka:
<table border="10">
<tr>
<td rowspan="3" width="160">Prva kolona</td>
<td width="160">Prvi red</td>
</tr>
<tr>
<td>Drugi red</td>
</tr>
<tr>
<td>Treći red</td>
</tr>
</table>
Prva kolona | Prvi red |
Drugi red | |
Treći red |
<table border="1">
<tr>
<td rowspan="3" width="160">Prva kolona</td>
<td width="160">Prvi red</td>
</tr>
<tr>
<td>Drugi red</td> </tr> <tr> <td>Treći red</td>
</tr>
</table>
Prva kolona | Prvi red |
Drugi red | |
Treći red |
Tekst elementi
Primer teksta je prikazan ispod, to je običan tekst element koji se nalazi na početku i kraju teksta na sajtu.
<p>Tekst odlomka</p>
Ako želimo da napravimo razmak odnosno prelazak u nov red koristimo:
<br />
Naslovi i podnaslovi html elementi
<h1>Naslov stranice</h1> <h2>Pod naslov</h2> <h3>Pod naslov</h3> <h4>Pod naslov</h4> <h5>Pod naslov</h5> <h6>Pod naslov</h6> <p>Običan tekst</p>
Naslov ima svoj prostor oko sebe i to u praksi izgleda ovako:
Naslov stranice
Pod naslov
Pod naslov
Pod naslov
Pod naslov
Pod naslov
Običan tekst
Slika html element
<img src="ovde kopiramo URL link slike" />
Evo konkretnog primera:<img src="https://www.marketingsrbija.rs/wp-content/uploads/2019/03/WEBSAJT-BANER-min-594x405.png" />
Evo kako taj primer iznad izgleda u praksi:
Link html element
Ako želimo da linkujemo neki tekst to radimo uz narednu ispod, između navodnika kopiramo link a između elementa <a..> unosimo teks koji će pretvoriti u link <..a>
<a href="https://www.marketingsrbija.rs">Tekst linka</a>
U praksi to izgleda ovako:
Tekst linkaSada možemo spojiti element sliku + link i linkovati sliku, da kada neko klikne na nju ode na određenu stranicu.
<a href="https://www.marketingsrbija.rs"><img src="https://www.marketingsrbija.rs/wp-content/uploads/2019/03/WEBSAJT-BANER-min-594x405.png" />
</a>
Evo kako kod izgleda u praksi, za razliku od primera ranije ovaj baner nas vodi na link koji smo dodali.
Dugme html element
Evo kako primer izgleda u praksi, CSS kod izgleda dugmeta je preuzeo po default-u dizajn teme, te kada koristite različite teme dugme će pratiti taj dizajn.
<button>dugme klik</button>
Ako želimo da dugme bude klikatibilno i da vodi na neki link, dodamo da izmedju dela gde bi se nalazio “tekst linka” iz primera ranije.
<a href="https://www.marketingsrbija.rs"><button>dugme klik</button></a>
U praksi izgleda ovako i sada nas klik na dugme vodi na link