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

Innehållsförteckning

Attribut och taggar för tabeller i HTML

När du arbetar med HTML (Hypertext Markup Language) och andra markeringsspråk som XML, kommer du att stöta på en mängd attribut och taggar. Tabeller är särskilt viktiga för att göra det enkelt för användare att snabbt granska, jämföra och analysera stora mängder information.

Med tabeller kan användare snabbt se de viktigaste punkterna, slutsatserna eller resultaten, även utan att läsa hela texten. Du kan använda CSS för att styla och anpassa utseendet på dina tabeller.

Här är några skäl till varför du kan behöva styla en tabell i din applikation:

Förbättra visuellt utseende: Standardtabeller kan se tråkiga och oinspirerande ut. Genom att styla dem kan du göra dem mer attraktiva och tilltalande för användarna.
Förbättra tillgänglighet: Rätt styling av tabeller kan göra dem mer tillgängliga även för personer med funktionshinder.
Förbättra läsbarhet: Genom att använda olika stylingtekniker kan du göra det lättare för användare att snabbt skanna och förstå informationen som presenteras i dina tabeller.
Varumärkesbyggande: Att använda konsekventa typsnitt och färger i dina tabeller i hela applikationen hjälper till att stärka din varumärkesidentitet.
SEO-fördelar: Att organisera din data i tabellformat kan bidra till att din webbplats rankas högre i sökmotorresultaten.

Skapa en grundläggande tabell med HTML

Låt oss skapa en enkel tabell i HTML för att illustrera hur det fungerar. Först, skapa en projektmapp, navigera in i den och skapa två filer: index.html för HTML-koden och styles.css för CSS-koden (styling).

Följ dessa kommandon för att komma igång:

mkdir Styling-HTML-tabeller

cd Styling-HTML-tabeller

touch index.html styles.css

Nu har du den grundläggande projektstrukturen för att skapa HTML-tabeller. Låt oss skapa en tabell som presenterar olika programmeringsspråk, deras användningsområden och exempel på företag som använder dem.

För att skapa en HTML-tabell måste all data finnas inom

...

-taggen.

Skapa den grundläggande strukturen för ett HTML-dokument i din HTML-fil. Lägg till följande kod i <body>-taggen:

        <table>
            <tr>
                <th>Språk</th>
                <th>Vanliga användningsområden</th>
                <th>Företag som använder</th>
            </tr>
            <tr>
                <td>Java</td>
                <td>Webbapplikationer, Android-appar, företagsapplikationer</td>
                <td>Google, Amazon, LinkedIn</td>
            </tr>
            <tr>
                <td>Python</td>
                <td>Dataanalys, webbutveckling, automatisering</td>
                <td>Google, Dropbox, Spotify</td>
            </tr>
            <tr>
                <td>JavaScript</td>
                <td>Webbutveckling, frontend-utveckling, webbläsarskript</td>
                <td>PayPal, Facebook, Netflix</td>
            </tr>
             <tr>
                <td>C++</td>
                <td>Spelutveckling, systemprogrammering, inbyggda system</td>
                <td>Tesla, Microsoft, Adobe</td>
            </tr>
            <tr>
                <td>Swift</td>
                <td>iOS-utveckling, macOS-utveckling</td>
                <td>Apple</td>
            </tr>
            <tr>
                <td>PHP</td>
                 <td>Webbutveckling, server-side scripting, CMS</td>
                <td>WordPress, Wikipedia, Yahoo</td>
            </tr>
        </table>

I tabellen ovan ser du fler taggar inuti <table>-taggen: <tr>, <th> och <td>.

Dessa taggar har följande funktioner:

<tr>, tabellrad, finns inom <table>-elementet. <tr>-taggen kan innehålla en eller flera <th>– eller <td>-element.
<th>, tabellhuvud, används inom <tr>-taggen och har som standard fetstil.
<td>, tabelldata, beskriver data som ska visas i tabellcellerna.

När du kör koden i en webbläsare kommer du att se en grundläggande tabell.

CSS-egenskaper för att styla tabeller

Tabellen vi skapade är fullt fungerande, men den är inte särskilt snygg. För att förbättra utseendet och göra tabellen visuellt tilltalande använder vi CSS.

Kommer du ihåg styles.css-filen vi skapade? Nu är det dags att använda den. Men först måste du importera din CSS-fil till din HTML-fil för att stilarna ska fungera. Lägg till följande kod i <head>-avsnittet i ditt HTML-dokument:

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

Nu kan vi börja styla vår tabell. Här är några vanliga CSS-egenskaper vi kan använda:

#1. Ram

Vi kan lägga till en ram runt cellerna i tabellen genom att definiera border-egenskapen för <th> och <td> elementen. Låt oss sätta ramen till 2px.

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

Vi har satt ramens bredd till 2px och valt orange som färg.

När du uppdaterar sidan kommer tabellen att visa ramar runt varje cell.

#2. Ramkollaps

Om du tittar på skärmdumpen ovan, kommer du att se att det finns utrymme mellan cellernas ramar. Egenskapen border-collapse avgör om angränsande celler i en tabell ska dela en gemensam ram eller inte.

För att cellerna ska dela en gemensam ram, lägg till följande kod i din CSS-fil:

table {
    border-collapse: collapse;
}

När du uppdaterar sidan kommer cellerna att dela ramar.

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

table {
    border-collapse: separate;
}

Då kommer tabellcellerna ha separata ramar.

#3. Ramavstånd

Med border-spacing-egenskapen kan vi skapa lite utrymme mellan cellerna i vår tabell. Vi sätter regeln i tabellklassen i vår CSS-fil.

För att denna egenskap ska fungera, måste vi först använda border-collapse: separate egenskapen.

Här är vår tabellklass med border-spacing:

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

Cellernas kanter har nu ett mellanrum på 3px.

När du uppdaterar tabellen, ser du att det finns ett mellanrum mellan cellerna.

#4. Tabelllayout

Egenskapen table-layout bestämmer hur tabellen ska bete sig. Du kan ha tabeller där cellernas bredd är fast eller så kan de anpassas efter innehållet.

Om vi vill ha celler som har liknande bredd kan vi ange table-layout-egenskapen till fixed.

table-layout: fixed;

Vår sista kod för 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 table-layout-egenskapen till auto.

table-layout: auto;

Den slutliga tabellklassen i vår CSS-kod kommer att vara:

Kontrollera sista cellen i tabellen, där det står ”MailChimp och så mycket mer”.

Nu ser du att cellerna i den sista raden är större än resten eftersom tabellayouten är flexibel baserat på innehållet.

Stylingen vi har gått igenom hittills har fokuserat på hela tabellen. Nu kan vi rikta in oss på enskilda klasser genom att ändra bakgrundsfärg, typsnitt och textjustering för rader, celler eller rubriker.

Vi kan styla dessa egenskaper enligt följande:

#5. Bakgrundsfärg

Vi kan ändra bakgrundsfärgen på den översta raden till gulgrön. Vi kan använda :first-child pseudoklassväljaren för att uppnå detta.

Lägg till den här koden till din CSS:

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

När du uppdaterar sidan, ser du att bakgrundsfärgen ändrats för den översta raden.

#6. Typsnitt

Vi kan ändra typsnitt, stil eller storlek för specifika rader, kolumner eller celler i vår tabell.

Vi kommer att ändra typsnittsstilen i den sista kolumnen (företag som använder).

Vi kursiverar allt innehåll i den här kolumnen genom att rikta in oss på td:last-child. Lägg till följande kod i din CSS-fil:

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

När du uppdaterar sidan, ser du att all text i sista kolumnen är kursiverad.

Vi kan också ändra färg och storlek på texten i den första kolumnen för att göra den unik.

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

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

När du uppdaterar sidan, ser du att innehållet i första kolumnen (Språk) har större text, röd färg och fet stil.

Hur man gör tabellen responsiv

Tabellen vi har skapat kanske inte är responsiv för små skärmar. Du kan använda Chromes utvecklarverktyg eller andra externa verktyg för att testa om din kod är responsiv.

Det finns flera sätt att göra en tabell responsiv, men vi fokuserar bara på ett här.

Följ dessa steg:

Ställ in bredden på <table> elementet i din kod:

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

Ställ in word-break på td och th för att bryta långa ord inom cellerna.

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

Bästa metoder för att styla tabeller

CSS kan vara kul, speciellt när du kan det. Här är några av de bästa metoderna för att säkerställa att du får bästa resultat när du stylar dina tabeller:

Använd en extern stilmall: Vi kunde ha använt inline-styling, men vi valde en extern stilmall. Detta gör att vi kan återanvända samma stil för flera tabeller och därmed minska utvecklingstiden.
Håll det enkelt: Det är lätt att överstyla tabeller. Försök att hålla designen enkel och se till att tabellerna är lätta att skanna och läsa.
Lägg till ramar: En ram runt tabellen och cellerna gör den lättare att läsa och skanna.
Använd konsekventa färger: Om du har flera tabeller på dina webbsidor, använd konsekventa färger och typsnitt. Att använda ditt varumärkes färger kan stärka ditt varumärkes synlighet.
Gör dina tabeller responsiva: Du vet aldrig vilken skärmstorlek dina slutanvändare kommer att ha.
Använd bildtexter för att beskriva dina tabeller: Bildtexten beskriver kort vad tabellen handlar om.
Använd vitrymd: Om flera tabeller följer varandra, lägg till lite vitrymd och bildtext dem därefter.

Slutsats

Förhoppningsvis kan du nu skapa och styla en grundläggande HTML-tabell. Vi har inte gått igenom allt eftersom HTML och CSS är omfattande. Du kan skapa mindre eller större tabeller beroende på vilken data du vill visa.

Kolla in CSS-fuskblad 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.