Zadane HTML tablice izgledaju prilično neuvjerljivo - uljepšajte ih nekim zgodnim CSS efektima.

Dodavanje tablice na vašu web stranicu koristan je način za jasno predstavljanje velike količine informacija. Tablice također omogućuju učinkovito korištenje prostora i omogućuju vam lakše čitanje i usporedbu složenih podataka.

Pomoću CSS-a možete dizajnirati tablice tako da budu vizualno privlačnije. Na taj način također možete poboljšati cjelokupno korisničko iskustvo vaše web stranice.

Moderan dizajn pojedinačnih redaka i stupaca

Možete dodati jednostavan dizajn tablice s pojedinačnim redcima i stupcima i bez spojenih ćelija. Oblikovanje tablice također osigurava da je vaša web stranica privlačna za korisnika. Osim stiliziranja stolova, postoje i drugi cool HTML efekti i CSS prikaz izgleda web stranice možete dodati na svoju web stranicu.

Kôd za ovu vježbu možete pogledati u GitHub repo.

  1. U novoj HTML datoteci dodajte osnovnu strukturu HTML koda:
    html>
    <html>
    <glava>
    <titula>Moj jednostavni stoltitula>
    glava>
    <tijelo>

    tijelo>
    html>
    2. instagram viewer
  2. Unutar tijela dodajte oznake tablice:
    <stol>

    stol>
  3. Element HTML tablice trebao bi sadržavati red tablice oznake za svaki red unutar tablice. Gornji red se obično koristi za naslove. Koristiti zaglavlje tablice HTML oznake za predstavljanje svakog stupca u tablici:
    <tr>
    <th>Zaglavlje 1th>
    <th>Zaglavlje 2th>
    <th>Zaglavlje 3th>
    tr>
  4. Dodajte više redaka ispod retka zaglavlja. Koristiti tablični podaci HTML oznake za dodavanje podataka u svaku ćeliju u tablici:
    <tr>
    <td>Redak 1, stupac 1td>
    <td>Redak 1, stupac 2td>
    <td>Redak 1, stupac 3td>
    tr>
    <tr>
    <td>Redak 2, stupac 1td>
    <td>Redak 2, stupac 2td>
    <td>Redak 2, stupac 3td>
    tr>
    <tr>
    <td>Redak 3, stupac 1td>
    <td>Redak 3, stupac 2td>
    <td>Redak 3, stupac 3td>
    tr>
    <tr>
    <td>Redak 4, stupac 1td>
    <td>Redak 4, stupac 2td>
    <td>Redak 4, stupac 3td>
    tr>
    <tr>
    <td>Redak 5, stupac 1td>
    <td>Redak 5, stupac 2td>
    <td>Redak 5, stupac 3td>
    tr>
  5. Dodajte oznaku stila unutar oznake glave. Dodajte neki opći stil tablici, kao što su sjene, zaobljeni kutovi tablice, fontovi i margine:
    <stil>
    stol {
    granica-kolaps: kolaps;
    širina: 100%;
    boja: #333;
    obitelj-fontova: Arial, sans-serif;
    veličina fonta: 14px;
    poravnanje teksta: lijevo;
    granični radijus: 10px;
    prelijevanje: skriven;
    kutija-sjena: 0 0 20pxrgba(0, 0, 0, 0.1);
    margina: auto;
    margin-top: 50px;
    margina-dno: 50px;
     } 
    stil>
  6. Stilizirajte zaglavlje tablice da biste dobili boju pozadine i poravnati tekst:
    stolth {
    boja pozadine: #ff9800;
    boja: #F F F;
    težina fonta: podebljano;
    podstava: 10px;
    tekstualna transformacija: velika slova;
    razmak između slova: 1px;
    granica-vrh: 1pxčvrsta#F F F;
    granica-dno: 1pxčvrsta#ccc;
    }
  7. Stilizirajte retke tablice tako da se izmjenjuju sive i bijele boje i da dodate efekt kada lebdite iznad retka:
    stoltr:nth-child (parni)td {
    boja pozadine: #f2f2f2;
    }
    stoltr:lebdjetitd {
    boja pozadine: #ffedcc;
    }
  8. Stilizirajte podatke unutar ćelija tablice:
    stoltd {
    boja pozadine: #F F F;
    podstava: 10px;
    granica-dno: 1pxčvrsta#ccc;
    težina fonta: podebljano;
    }
  9. Otvorite svoju HTML datoteku da vidite tablicu u web pregledniku:

Dizajn tablice s više linija

Neke tablice uključuju stupce sa spojenim recima koji tvore ćeliju s više linija.

  1. Uklonite sve trenutne retke tablice, zadržavajući samo gornji s naslovima:
    <stol>
    <tr>
    <th>Zaglavlje 1th>
    <th>Zaglavlje 2th>
    <th>Zaglavlje 3th>
    tr>
    stol>
  2. Stvorite ćeliju s više linija pomoću atributa rowspan. Ovo će proširiti tu ćeliju na određeni broj redaka.
     odjeljak 1 
    <tr>
    <tdraspon redova="2">Ćelija s više linijatd>
    <td>Redak 1, stupac 2td>
    <td>Redak 1, stupac 3td>
    tr>
    <tr>
    <td>Redak 2, stupac 2td>
    <td>Redak 2, stupac 3td>
    tr>
  3. Kada dodajete još jednu crtu s više stanica s drugom vrijednošću raspona reda, dodajte odgovarajući broj redovi tablice HTML oznake. Ovo je u skladu s visinom ili brojem redaka preko kojih se ćelija proteže. Na primjer, ako ćelija ima raspon redaka od 3, morat ćete dodati tri retka drugim stupcima kako biste pravilno poravnali tablicu.
     odjeljak 2 
    <tr>
    <tdraspon redova="3">Ćelija s više linijatd>
    <td>Redak 3, stupac 2td>
    <td>Redak 3, stupac 3td>
    tr>
    <tr>
    <td>Redak 4, stupac 2td>
    <td>Redak 4, stupac 3td>
    tr>
    <tr>
    <td>Redak 5, stupac 2td>
    <td>Redak 5, stupac 3td>
    tr>
  4. Otvorite svoju HTML datoteku da vidite tablicu u web pregledniku:

Dizajn tablice spojenog retka

Slično ćelijama s više linija, tablice također mogu imati retke koji se spajaju preko više stupaca.

  1. Uklonite sve trenutne retke tablice, zadržavajući samo gornji s naslovima:
    <stol>
    <tr>
    <th>Zaglavlje 1th>
    <th>Zaglavlje 2th>
    <th>Zaglavlje 3th>
    tr>
    stol>
  2. Dodajte više redaka u tablicu. Upotrijebite atribut colspan za spajanje jednog od redaka u 3 stupca:
     odjeljak 1 
    <tr>
    <tdstil="boja-pozadine: #ffedcc"colspan="3">P1td>
    tr>
    <tr>
    <td>Redak 2, stupac 1td>
    <td>Redak 2, stupac 2td>
    <td>Redak 2, stupac 3td>
    tr>
    <tr>
    <td>Redak 3, stupac 1td>
    <td>Redak 3, stupac 2td>
    <td>Redak 3, stupac 3td>
    tr>
    <tr>
    <td>Redak 4, stupac 1td>
    <td>Redak 4, stupac 2td>
    <td>Redak 4, stupac 3td>
    tr>
  3. Dodajte još jedan spojeni redak za odvajanje odjeljaka tablice:
     odjeljak 2 
    <tr>
    <tdstil="boja-pozadine: #ffedcc"colspan="3">Q2td>
    tr>
    <tr>
    <td>Redak 6, stupac 1td>
    <td>Redak 6, stupac 2td>
    <td>Redak 6, stupac 3td>
    tr>
    <tr>
    <td>Redak 7, stupac 1td>
    <td>Redak 7, stupac 2td>
    <td>Redak 7, stupac 3td>
    tr>
    <tr>
    <td>Redak 8, stupac 1td>
    <td>Redak 8, stupac 2td>
    <td>Redak 8, stupac 3td>
    tr>
  4. Otvorite svoju HTML datoteku da vidite tablicu u web pregledniku:

Koristite atraktivne tablice kako biste najbolje iskoristili svoje podatke

HTML tablice izvrstan su način prikazivanja strukturiranih podataka na vašoj web stranici. Možete ih stilizirati pomoću CSS-a kako biste poboljšali zadani izgled. Međutim, pobrinite se da se ne zanesete i koristite tablice za izgled - zbog pristupačnosti, čuvajte ih isključivo za podatke.

Stvaranje i ažuriranje većih tablica može biti naporno, osobito ako koristite stupce i retke koji se protežu. Možete napisati vlastiti kod za generiranje oznaka ili iskoristiti pogodnije sintakse kao što je Markdown.