Sådan styles tabel med CSS for maksimal effekt og blive bemærket

Af
Tweet
Share
Share
Pin

Du vil støde på mange attributter og tags, når du beskæftiger dig med HTML (Hypertext Markup Language) og andre markup-sprog såsom XML. Tabeller er attributter, du altid bør bruge for at gøre det nemt for brugere at scanne, sammenligne og analysere store mængder data.

Med tabeller kan brugerne se de vigtigste punkter, konklusioner eller resultater på et øjeblik, selv uden at læse hele artiklen. Du kan bruge CSS til at style og ændre udseendet af dine tabeller.

Dette er nogle af grundene til, at du muligvis skal style et bord i din ansøgning;

  • Forbedre det visuelle udseende: Almindelige borde kan være kedelige og almindelige. Styling af sådanne borde vil forbedre deres udseende og gøre dem attraktive for brugerne.
  • Forbedre tilgængeligheden: Styling af borde kan gøre dem tilgængelige selv for personer med handicap.
  • Forbedre læsbarheden: Du kan bruge forskellige stylingteknikker for at gøre det nemt for brugerne at scanne gennem dataene i dine tabeller.
  • Branding: Du kan forstærke din brandidentitet, når du anvender ensartede skrifttyper og farver på dine tabeller på tværs af din applikation.
  • Godt til søgemaskiner: Organisering af dine data i tabelformater vil være nyttigt, hvis du vil placere dit websted højt i søgemaskinerne.

Opret en grundlæggende tabel med HTML

For at demonstrere, hvordan en tabel fungerer i HTML, skal vi oprette en projektmappe, navigere ind i mappen og oprette to filer; index.html, som bærer vores HTML-kode, og styles.css, som bærer vores CSS-kode (styling).

Hvis du ønsker at følge med, så brug disse kommandoer til at komme i gang;

mkdir Styling-HTML-tabeller

cd Styling-HTML-tabeller

tryk på Styling-HTML-tabeller

Du har nu den grundlæggende projektmappe til at hjælpe dig med at oprette HTML-tabeller. Jeg vil præsentere forskellige programmeringssprog, deres use cases og eksempler på virksomheder, der bruger disse sprog.

For at oprette en HTML-tabel skal alle data være indesluttet i

…

tag.

Generer den grundlæggende struktur af et HTML-dokument i din HTML-fil. Tilføj denne kode i -tagget. 

<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>

Hvis du ser nærmere på denne tabel, vil du bemærke et par flere tags indesluttet i

  Sådan rettes Zoom-fejlkode 5003
tagget;

,

, tabelrække, er indesluttet i

og

.

Disse tags gør følgende;

-elementet.

-tagget kan omslutte et eller flere

-tagget. Som standard er dens indhold fed.
    • – og

    		-elementer.
    		• , tabeloverskrift, er indeholdt i

    , tabeldata, beskriver indholdet af data i tabelceller.

    Når du gengiver koden, som vi har skrevet ovenfor, vil vi have denne i vores browser;

    CSS-egenskaber, der bruges til styling af tabeller

    Tabellen, vi har lavet ovenfor, er fuldt funktionsdygtig. Den lader dog meget tilbage at ønske, da den ikke er stylet godt. For at opnå de ønskede stilarter og gøre bordet visuelt tiltalende, vil vi bruge CSS.

    Kan du huske den CSS-fil, vi oprettede? Det er nu tid til at bruge det. Du skal dog først importere din CSS-fil til din HTML-fil, for at stylingen fungerer. Vi navngav vores CSS-fil styles.css. Tilføj følgende i -sektionen i dit HTML-dokument;

    Vi er nu klar til at style vores bord. Vi kan style det som følger;

    #1. Grænse

    Vi kan tilføje en kant rundt om cellerne i vores tabel. For at opnå dette vil vi definere en grænseegenskab på

    		og

    		elementerne. Vi kan sætte grænsen til 2px. 

    th, td {

    border: 2px solid orange;

  }

    Vi har sat grænseværdien til 2 og tilføjet orange som vores farve.

    Når du gengiver den nye side, vil du se følgende;

    #2. Grænse-kollaps

    Hvis du undersøger skærmbilledet ovenfor, vil du bemærke, at der er mellemrum mellem kanterne på hver celle. Egenskaben border-collapse bestemmer, om tilstødende celler i en tabel skal dele en kant.

    Hvis du ønsker, at cellerne skal dele en kant, skal du tilføje denne kode til din CSS-fil;

    table {

  border-collapse: collapse;

}

    Når du gengiver din side, kan du se, at cellerne deler grænser som følger;

    Hvis du ønsker, at cellerne skal have forskellige rammer, skal du tilføje dette til din CSS-fil;

    table {

  border-collapse: separate;

}

    Den gengivede side vil fremstå som følger;

    #3. Grænse-afstand

    Ved at bruge egenskaben border-space kan vi skabe et lille mellemrum mellem cellerne i vores tabel. Vi sætter reglen inde i tabelklassen i vores CSS-fil.

    For at denne egenskab skal fungere, skal vi bruge border-collapse: separat; ejendom.

    Vi kan have vores bordklasse som følger;

    table {

    border-collapse: separate;

    border-spacing: 3px;

  }

    Kanterne på celler har et mellemrum på 3px.

    Når du gengiver tabellen, vil den se ud som følger;

    #4. Bord-layout

    Egenskaben Tabel-layout bestemmer tabellens art. Du kan have borde, der altid har samme længde. På den anden side kan du også lave tabeller, der ændrer sig baseret på indhold.

    Hvis vi vil have celler, der har lignende størrelser, kan vi indstille egenskaben tabellayout som fast.

    bord-layout: fast;

    Vores sidste kode på bordklassen bliver; 

    table {

    border-collapse: collapse;

    border-spacing: 3px;

    table-layout: fixed;

  }

    Hvis vi vil have celler, der ændrer sig baseret på indhold, kan vi ændre tabellayout-egenskaben til auto.

    tabel-layout: auto;

    Den endelige tabel klasse i vores CSS kode vil være;

    Tjek den sidste celle på bordet og bemærk, at jeg har tilføjet disse ord; MailChimp og meget mere.

    Du kan nu se cellerne i den sidste række er større end resten, da tabellayoutet er fleksibelt baseret på indholdet.

    Den styling, vi har dækket indtil videre, fokuserede på hele bordet. Vi kan nu fokusere på individuelle klasser ved at ændre egenskaberne for baggrundsfarve, skrifttype og tekstjustering for rækker, celler eller overskrifter.

    Vi kan style disse egenskaber som følger;

    #5. Baggrundsfarve

    Vi kan ændre baggrunden på vores øverste række til gul-grøn. Vi kan bruge :first-child pseudo-klasse-vælgeren til at nå vores mål.

    Tilføj denne kode til din CSS-kode;

    tr:first-child {

    background-color: yellowgreen;

  }

    Den endelige viste kode vises som følger;

    #6. Skrifttype

    Vi kan ændre skrifttypestilen eller skriftstørrelsen for specifikke rækker, kolonner eller celler i vores tabel.

    Vi vil målrette indholdet af den sidste kolonne på vores side (virksomheder, der bruger) for at ændre skrifttypestilen.

    Vi vil kursivere alt indholdet i denne kolonne ved at målrette mod td:sidste-barn-klassevælgeren. Du kan tilføje følgende kode til din CSS-fil;

    td:last-child {

  font-style: italic;

}

    Det endelige output vil være som følger, når du genindlæser den gengivne side;

    Vi kan også ændre den første kolonnes skriftfarve og størrelse for at gøre den unik.

    Tilføj følgende kode til din CSS-fil;

    tr td:first-child {

    color: red;

    font-size: x-large;

    font-weight: bolder;

  }

    Når du gengiver din side, vil du bemærke følgende; indholdet i den første kolonne (Sprog) har en større skriftstørrelse, er rød og er mere fed.

    Sådan gør du bordet responsivt

    Tabellen, vi har lavet, reagerer muligvis ikke på små skærme. Du kan bruge Chromes udviklerværktøjer eller et eksternt værktøj som dette til at teste, om din kode er responsiv.

    Der er flere tilgange, du kan tage, men vil kun dække én.

    Følg disse trin;