Kako stvoriti tablicu samo pomoću oznake i CSS-a

” unutar njega.

---

---

Primjer
Razmotrite sljedeći primjer HTML koda za izradu tablice:

< div razreda = 'divTable' >
< div razreda = 'headerRow' >
< div razreda = 'divCell' >< b > iskaznica < / b >< / div >
< div razreda = 'divCell' >< b > Ime < / b >< / div >
< div razreda = 'divCell' >< b > Dob < / b >< / div >
< / div >
< div razreda = 'divRow' >
< div razreda = 'divCell' > 001 < / div >
< div razreda = 'divCell' > Smith < / div >
< div razreda = 'divCell' > 25 < / div >
< / div >
< div razreda = 'divRow' >
< div razreda = 'divCell' > 002 < / div >
< div razreda = 'divCell' > Ivan < / div >
< div razreda = 'divCell' > 31 < / div >
< / div >
< div razreda = 'divRow' >
< div razreda = 'divCell' > 003 < / div >
< div razreda = 'divCell' > Charles < / div >
< div razreda = 'divCell' > 28 < / div >
< / div >
< / div >

U gornjem isječku koda:

• A “
  ” dodaje se s klasom pod nazivom “ divTable ”.
• Unutar ' div ' element spremnika, dodajte još jedan ' div ' element spremnika s klasom deklariranom kao ' redak zaglavlja ”.
• Opet dodajte tri ' div ” elementi koji imaju klase pod nazivom “ divRow ' s tri podspremnika s ' divCell ” razred.
• Zatim dodajte tri div elementa i dodajte ' iskaznica ”, “ Ime ' i ' Dob ” u retku zaglavlja tablice.
• Nakon toga odredite vrijednosti za 'ID', 'Ime' i 'Dob' za svaki div element.

Ovo je bilo sve o tome kako koristiti ' div ” za izradu tablice. Sada primijenimo CSS svojstva na njega:

---

---

.divTable
{
prikaz: stol;
širina :auto;
pozadina- boja :#eee;
granica :1px solid # 666666 ;
border-spacing:5px;
}
.divRow
{
širina :auto;
display:table-red;
}
.divCell
{
širina :150px;
float:lijevo;
prikaz:tablica-stupac;
pozadina- boja : rgb ( 212 , 209 , 209 ) ;
}

U gornjem elementu CSS stila:

• Dodajte selektor koji se odnosi na ' divTable ' (koja sadrži sve vrijednosti tablice) i definirajte željena CSS svojstva (tj. ' prikaz ”, “ širina ”, “ boja pozadine ”, “ granica ' i ' granični razmak ”) za sadržaj tablice.
• Nakon toga dodajte selektor klase koji odabire elemente ' divRow ' klasa za dodavanje CSS-a ' širina ' i ' prikaz ” svojstva elemenata.
• Na kraju, dodajte svojstva CSS stila elementima u ' .divCell ” selektor razreda.

Ovo će stvoriti tablicu u izlazu i prikazati sljedeće rezultate:

To je bilo sve o stvaranju tablice u HTML-u koristeći samo