Jak upravit styl tabulky pomocí CSS pro maximální dopad a získat pozornost

autor:
Tweet
Share
Share
Pin

Při práci s HTML (Hypertext Markup Language) a dalšími značkovacími jazyky, jako je XML, se setkáte s mnoha atributy a značkami. Tabulky jsou atributy, které byste měli vždy používat, abyste uživatelům usnadnili skenování, porovnávání a analýzu velkého množství dat.

Pomocí tabulek mohou uživatelé na první pohled vidět klíčové body, závěry nebo výsledky, a to i bez přečtení celého článku. Ke stylování a změně vzhledu tabulek můžete použít CSS.

Toto jsou některé z důvodů, proč možná budete muset upravit styl tabulky ve své aplikaci;

  • Vylepšete vizuální vzhled: Běžné stoly mohou být nudné a jednoduché. Styling takových stolů zlepší jejich vzhled a učiní je atraktivní pro uživatele.
  • Zlepšení přístupnosti: Stylingové tabulky je mohou zpřístupnit i osobám se zdravotním postižením.
  • Zlepšení čitelnosti: Můžete použít různé techniky stylingu, které uživatelům usnadní procházení dat prezentovaných ve vašich tabulkách.
  • Branding: Identitu své značky můžete posílit, když na své tabulky v celé aplikaci použijete konzistentní písma a barvy.
  • Dobré pro vyhledávače: Uspořádání dat do tabulkových formátů bude užitečné, pokud chcete svůj web umístit vysoko ve vyhledávačích.

Vytvořte základní tabulku pomocí HTML

Abychom předvedli, jak tabulka funguje v HTML, vytvoříme složku projektu, přejdeme do složky a vytvoříme dva soubory; index.html, který ponese náš HTML kód, a styles.css, který nese náš CSS kód (styling).

Pokud chcete pokračovat, začněte pomocí těchto příkazů;

mkdir Styling-HTML-Tabulky

cd Styling-HTML-Tabulky

dotkněte se Styling-HTML-Tabulky

Nyní máte základní složku projektu, která vám pomůže vytvářet tabulky HTML. Chci představit různé programovací jazyky, jejich případy použití a příklady společností, které tyto jazyky používají.

Chcete-li vytvořit tabulku HTML, všechna data by měla být uzavřena v tagu

…

.

V souboru HTML vygenerujte základní strukturu dokumentu HTML. Přidejte tento kód do značky . 

<table>

        <tr>

          <th>Language</th>

          <th>Common Uses</th>

          <th>Companies Using</th>

        </tr>

        <tr>

          <td>Java</td>

          <td>Web apps, Android apps, enterprise applications</td>

          <td>Google, Amazon, LinkedIn</td>

        </tr>

        <tr>

          <td>Python</td>

          <td>Data science, web dev, automation</td>

          <td>Google, Dropbox,Spotify</td>

        </tr>

        <tr>

          <td>JavaScript</td>

          <td>Web dev, front-end dev, browser scripting</td>

          <td>PayPal, Facebook, Netflix</td>

        </tr>

        <tr>

          <td>C++</td>

          <td>Game dev, systems programming, embedded systems</td>

          <td>Tesla, Microsoft, Adobe</td>

        </tr>

        <tr>

          <td>Swift</td>

          <td>iOS development, macOS development</td>

          <td>Apple</td>

        </tr>

        <tr>

          <td>PHP</td>

          <td>Web dev, server-side scripting, CMSs</td>

          <td>WordPress, Wikipedia, Yahoo</td>

        </tr>

      </table>

Pokud se na tuto tabulku podíváte zblízka, všimnete si několika dalších tagů uzavřených v tagu

  7 nejlepších nástrojů prediktivní analýzy pro rozhodování na základě dat
;

,

, řádek tabulky, je uzavřen v prvku

a

.

Tyto značky dělají následující;

. Tag

může uzavírat jeden nebo více prvků

. Ve výchozím nastavení je jeho obsah tučně.
    • a

    		.
    		• , záhlaví tabulky, je obsaženo ve značce

    , data tabulky, popisuje obsah dat v buňkách tabulky.

    Když vykreslíte kód, který jsme napsali výše, budeme to mít v našem prohlížeči;

    Vlastnosti CSS používané pro tabulky stylů

    Tabulka, kterou jsme vytvořili výše, je plně funkční. Ponechává však mnoho požadavků, protože není dobře stylizovaný. Abychom dosáhli požadovaných stylů a aby byla tabulka vizuálně přitažlivá, použijeme CSS.

    Pamatujete si soubor CSS, který jsme vytvořili? Nyní je čas toho využít. Aby však styl fungoval, musíte nejprve importovat soubor CSS do souboru HTML. Náš soubor CSS jsme pojmenovali styles.css. Do části dokumentu HTML přidejte následující;

    Nyní jsme připraveni upravit náš stůl. Můžeme to stylizovat následovně;

    #1. okraj

    Můžeme přidat ohraničení kolem buněk v naší tabulce. Abychom toho dosáhli, definujeme vlastnost border u prvků

    		a

    		. Ohraničení můžeme nastavit na 2px. 

    th, td {

    border: 2px solid orange;

  }

    Nastavili jsme hodnotu okraje na 2 a přidali oranžovou jako naši barvu.

    Když vykreslíte novou stránku, uvidíte následující;

    #2. Zhroucení hranic

    Pokud se podíváte na snímek obrazovky výše, všimnete si, že mezi okraji každé buňky jsou mezery. Vlastnost border-collapse určuje, zda mají sousední buňky v tabulce sdílet ohraničení.

    Pokud chcete, aby buňky sdílely ohraničení, přidejte tento kód do svého souboru CSS;

    table {

  border-collapse: collapse;

}

    Při vykreslování stránky můžete vidět, že buňky sdílejí ohraničení následovně;

    Pokud chcete, aby buňky měly různé okraje, přidejte to do svého souboru CSS;

    table {

  border-collapse: separate;

}

    Vykreslená stránka se zobrazí následovně;

    #3. Ohraničení

    Pomocí vlastnosti border-space můžeme mezi buňkami v naší tabulce vytvořit malou mezeru. Pravidlo jsme nastavili uvnitř třídy tabulky v našem souboru CSS.

    Aby tato vlastnost fungovala, musíme použít border-collapse: separátní; vlastnictví.

    Třídu tabulky můžeme mít následovně;

    table {

    border-collapse: separate;

    border-spacing: 3px;

  }

    Ohraničení buněk má mezeru 3px.

    Když vykreslíte tabulku, bude vypadat následovně;

    #4. Rozložení tabulky

    Vlastnost Table-layout určuje povahu tabulky. Můžete mít stoly, které mají vždy stejnou délku. Na druhou stranu můžete také vytvářet tabulky, které se mění podle obsahu.

    Pokud chceme mít buňky, které mají podobnou velikost, můžeme nastavit vlastnost table-layout jako pevnou.

    rozvržení stolu: pevné;

    Náš konečný kód na třídě stolu bude; 

    table {

    border-collapse: collapse;

    border-spacing: 3px;

    table-layout: fixed;

  }

    Pokud chceme buňky, které se mění na základě obsahu, můžeme změnit vlastnost table-layout na auto.

    rozvržení stolu: auto;

    Poslední třída tabulky v našem kódu CSS bude;

    Zkontrolujte poslední buňku na stole a poznamenejte si, že jsem přidal tato slova; MailChimp a mnoho dalšího.

    Nyní můžete vidět, že buňky v posledním řádku jsou větší než ostatní, protože rozložení tabulky je flexibilní podle obsahu.

    Styling, kterým jsme se doposud zabývali, se zaměřil na celý stůl. Nyní se můžeme zaměřit na jednotlivé třídy změnou barvy pozadí, fontu a vlastností zarovnání textu pro řádky, buňky nebo záhlaví.

    Tyto vlastnosti můžeme stylizovat následovně;

    #5. Barva pozadí

    Můžeme změnit pozadí naší horní řady na žlutozelené. K dosažení našich cílů můžeme použít selektor pseudotřídy :first-child.

    Přidejte tento kód do kódu CSS;

    tr:first-child {

    background-color: yellowgreen;

  }

    Konečný zobrazený kód se zobrazí následovně;

    #6. Písmo

    Můžeme změnit styl písma nebo velikost písma konkrétních řádků, sloupců nebo buněk v naší tabulce.

    Zaměříme se na obsah posledního sloupce na naší stránce (Společnosti používající), abychom změnili styl písma.

    Veškerý obsah v tomto sloupci označíme kurzívou tím, že zacílíme na selektor třídy td:last-child. Do souboru CSS můžete přidat následující kód;

    td:last-child {

  font-style: italic;

}

    Konečný výstup bude následující, když znovu načtete vykreslenou stránku;

    Můžeme také změnit barvu a velikost písma prvního sloupce, aby byl jedinečný.

    Přidejte následující kód do svého souboru CSS;

    tr td:first-child {

    color: red;

    font-size: x-large;

    font-weight: bolder;

  }

    Při vykreslování stránky si všimnete následujícího; obsah v prvním sloupci (Jazyk) má větší velikost písma, je červený a je tučnější.

    Jak udělat tabulku responzivní

    Tabulka, kterou jsme vytvořili, nemusí reagovat na malé obrazovky. Chcete-li otestovat, zda váš kód reaguje, můžete použít nástroje pro vývojáře Chrome nebo externí nástroj, jako je tento.

    Existuje několik přístupů, které můžete použít, ale pokryjete pouze jeden.

    Následuj tyto kroky;