Hvordan style tabell med CSS for maksimal effekt og bli lagt merke til

0 Shares

Du vil møte mange attributter og tagger når du arbeider med HTML (Hypertext Markup Language) og andre markup-språk som XML. Tabeller er attributter du alltid bør bruke for å gjøre det enkelt for brukere å skanne, sammenligne og analysere store datamengder.

Med tabeller kan brukere se nøkkelpunktene, konklusjonene eller resultatene på et øyeblikk, selv uten å lese hele artikkelen. Du kan bruke CSS til å style og endre utseendet på tabellene dine.

Dette er noen av grunnene til at du kanskje må style en tabell i søknaden din;

Forbedre det visuelle utseendet: Vanlige bord kan være kjedelige og enkle. Å style slike bord vil forbedre utseendet deres og gjøre dem attraktive for brukerne.
Forbedre tilgjengeligheten: Styling tabeller kan gjøre dem tilgjengelige selv for funksjonshemmede.
Forbedre lesbarheten: Du kan bruke forskjellige stilteknikker for å gjøre det enkelt for brukere å skanne gjennom dataene som presenteres i tabellene dine.
Merkevarebygging: Du kan forsterke merkevareidentiteten din når du bruker konsistente fonter og farger på tabellene dine på tvers av applikasjonen.
Bra for søkemotorer: Organisering av dataene dine i tabellformater vil være nyttig hvis du ønsker å rangere nettstedet ditt høyt i søkemotorene.

Innholdsfortegnelse

Lag en grunnleggende tabell med HTML

For å demonstrere hvordan en tabell fungerer i HTML, skal vi lage en prosjektmappe, navigere inn i mappen og lage to filer; index.html, som bærer HTML-koden vår, og styles.css, som bærer CSS-koden (styling).

Hvis du ønsker å følge med, bruk disse kommandoene for å komme i gang;

mkdir Styling-HTML-tabeller

cd Styling-HTML-tabeller

trykk på Styling-HTML-tabeller

Du har nå den grunnleggende prosjektmappen som hjelper deg med å lage HTML-tabeller. Jeg ønsker å presentere ulike programmeringsspråk, deres brukstilfeller og eksempler på selskaper som bruker disse språkene.

For å lage en HTML-tabell må alle data omsluttes i

…

-taggen.

Generer den grunnleggende strukturen til et HTML-dokument i HTML-filen. Legg til denne koden i -taggen.

<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 tabellen, vil du legge merke til noen flere tagger inne i

Beste Apple TV-spill og årsaken til deres popularitet

-taggen;

, tabellrad, er omsluttet av

og	. Disse taggene gjør følgende;

-elementet.

-taggen kan omslutte ett eller flere

-taggen. Som standard er innholdet med fet skrift.

– og

-elementer.

, tabelloverskrift, er inneholdt i

, tabelldata, beskriver innholdet av data i tabellceller.

Når du gjengir koden som vi har skrevet ovenfor, vil vi ha denne i nettleseren vår;

CSS-egenskaper som brukes for styling av tabeller

Tabellen vi har laget ovenfor er fullt funksjonell. Den etterlater imidlertid mye å være ønsket da den ikke er stilig godt. For å oppnå de ønskede stilene og gjøre bordet visuelt tiltalende, vil vi bruke CSS.

Husker du CSS-filen vi opprettet? Det er nå på tide å bruke det. Du må imidlertid først importere CSS-filen til HTML-filen for at stilen skal fungere. Vi ga navnet vår CSS-fil styles.css. På -delen av HTML-dokumentet ditt legger du til følgende;

Vi er nå klare til å style bordet vårt. Vi kan style det som følger;

#1. Grense

Vi kan legge til en kant rundt cellene i tabellen vår. For å oppnå dette vil vi definere en grenseegenskap på

– og

-elementene. Vi kan sette grensen til 2px.

th, td {

    border: 2px solid orange;

  }

Vi har satt grenseverdien til 2 og lagt til oransje som farge.

Når du gjengir den nye siden, vil du se følgende;

#2. Grensekollaps

Hvis du undersøker skjermbildet ovenfor, vil du legge merke til at det er mellomrom mellom kantene til hver celle. Egenskapen border-collapse bestemmer om tilstøtende celler i en tabell skal dele en kantlinje.

Hvis du vil at cellene skal dele en kantlinje, legg til denne koden i CSS-filen din;

table {

  border-collapse: collapse;

}

Når du gjengir siden din, kan du se at cellene deler grenser som følger;

Hvis du vil at cellene skal ha forskjellige rammer, legg dette til CSS-filen din;

table {

  border-collapse: separate;

}

Den gjengitte siden vil vises som følger;

#3. Kantavstand

Ved å bruke border-space-egenskapen kan vi lage et lite mellomrom mellom cellene i tabellen vår. Vi setter regelen inne i tabellklassen i CSS-filen vår.

For at denne egenskapen skal fungere, må vi bruke border-collapse: separat; eiendom.

Vi kan ha bordklassen vår som følger;

table {

    border-collapse: separate;

    border-spacing: 3px;

  }

Kantene på cellene har et mellomrom på 3px.

Når du gjengir tabellen, vil den se ut som følger;

#4. Bordoppsett

Egenskapen Tabelloppsett bestemmer tabellens natur. Du kan ha bord som alltid har samme lengde. På den annen side kan du også lage tabeller som endres basert på innhold.

Hvis vi ønsker å ha celler som har lignende størrelser, kan vi sette egenskapen for tabelloppsett som fast.

bordoppsett: fast;

Vår siste kode på tabellklassen blir;

table {

    border-collapse: collapse;

    border-spacing: 3px;

    table-layout: fixed;

  }

Hvis vi vil ha celler som endres basert på innhold, kan vi endre egenskapen for tabelloppsett til auto.

bordoppsett: auto;

Finalebordklassen i vår CSS-kode vil være;

Sjekk den siste cellen på tabellen og merk at jeg har lagt til disse ordene; MailChimp og mye mer.

Du kan nå se at cellene i den siste raden er større enn resten da tabelloppsettet er fleksibelt basert på innholdet.

Stylingen vi har dekket så langt fokuserte på hele bordet. Vi kan nå fokusere på individuelle klasser ved å endre bakgrunnsfarge, skrifttype og tekstjusteringsegenskaper for rader, celler eller overskrifter.

Vi kan style disse egenskapene som følger;

#5. Bakgrunnsfarge

Vi kan endre bakgrunnen på den øverste raden vår til gulgrønn. Vi kan bruke :first-child pseudo-klassevelgeren for å nå våre mål.

Legg til denne koden i CSS-koden din;

tr:first-child {

    background-color: yellowgreen;

  }

Den endelige viste koden vil vises som følger;

#6. Font

Vi kan endre skriftstilen eller skriftstørrelsen til spesifikke rader, kolonner eller celler i tabellen vår.

Vi vil målrette innholdet i den siste kolonnen på siden vår (selskaper som bruker) for å endre skriftstilen.

Vi vil kursivere alt innholdet i denne kolonnen ved å målrette mot td:last-child-klassevelgeren. Du kan legge til følgende kode i CSS-filen din;

td:last-child {

  font-style: italic;

}

Den endelige utgangen vil være som følger når du laster inn den gjengitte siden på nytt;

Vi kan også endre den første kolonnens skriftfarge og størrelse for å gjøre den unik.

Legg til følgende kode i CSS-filen din;

tr td:first-child {

    color: red;

    font-size: x-large;

    font-weight: bolder;

  }

Når du gjengir siden din, vil du legge merke til følgende; innholdet i den første kolonnen (Språk) har en større skriftstørrelse, er rødt og er tykkere.

Hvordan gjøre bordet responsivt

Tabellen vi har laget er kanskje ikke responsiv for små skjermer. Du kan bruke Chromes utviklerverktøy eller et eksternt verktøy som dette for å teste om koden din er responsiv.

Det er flere tilnærminger du kan ta, men vil bare dekke én.

Følg disse instruksjonene;

Angi bredden på
-elementet i koden din;

table {

  width: 100%;

  border-collapse: collapse;

  table-layout: fixed;

}

Sett ordskift på td og th for å lage lange ord i cellen.

th, td {

    border: 2px solid orange;

    word-break: break-word;

  }

Beste praksis for styling av bord

CSS kan være morsomt en gang, spesielt når du vet det. Dette er noen av de beste fremgangsmåtene for å sikre at du får det beste når du styler bordene dine;

Bruk et eksternt stilark: Vi hadde muligheten til å bruke inline styling, men vi valgte et eksternt ark. Vi har vært i stand til å gjenbruke stylingen vår på tvers av forskjellige bord, noe som reduserer utviklingstiden.
Hold det enkelt: Du kan bli revet med og over-style bordene dine. Oppretthold imidlertid alltid et enkelt design og gjør tabellene skanbare og lesbare.
Legg til rammer på tabellene dine: En kantlinje gjør en tabell lett å lese og skanne.
Bruk konsistente farger: Hvis du har flere tabeller på tvers av nettsidene dine, sørg for at du bruker konsistente farger og skrifttyper. Bruk av merkefargene dine kan forbedre merkevarens synlighet.
Gjør tabellene dine responsive: Du vet kanskje aldri skjermstørrelsen til sluttbrukernes enheter.
Bruk bildetekster for å beskrive tabellene dine: Bildeteksten beskriver kort hva tabellen handler om.
Bruk mellomrom for å skille bordene dine: Hvis flere tabeller følger etter hverandre, legg til litt mellomrom og tekst dem deretter.

Konklusjon

Jeg tror nå du kan lage og style en grunnleggende HTML-tabell. Vi har kanskje ikke dekket alt, siden HTML og CSS er bredt. Du kan lage mindre eller større tabeller, avhengig av arten av dataene du vil fange.

Sjekk ut CSS-juksearkene hvis du vil lære mer om CSS og hvordan du bruker det til å forbedre brukergrensesnittet ditt.