Stil HTML-tabeller med CSS: Få maksimal effekt!

by
Tweet
Share
Share
Pin
0 Shares

Strukturering av Data med HTML-tabeller og CSS-styling

Når du arbeider med HTML (Hypertext Markup Language) og andre markeringsspråk som XML, vil du ofte støte på en rekke attributter og tagger. Tabeller er et sentralt verktøy som du bør bruke for å gi brukere en enkel måte å skanne, sammenligne og analysere store datamengder.

Med tabeller kan brukere raskt få et overblikk over nøkkelpunkter, konklusjoner eller resultater, uten å måtte lese hele teksten. Du har også muligheten til å bruke CSS for å style og tilpasse utseendet på tabellene dine.

Her er noen grunner til hvorfor du kan trenge å style en tabell i applikasjonen din:

  • Forbedre det visuelle utseendet: Standardtabeller kan virke kjedelige og enkle. Ved å style dem kan du øke den visuelle appellen og gjøre dem mer engasjerende for brukerne.
  • Forbedre tilgjengeligheten: Styling av tabeller kan gjøre dem mer tilgjengelige, også for personer med funksjonsnedsettelser.
  • Forbedre lesbarheten: Du kan bruke ulike stiler for å gjøre det enklere for brukere å skanne gjennom dataene i tabellene dine.
  • Merkevarebygging: Ved å bruke konsistente fonter og farger i tabellene dine, kan du styrke merkevareidentiteten din på tvers av applikasjonen.
  • Søkemotoroptimalisering: Å organisere dataene dine i tabellformater kan bidra til å forbedre nettstedets rangering i søkemotorene.

Opprett en Grunnleggende Tabell med HTML

For å illustrere hvordan en tabell fungerer i HTML, skal vi opprette en prosjektmappe, navigere inn i denne mappen og deretter lage to filer: index.html for HTML-koden vår og styles.css for CSS-koden (styling).

Følg disse kommandoene for å starte:

mkdir Styling-HTML-tabeller

cd Styling-HTML-tabeller

touch index.html styles.css

Du har nå den grunnleggende prosjektmappen som vi vil bruke til å lage HTML-tabeller. La oss visualisere ulike programmeringsspråk, deres bruksområder og eksempler på selskaper som bruker disse språkene.

For å lage en HTML-tabell, må alle dataene være omsluttet av <table>...</table>-taggen.

Lag den grunnleggende HTML-strukturen i index.html-filen. Legg deretter til følgende kode i <body>-taggen:

  <table>
          <tr>
            <th>Språk</th>
            <th>Vanlige Bruksområder</th>
            <th>Selskaper som Bruker</th>
          </tr>
          <tr>
            <td>Java</td>
            <td>Web-apper, Android-apper, bedriftsapplikasjoner</td>
            <td>Google, Amazon, LinkedIn</td>
          </tr>
          <tr>
            <td>Python</td>
            <td>Dataanalyse, webutvikling, automatisering</td>
            <td>Google, Dropbox, Spotify</td>
          </tr>
          <tr>
            <td>JavaScript</td>
            <td>Webutvikling, frontend-utvikling, nettleserskripting</td>
            <td>PayPal, Facebook, Netflix</td>
          </tr>
          <tr>
            <td>C++</td>
            <td>Spillutvikling, systemprogrammering, innebygde systemer</td>
            <td>Tesla, Microsoft, Adobe</td>
          </tr>
            <tr>
            <td>Swift</td>
            <td>iOS-utvikling, macOS-utvikling</td>
            <td>Apple</td>
          </tr>
           <tr>
            <td>PHP</td>
            <td>Webutvikling, server-side skripting, CMS-er</td>
            <td>WordPress, Wikipedia, Yahoo</td>
          </tr>
        </table>

Når du ser nærmere på denne tabellen, vil du se at det er flere tagger inne i <table>-taggen: <tr>, <th> og <td>.

Disse taggene har følgende funksjoner:

  • <tr> (tabellrad): Omslutter en hel rad med data. <tr>-taggen kan omslutte en eller flere <th>– og <td>-elementer.
  • <th> (tabelloverskrift): Inneholder overskriften for en kolonne og vises som standard med fet skrift.
  • <td> (tabelldata): Inneholder selve dataen i tabellcellene.

Når du kjører koden over, vil du se en enkel tabell i nettleseren din.

CSS-Egenskaper for Styling av Tabeller

Tabellen vi har laget er funksjonell, men ser ganske enkel ut. For å forbedre utseendet og gjøre tabellen mer visuelt tiltalende, vil vi bruke CSS.

Husk at vi opprettet en CSS-fil tidligere? Det er nå tid for å bruke den. Først må du importere CSS-filen til HTML-filen din for at stilen skal fungere. Siden vi ga CSS-filen navnet styles.css, legger du til følgende linje i <head>-seksjonen av HTML-dokumentet ditt:

<link rel="stylesheet" href="styles.css">

Nå er vi klare til å style tabellen vår. La oss se på noen vanlige CSS-egenskaper for tabellstyling:

1. Border (Kantlinje)

Vi kan legge til en kantlinje rundt cellene i tabellen. Dette gjøres ved å definere en border-egenskap for <th>– og <td>-elementene. La oss sette kantlinjen til 2px.

  th, td {
      border: 2px solid orange;
  }

Vi har satt kantlinjens bredde til 2px og fargen til oransje.

Når du laster inn siden på nytt, ser du en tabell med oransje kantlinjer rundt hver celle.

2. Border-collapse (Kantlinje-sammenfall)

Hvis du ser på skjermbildet over, vil du se at det er mellomrom mellom kantlinjene til hver celle. Egenskapen border-collapse bestemmer om kantlinjer fra tilstøtende celler skal smelte sammen til én.

For å fjerne disse mellomrommene og få cellene til å dele en felles kantlinje, legg til følgende kode i CSS-filen din:

  table {
    border-collapse: collapse;
  }

Etter å ha oppdatert siden, ser du at cellene deler kantlinjene:

Hvis du ønsker separate rammer for cellene, bruk:

  table {
    border-collapse: separate;
  }

Da vil resultatet være:

3. Border-spacing (Kantlinjeavstand)

Ved hjelp av border-spacing-egenskapen kan vi lage et lite mellomrom mellom cellene i tabellen. Denne regelen settes inn i table-klassen i CSS-filen.

For at denne egenskapen skal fungere, må border-collapse: separate;-egenskapen brukes.

La oss definere table-klassen slik:

  table {
      border-collapse: separate;
      border-spacing: 3px;
  }

Dette gir en avstand på 3 piksler mellom kantlinjene.

Når du laster inn tabellen igjen, ser den slik ut:

4. Table-layout (Tabelloppsett)

table-layout-egenskapen bestemmer hvordan tabellen skal vises. Tabeller kan ha faste kolonner eller kolonner som tilpasser seg innholdet.

For å få cellene til å ha samme størrelse, kan vi sette tabelloppsettet til fixed.

table-layout: fixed;

Den endelige koden for table-klassen blir da:

  table {
      border-collapse: collapse;
      border-spacing: 3px;
      table-layout: fixed;
  }

For at cellene skal tilpasse seg innholdet, setter vi tabelloppsettet til auto.

table-layout: auto;

Den endelige tabellklassen blir da:

Legg merke til endringen i den siste cellen, der jeg har lagt til ordene «MailChimp og mye mer».

Du ser nå at cellene i den siste raden er større, siden tabelloppsettet er fleksibelt i forhold til innholdet.

Stylingen så langt har fokusert på hele tabellen. La oss nå se på hvordan vi kan style individuelle klasser ved å endre bakgrunnsfarge, skrifttype og tekstjustering for rader, celler eller overskrifter.

5. Background-color (Bakgrunnsfarge)

Vi kan endre bakgrunnen for den første raden til gulgrønn. Vi bruker :first-child pseudo-klassevelgeren for dette.

Legg til følgende kode i CSS-koden din:

  tr:first-child {
      background-color: yellowgreen;
  }

Den endelige kodevisningen blir:

6. Font (Skrifttype)

Vi kan endre skriftstil eller skriftstørrelse for spesifikke rader, kolonner eller celler i tabellen.

La oss endre skrifttypen for den siste kolonnen (Selskaper som bruker).

Vi vil kursivere all teksten i denne kolonnen ved å målrette td:last-child-klassevelgeren. Legg til følgende kode i CSS-filen din:

  td:last-child {
    font-style: italic;
  }

Når du laster siden på nytt, ser du at teksten er kursivert.

Vi kan også endre skriftfarge og størrelse for den første kolonnen, for å gi den et unikt utseende.

Legg til følgende kode i CSS-filen:

  tr td:first-child {
      color: red;
      font-size: x-large;
      font-weight: bolder;
  }

Når du laster siden på nytt, vil du se at innholdet i den første kolonnen (Språk) har en større, rød og fet skrift.

Hvordan gjøre tabellen responsiv

Tabellen vi har laget er kanskje ikke responsiv på små skjermer. Du kan bruke Chrome utviklerverktøy eller andre verktøy for å teste responsiviteten.

Det finnes flere måter å gjøre tabeller responsive på. Vi vil bare gå gjennom én metode.

Følg disse instruksjonene:

  • Angi bredden for <table>-elementet i koden din.
  table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }
  • Sett word-break på td og th, slik at lange ord brytes i cellene.
  th, td {
      border: 2px solid orange;
      word-break: break-word;
  }

Gode praksiser for styling av tabeller

CSS kan være morsomt når man forstår det. Her er noen gode praksiser for å få mest mulig ut av tabellstylingen:

  • Bruk et eksternt stilark: Vi brukte et eksternt stilark i stedet for inline styling. Dette gir gjenbruk av stiler for flere tabeller, som reduserer utviklingstiden.
  • Hold det enkelt: Unngå å overstyle tabellene dine. Hold designet enkelt, slik at tabellene er lette å skanne og lese.
  • Legg til rammer: Kantlinjer gjør tabeller lettere å lese og skanne.
  • Bruk konsistente farger: Hvis du har flere tabeller på tvers av nettsidene dine, bruk konsekvente farger og skrifttyper. Bruk av merkevarefargene kan forbedre gjenkjennelsen.
  • Gjør tabellene responsive: Du vet aldri skjermstørrelsen på sluttbrukernes enheter.
  • Bruk bildetekster: En bildetekst beskriver kort hva tabellen handler om.
  • Bruk mellomrom: Hvis det er flere tabeller etter hverandre, sørg for mellomrom og tekst mellom dem.

Konklusjon

Nå kan du lage og style en enkel HTML-tabell. Vi har ikke dekket alt, siden HTML og CSS er store fagområder. Du kan lage mindre eller større tabeller, avhengig av datatypen. Se på CSS-juksark hvis du vil lære mer om CSS og hvordan det brukes for å forbedre brukergrensesnittet.