Privzete tabele HTML izgledajo precej osupljivo – popestrite jih z nekaj lepimi učinki CSS.

Dodajanje tabele na vaše spletno mesto je uporaben način za jasno predstavitev velike količine informacij. Tabele zagotavljajo tudi učinkovito uporabo prostora ter vam omogočajo lažje branje in primerjavo kompleksnih podatkov.

Z uporabo CSS lahko oblikujete tabele tako, da bodo vizualno privlačnejše. S tem lahko izboljšate tudi splošno uporabniško izkušnjo vašega spletnega mesta.

Moderno oblikovanje enojnih vrstic in stolpcev

Dodate lahko preprosto zasnovo tabele z enojnimi vrsticami in stolpci ter brez spojenih celic. Oblikovanje tabele prav tako zagotavlja, da je vaša spletna stran privlačna za uporabnika. Poleg oblikovanja miz obstajajo še drugi odlični učinki HTML in CSS prikaz postavitve spletne strani lahko dodate na svojo spletno stran.

Kodo za to vajo si lahko ogledate v GitHub repo.

  1. V novo datoteko HTML dodajte osnovno strukturo kode HTML:
    html>
    <html>
    <glavo>
    <naslov>Moja preprosta mizanaslov>
    glavo>
    <telo>

    telo>
    html>
    2. instagram viewer
  2. Znotraj telesa dodajte oznake tabele:
    <tabela>

    tabela>
  3. Element tabele HTML mora vsebovati vrstica tabele oznake za vsako vrstico v tabeli. Zgornja vrstica se običajno uporablja za naslove. Uporaba glava tabele Oznake HTML za predstavitev vsakega stolpca v tabeli:
    <tr>
    <th>Glava 1th>
    <th>Glava 2th>
    <th>Glava 3th>
    tr>
  4. Dodajte več vrstic pod naslovno vrstico. Uporaba podatki tabele Oznake HTML za dodajanje podatkov v vsako celico v tabeli:
    <tr>
    <td>1. vrstica, 1. stolpectd>
    <td>1. vrstica, 2. stolpectd>
    <td>1. vrstica, 3. stolpectd>
    tr>
    <tr>
    <td>2. vrstica, 1. stolpectd>
    <td>2. vrstica, 2. stolpectd>
    <td>2. vrstica, 3. stolpectd>
    tr>
    <tr>
    <td>3. vrstica, 1. stolpectd>
    <td>3. vrstica, 2. stolpectd>
    <td>3. vrstica, 3. stolpectd>
    tr>
    <tr>
    <td>4. vrstica, 1. stolpectd>
    <td>4. vrstica, 2. stolpectd>
    <td>4. vrstica, 3. stolpectd>
    tr>
    <tr>
    <td>5. vrstica, 1. stolpectd>
    <td>5. vrstica, 2. stolpectd>
    <td>5. vrstica, 3. stolpectd>
    tr>
  5. Dodajte oznako sloga znotraj oznake glave. Tabeli dodajte nekaj splošnega stila, kot so sence, zaobljeni vogali mize, pisave in robovi:
    <stil>
    tabela {
    zrušitev meje: kolaps;
    premer: 100%;
    barva: #333;
    družina pisav: Arial, sans-serif;
    velikost pisave: 14px;
    poravnava besedila: levo;
    mejni polmer: 10px;
    preliv: skrit;
    box-shadow: 0 0 20pxrgba(0, 0, 0, 0.1);
    marža: avto;
    margin-top: 50px;
    margin-bottom: 50px;
     } 
    stil>
  6. Oblikujte glavo tabele, da ji date barvo ozadja in poravnano besedilo:
    tabelath {
    Barva ozadja: #ff9800;
    barva: #fff;
    teža pisave: krepko;
    oblazinjenje: 10px;
    preoblikovanje besedila: velike črke;
    razmik med črkami: 1px;
    meja-vrh: 1pxtrdna#fff;
    obroba-spodnja: 1pxtrdna#ccc;
    }
  7. Oblikujte vrstice tabele tako, da se spreminjajo med sivo in belo barvo ter da dodate učinek, ko miškin kazalec premaknete nad vrstico:
    tabelatr:nth-child (sodi)td {
    Barva ozadja: #f2f2f2;
    }
    tabelatr:lebditd {
    Barva ozadja: #ffedcc;
    }
  8. Oblikujte podatke v celicah tabele:
    tabelatd {
    Barva ozadja: #fff;
    oblazinjenje: 10px;
    obroba-spodnja: 1pxtrdna#ccc;
    teža pisave: krepko;
    }
  9. Odprite svojo datoteko HTML za ogled tabele v spletnem brskalniku:

Oblikovanje mize z več črtami

Nekatere tabele vključujejo stolpce z združenimi vrsticami, ki tvorijo celico z več črtami.

  1. Odstranite vse trenutne vrstice tabele in obdržite samo zgornjo z naslovi:
    <tabela>
    <tr>
    <th>Glava 1th>
    <th>Glava 2th>
    <th>Glava 3th>
    tr>
    tabela>
  2. Ustvarite večvrstično celico z uporabo atributa rowspan. To bo to celico razširilo na določeno število vrstic.
     Oddelek 1 
    <tr>
    <tdrazpon vrstic="2">Celica z več vrsticamitd>
    <td>1. vrstica, 2. stolpectd>
    <td>1. vrstica, 3. stolpectd>
    tr>
    <tr>
    <td>2. vrstica, 2. stolpectd>
    <td>2. vrstica, 3. stolpectd>
    tr>
  3. Ko dodajate drugo večcelično črto z drugačno vrednostjo razpona vrstic, dodajte ustrezno število vrstice tabele oznake HTML. To se ujema z višino ali številom vrstic, čez katere se razteza celica. Na primer, če ima celica razpon vrstic 3, boste morali drugim stolpcem dodati tri vrstice, da pravilno poravnate tabelo.
     Oddelek 2 
    <tr>
    <tdrazpon vrstic="3">Celica z več vrsticamitd>
    <td>3. vrstica, 2. stolpectd>
    <td>3. vrstica, 3. stolpectd>
    tr>
    <tr>
    <td>4. vrstica, 2. stolpectd>
    <td>4. vrstica, 3. stolpectd>
    tr>
    <tr>
    <td>5. vrstica, 2. stolpectd>
    <td>5. vrstica, 3. stolpectd>
    tr>
  4. Odprite svojo datoteko HTML za ogled tabele v spletnem brskalniku:

Oblikovanje tabele združenih vrstic

Podobno kot celice z več vrsticami imajo lahko tudi tabele vrstice, ki se združijo v več stolpcev.

  1. Odstranite vse trenutne vrstice tabele in obdržite samo zgornjo z naslovi:
    <tabela>
    <tr>
    <th>Glava 1th>
    <th>Glava 2th>
    <th>Glava 3th>
    tr>
    tabela>
  2. V tabelo dodajte več vrstic tabele. Z atributom colspan združite eno od vrstic v 3 stolpce:
     Oddelek 1 
    <tr>
    <tdstil="barva-ozadje: #ffedcc"colspan="3">Q1td>
    tr>
    <tr>
    <td>2. vrstica, 1. stolpectd>
    <td>2. vrstica, 2. stolpectd>
    <td>2. vrstica, 3. stolpectd>
    tr>
    <tr>
    <td>3. vrstica, 1. stolpectd>
    <td>3. vrstica, 2. stolpectd>
    <td>3. vrstica, 3. stolpectd>
    tr>
    <tr>
    <td>4. vrstica, 1. stolpectd>
    <td>4. vrstica, 2. stolpectd>
    <td>4. vrstica, 3. stolpectd>
    tr>
  3. Dodajte še eno združeno vrstico, da ločite odseke tabele:
     Oddelek 2 
    <tr>
    <tdstil="barva-ozadje: #ffedcc"colspan="3">Q2td>
    tr>
    <tr>
    <td>6. vrstica, 1. stolpectd>
    <td>6. vrstica, 2. stolpectd>
    <td>Vrstica 6, stolpec 3td>
    tr>
    <tr>
    <td>7. vrstica, 1. stolpectd>
    <td>7. vrstica, 2. stolpectd>
    <td>7. vrstica, 3. stolpectd>
    tr>
    <tr>
    <td>8. vrstica, 1. stolpectd>
    <td>8. vrstica, 2. stolpectd>
    <td>8. vrstica, 3. stolpectd>
    tr>
  4. Odprite svojo datoteko HTML za ogled tabele v spletnem brskalniku:

Uporabite privlačne tabele, da kar najbolje izkoristite svoje podatke

Tabele HTML so odličen način za prikaz strukturiranih podatkov na vašem spletnem mestu. Oblikujete jih lahko s CSS, da izboljšate privzeti videz. Vendar poskrbite, da vas ne bo zaneslo in za postavitev uporabite tabele – zaradi dostopnosti jih hranite izključno za podatke.

Ustvarjanje in posodabljanje večjih tabel je lahko težavno, zlasti če uporabljate stolpce in vrstice, ki se raztezajo. Lahko napišete svojo lastno kodo za ustvarjanje oznake ali pa izkoristite prijaznejše sintakse, kot je Markdown.