Hur man formaterar tabeller med CSS för maximal effekt och blir uppmärksammad

Du kommer att stöta på många attribut och taggar när du hanterar HTML (Hypertext Markup Language) och andra uppmärkningsspråk som XML. Tabeller är attribut som du alltid bör använda för att göra det enkelt för användare att skanna, jämföra och analysera stora mängder data.

Med tabeller kan användare se nyckelpunkterna, slutsatserna eller resultaten på ett ögonblick, även utan att läsa hela artikeln. Du kan använda CSS för att stil och ändra utseendet på dina tabeller.

Det här är några av anledningarna till att du kan behöva styla en tabell i din applikation;

Förbättra det visuella utseendet: Vanliga bord kan vara tråkiga och enkla. Att styla sådana bord kommer att förbättra deras utseende och göra dem attraktiva för användarna.
Förbättra tillgängligheten: Stylingbord kan göra dem tillgängliga även för personer med funktionshinder.
Förbättra läsbarheten: Du kan använda olika stiltekniker för att göra det enkelt för användare att skanna igenom data som presenteras i dina tabeller.
Varumärke: Du kan förstärka din varumärkesidentitet när du använder konsekventa teckensnitt och färger på dina tabeller i hela din applikation.
Bra för sökmotorer: Att organisera dina data i tabellformat kommer att vara användbart om du vill ranka din webbplats högt i sökmotorerna.

Innehållsförteckning

Skapa en grundläggande tabell med HTML

För att visa hur en tabell fungerar i HTML ska vi skapa en projektmapp, navigera in i mappen och skapa två filer; index.html, som bär vår HTML-kod, och styles.css, som bär vår CSS-kod (styling).

Om du vill följa med, använd dessa kommandon för att komma igång;

mkdir Styling-HTML-tabeller

cd Styling-HTML-tabeller

tryck på Styling-HTML-Tables

Du har nu den grundläggande projektmappen som hjälper dig att skapa HTML-tabeller. Jag vill presentera olika programmeringsspråk, deras användningsfall och exempel på företag som använder dessa språk.

För att skapa en HTML-tabell bör all data inkluderas i taggen

…

Skapa den grundläggande strukturen för ett HTML-dokument i din HTML-fil. Lägg till den här 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>

Om du tittar närmare på den här tabellen, kommer du att notera några fler taggar omslutna i

-taggen;

, tabellrad, är innesluten i

och	. Dessa taggar gör följande;

-elementet. Taggen

kan omsluta ett eller flera

-taggen. Som standard är dess innehåll fetstilt.

– och

-element.

, tabellhuvud, finns i

, tabelldata, beskriver innehållet i data i tabellceller.

När du renderar koden som vi har skrivit ovan kommer vi att ha denna i vår webbläsare;

CSS-egenskaper som används för styling av tabeller

Tabellen vi har skapat ovan är fullt fungerande. Den lämnar dock mycket övrigt att önska då den inte är bra stylad. För att uppnå önskade stilar och göra bordet visuellt tilltalande kommer vi att använda CSS.

Kommer du ihåg CSS-filen vi skapade? Det är nu dags att använda den. Du måste dock först importera din CSS-fil till din HTML-fil för att stilen ska fungera. Vi döpte vår CSS-fil styles.css. Lägg till följande i avsnittet i ditt HTML-dokument;

Vi är nu redo att styla vårt bord. Vi kan styla det enligt följande;

#1. Gräns

Vi kan lägga till en ram runt cellerna i vår tabell. För att uppnå detta kommer vi att definiera en gränsegenskap för elementen

och

. Vi kan ställa in gränsen till 2px.

th, td {

    border: 2px solid orange;

  }

Vi har satt gränsvärdet till 2 och lagt till orange som vår färg.

När du renderar den nya sidan kommer du att se följande;

#2. Gränskollaps

Om du granskar skärmdumpen ovan kommer du att notera att det finns mellanslag mellan gränserna för varje cell. Egenskapen border-collapse avgör om intilliggande celler i en tabell ska dela en kantlinje.

Om du vill att cellerna ska dela en kant, lägg till den här koden i din CSS-fil;

table {

  border-collapse: collapse;

}

När du renderar din sida kan du se att cellerna delar gränser enligt följande;

Om du vill att cellerna ska ha olika ramar, lägg till detta i din CSS-fil;

table {

  border-collapse: separate;

}

Den renderade sidan kommer att se ut enligt följande;

#3. Kantavstånd

Genom att använda egenskapen border-space kan vi skapa ett litet utrymme mellan cellerna i vår tabell. Vi ställer in regeln i tabellklassen i vår CSS-fil.

För att den här egenskapen ska fungera måste vi använda border-collapse: separat; fast egendom.

Vi kan ha vår bordsklass enligt följande;

table {

    border-collapse: separate;

    border-spacing: 3px;

  }

Kanterna på celler har ett mellanrum på 3px.

När du renderar tabellen kommer den att se ut enligt följande;

#4. Bordslayout

Egenskapen Tabelllayout bestämmer tabellens karaktär. Du kan ha bord som alltid har samma längd. Å andra sidan kan du också skapa tabeller som ändras utifrån innehåll.

Om vi vill ha celler som har liknande storlekar kan vi ställa in egenskapen table-layout som fast.

bordslayout: fast;

Vår sista kod på tabellklassen blir;

table {

    border-collapse: collapse;

    border-spacing: 3px;

    table-layout: fixed;

  }

Om vi vill ha celler som ändras baserat på innehållet kan vi ändra egenskapen tabelllayout till auto.

tabell-layout: auto;

Finalbordsklassen i vår CSS-kod kommer att vara;

Kontrollera den sista cellen i tabellen och notera att jag har lagt till dessa ord; MailChimp och så mycket mer.

Du kan nu se att cellerna i den sista raden är större än resten då tabelllayouten är flexibel baserat på innehållet.

Den styling vi hittills har täckt fokuserade på hela bordet. Vi kan nu fokusera på enskilda klasser genom att ändra egenskaperna för bakgrundsfärg, teckensnitt och textjustering för rader, celler eller rubriker.

Vi kan utforma dessa egenskaper enligt följande;

#5. Bakgrundsfärg

Vi kan ändra bakgrunden på vår översta rad till gulgrön. Vi kan använda :first-child pseudoklassväljaren för att uppnå våra mål.

Lägg till denna kod till din CSS-kod;

tr:first-child {

    background-color: yellowgreen;

  }

Den slutliga visade koden kommer att visas enligt följande;

#6. Font

Vi kan ändra teckensnittsstil eller teckenstorlek för specifika rader, kolumner eller celler i vår tabell.

Vi kommer att rikta in oss på innehållet i den sista kolumnen på vår sida (företag som använder) för att ändra teckensnittsstilen.

Vi kommer att kursivera allt innehåll i den här kolumnen genom att rikta in oss på klassväljaren td:last-child. Du kan lägga till följande kod till din CSS-fil;

td:last-child {

  font-style: italic;

}

Den slutliga utdatan blir som följer när du laddar om den renderade sidan;

Vi kan också ändra den första kolumns teckensnittsfärg och storlek för att göra den unik.

Lägg till följande kod till din CSS-fil;

tr td:first-child {

    color: red;

    font-size: x-large;

    font-weight: bolder;

  }

När du renderar din sida kommer du att notera följande; innehållet i den första kolumnen (Språk) har en större teckenstorlek, är röda och är fetare.

Hur man gör bordet responsivt

Tabellen vi har skapat kanske inte är känslig för små skärmar. Du kan använda Chromes utvecklarverktyg eller ett externt verktyg som detta för att testa om din kod är responsiv.

Det finns flera tillvägagångssätt som du kan använda, men som bara täcker en.

Följ dessa steg;

Ställ in bredden på
-elementet i din kod;

table {

  width: 100%;

  border-collapse: collapse;

  table-layout: fixed;

}

Ställ in ordbrytning på td och th för att göra långa ord i cellen.

th, td {

    border: 2px solid orange;

    word-break: break-word;

  }

Bästa metoder för styling av bord

CSS kan vara kul en gång, speciellt när du kan det. Det här är några av de bästa metoderna för att säkerställa att du får det bästa när du stylar dina bord;

Använd en extern stilmall: Vi hade ett alternativ att använda inline-styling, men vi valde en extern stilmall. Vi har kunnat återanvända vår styling över olika bord, vilket minskat utvecklingstiden.
Håll det enkelt: Du kan ryckas med och överstyla dina bord. Ha dock alltid en enkel design och gör dina tabeller skanningsbara och läsbara.
Lägg till ramar till dina tabeller: En ram gör en tabell lätt att läsa och skanna.
Använd konsekventa färger: Om du har flera tabeller på dina webbsidor, se till att du använder konsekventa färger och teckensnitt. Att använda dina varumärkesfärger kan förbättra ditt varumärkes synlighet.
Gör dina bord responsiva: Du kanske aldrig vet skärmstorleken på slutanvändarnas enheter.
Använd bildtexter för att beskriva dina tabeller: Bildtexten beskriver kort vad tabellen handlar om.
Använd vita utrymmen för att separera dina tabeller: Om flera tabeller följer varandra, lägg till lite vitt utrymme och bildtext dem därefter.

Slutsats

Jag tror att du nu kan skapa och utforma en grundläggande HTML-tabell. Vi kanske inte har täckt allt, eftersom HTML och CSS är breda. Du kan skapa mindre eller större tabeller, beroende på vilken typ av data du vill fånga.

Kolla in CSS-fuskbladen om du vill lära dig mer om CSS och hur du använder det för att förbättra ditt användargränssnitt.