Predvolené tabuľky HTML vyzerajú dosť ohromujúco – oživte ich pomocou dobre vyzerajúcich efektov CSS.

Pridanie tabuľky na váš web je užitočný spôsob, ako prehľadne prezentovať veľké množstvo informácií. Tabuľky tiež poskytujú efektívne využitie priestoru a umožňujú vám jednoduchšie čítať a porovnávať zložité údaje.

Pomocou CSS môžete navrhnúť tabuľky tak, aby boli vizuálne príťažlivejšie. Môže to tiež zlepšiť celkový dojem používateľa z vašej webovej lokality.

Moderný dizajn jednotlivých riadkov a stĺpcov

Môžete pridať jednoduchý dizajn tabuľky s jednotlivými riadkami a stĺpcami a bez zlúčených buniek. Úprava štýlu tabuľky tiež zaisťuje, že vaša webová stránka bude pre používateľa pútavá. Okrem štýlu stola existujú aj iné skvelé HTML efekty a CSS rozloženie webových stránok môžete pridať na svoj web.

Kód tohto cvičenia si môžete pozrieť v ňom Úložisko GitHub.

  1. Do nového súboru HTML pridajte základnú štruktúru kódu HTML:
    html>
    <html>
    <hlavu>
    <titul>Môj jednoduchý stôltitul>
    hlavu>
    <telo>

    telo>
    html>
    2. instagram viewer
  2. Vnútri tela pridajte značky tabuľky:
    <tabuľky>

    tabuľky>
  3. Prvok tabuľky HTML by mal obsahovať riadok tabuľky značky pre každý riadok v tabuľke. Horný riadok sa bežne používa pre nadpisy. Použite hlavička tabuľky HTML tagy reprezentujúce každý stĺpec v tabuľke:
    <tr>
    <th>Hlavička 1th>
    <th>Hlavička 2th>
    <th>Hlavička 3th>
    tr>
  4. Pridajte ďalšie riadky pod riadok hlavičky. Použite tabuľkové údaje Značky HTML na pridanie údajov do každej bunky v tabuľke:
    <tr>
    <td>1. riadok, 1. stĺpectd>
    <td>1. riadok, 2. stĺpectd>
    <td>1. riadok, 3. stĺpectd>
    tr>
    <tr>
    <td>2. riadok, 1. stĺpectd>
    <td>2. riadok, 2. stĺpectd>
    <td>2. riadok, 3. stĺpectd>
    tr>
    <tr>
    <td>3. riadok, 1. stĺpectd>
    <td>3. riadok, 2. stĺpectd>
    <td>3. riadok, 3. stĺpectd>
    tr>
    <tr>
    <td>4. riadok, 1. stĺpectd>
    <td>4. riadok, 2. stĺpectd>
    <td>4. riadok, 3. stĺpectd>
    tr>
    <tr>
    <td>5. riadok, 1. stĺpectd>
    <td>5. riadok, 2. stĺpectd>
    <td>5. riadok, 3. stĺpectd>
    tr>
  5. Pridajte značku štýlu do značky hlavy. Pridajte do tabuľky nejaký všeobecný štýl, ako sú tiene, zaoblené rohy tabuľky, písma a okraje:
    <štýl>
    tabuľky {
    border-collapse: kolaps;
    šírka: 100%;
    farba: #333;
    font-family: Arial, sans-serif;
    veľkosť písma: 14px;
    zarovnanie textu: vľavo;
    hraničný polomer: 10px;
    pretečeniu: skryté;
    box-shadow: 0 0 20pxrgba(0, 0, 0, 0.1);
    marža: auto;
    margin-top: 50px;
    okraj-dole: 50px;
     } 
    štýl>
  6. Upravte štýl hlavičky tabuľky tak, aby mala farbu pozadia a zarovnaný text:
    tabuľkyth {
    farba pozadia: #ff9800;
    farba: #fff;
    font-weight: tučný;
    vypchávka: 10px;
    textová transformácia: veľké písmená;
    medzi písmenami: 1px;
    border-top: 1pxpevný#fff;
    okraj-dole: 1pxpevný#ccc;
    }
  7. Upravte štýl riadkov tabuľky, aby ste mohli striedať sivú a bielu farbu a pridať efekt pri umiestnení kurzora myši nad riadok:
    tabuľkytr:n-té dieťa (párne)td {
    farba pozadia: #f2f2f2;
    }
    tabuľkytr:vznášať satd {
    farba pozadia: #ffedcc;
    }
  8. Štýl údajov v bunkách tabuľky:
    tabuľkytd {
    farba pozadia: #fff;
    vypchávka: 10px;
    okraj-dole: 1pxpevný#ccc;
    font-weight: tučný;
    }
  9. Ak chcete tabuľku zobraziť vo webovom prehliadači, otvorte súbor HTML:

Dizajn stola s viacerými líniami

Niektoré tabuľky obsahujú stĺpce so zlúčenými riadkami, aby vytvorili viacriadkovú bunku.

  1. Odstráňte všetky aktuálne riadky tabuľky a ponechajte iba horný riadok s nadpismi:
    <tabuľky>
    <tr>
    <th>Hlavička 1th>
    <th>Hlavička 2th>
    <th>Hlavička 3th>
    tr>
    tabuľky>
  2. Vytvorte viacriadkovú bunku pomocou atribútu rowspan. Tým sa bunka rozšíri o zadaný počet riadkov.
     Sekcia 1 
    <tr>
    <tdrozpätie riadkov="2">Viacriadková bunkatd>
    <td>1. riadok, 2. stĺpectd>
    <td>1. riadok, 3. stĺpectd>
    tr>
    <tr>
    <td>2. riadok, 2. stĺpectd>
    <td>2. riadok, 3. stĺpectd>
    tr>
  3. Pri pridávaní ďalšieho viacbunkového riadku s inou hodnotou rozpätia riadkov pridajte zodpovedajúci počet riadky tabuľky HTML tagy. Toto má zodpovedať výške alebo počtu riadkov, cez ktoré sa bunka rozprestiera. Napríklad, ak má bunka rozsah riadkov 3, budete musieť pridať tri riadky do ostatných stĺpcov, aby sa tabuľka správne zarovnala.
     Sekcia 2 
    <tr>
    <tdrozpätie riadkov="3">Viacriadková bunkatd>
    <td>3. riadok, 2. stĺpectd>
    <td>3. riadok, 3. stĺpectd>
    tr>
    <tr>
    <td>4. riadok, 2. stĺpectd>
    <td>4. riadok, 3. stĺpectd>
    tr>
    <tr>
    <td>5. riadok, 2. stĺpectd>
    <td>5. riadok, 3. stĺpectd>
    tr>
  4. Ak chcete tabuľku zobraziť vo webovom prehliadači, otvorte súbor HTML:

Návrh zlúčeného riadkového stola

Podobne ako bunky s viacerými riadkami, aj tabuľky môžu mať riadky, ktoré sa spájajú do viacerých stĺpcov.

  1. Odstráňte všetky aktuálne riadky tabuľky a ponechajte iba horný riadok s nadpismi:
    <tabuľky>
    <tr>
    <th>Hlavička 1th>
    <th>Hlavička 2th>
    <th>Hlavička 3th>
    tr>
    tabuľky>
  2. Pridajte do tabuľky ďalšie riadky tabuľky. Pomocou atribútu colspan zlúčte jeden z riadkov v troch stĺpcoch:
     Sekcia 1 
    <tr>
    <tdštýl="farba pozadia: #ffedcc"colspan="3">Q1td>
    tr>
    <tr>
    <td>2. riadok, 1. stĺpectd>
    <td>2. riadok, 2. stĺpectd>
    <td>2. riadok, 3. stĺpectd>
    tr>
    <tr>
    <td>3. riadok, 1. stĺpectd>
    <td>3. riadok, 2. stĺpectd>
    <td>3. riadok, 3. stĺpectd>
    tr>
    <tr>
    <td>4. riadok, 1. stĺpectd>
    <td>4. riadok, 2. stĺpectd>
    <td>4. riadok, 3. stĺpectd>
    tr>
  3. Pridajte ďalší zlúčený riadok na oddelenie sekcií tabuľky:
     Sekcia 2 
    <tr>
    <tdštýl="farba pozadia: #ffedcc"colspan="3">Q2td>
    tr>
    <tr>
    <td>6. riadok, 1. stĺpectd>
    <td>6. riadok, 2. stĺpectd>
    <td>6. riadok, 3. stĺpectd>
    tr>
    <tr>
    <td>Riadok 7, stĺpec 1td>
    <td>Riadok 7, stĺpec 2td>
    <td>Riadok 7, stĺpec 3td>
    tr>
    <tr>
    <td>Riadok 8, stĺpec 1td>
    <td>Riadok 8, stĺpec 2td>
    <td>Riadok 8, stĺpec 3td>
    tr>
  4. Ak chcete tabuľku zobraziť vo webovom prehliadači, otvorte súbor HTML:

Pomocou atraktívnych tabuliek vyťažte zo svojich údajov maximum

HTML tabuľky sú skvelým spôsobom zobrazenia štruktúrovaných údajov na vašej webovej stránke. Môžete ich upraviť pomocou CSS, aby ste zlepšili predvolený vzhľad. Nenechajte sa však uniesť a použite tabuľky na rozloženie – z dôvodov dostupnosti ich ponechajte striktne pre údaje.

Väčšie tabuľky môžu byť pracné na vytváranie a aktualizáciu, najmä ak používate stĺpce a riadky, ktoré sa rozprestierajú. Môžete napísať svoj vlastný kód na generovanie značiek alebo využiť prívetivejšie syntaxe, ako je Markdown.