Tabel stylen met CSS voor maximale impact en opvallen

epcdream
Tweet
Share
Share
Pin

Bij HTML (Hypertext Markup Language) en andere opmaaktalen zoals XML zult u veel attributen en tags tegenkomen. Tabellen zijn attributen die u altijd moet gebruiken om het gebruikers gemakkelijk te maken grote hoeveelheden gegevens te scannen, vergelijken en analyseren.

Met tabellen kunnen gebruikers in één oogopslag de belangrijkste punten, conclusies of resultaten zien, zelfs zonder het hele artikel te lezen. U kunt CSS gebruiken om uw tabellen te stylen en het uiterlijk ervan te wijzigen.

Dit zijn enkele van de redenen waarom u mogelijk een tabel in uw toepassing moet opmaken;

  • Visuele uitstraling verbeteren: Gewone tafels kunnen saai en eenvoudig zijn. Het stylen van dergelijke tafels zal hun uiterlijk verbeteren en aantrekkelijk maken voor gebruikers.
  • Toegankelijkheid verbeteren: Stylingtafels kunnen ze zelfs toegankelijk maken voor mensen met een handicap.
  • Verbeter de leesbaarheid: u kunt verschillende stylingtechnieken gebruiken om het gebruikers gemakkelijk te maken door de gegevens in uw tabellen te bladeren.
  • Branding: U kunt uw merkidentiteit versterken door consistente lettertypen en kleuren toe te passen op uw tabellen in uw hele applicatie.
  • Goed voor zoekmachines: het organiseren van uw gegevens in tabelvorm is handig als u uw website hoog wilt laten scoren in zoekmachines.

Maak een basistabel met HTML

Om te demonstreren hoe een tabel werkt in HTML, zullen we een projectmap maken, naar de map navigeren en twee bestanden maken; index.html, die onze HTML-code bevat, en styles.css, die onze CSS-code bevat (styling).

Als je mee wilt doen, gebruik dan deze commando’s om te beginnen;

mkdir Styling-HTML-tabellen

cd Styling-HTML-tabellen

tik op Styling-HTML-tabellen

U hebt nu de basisprojectmap om u te helpen bij het maken van HTML-tabellen. Ik wil verschillende programmeertalen presenteren, hun use cases en voorbeelden van bedrijven die deze talen gebruiken.

Om een ​​HTML-tabel te maken, moeten alle gegevens worden ingesloten in de tag

…

.

Genereer in uw HTML-bestand de basisstructuur van een HTML-document. Voeg deze code toe binnen de tag. 

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

Als je goed naar deze tabel kijkt, zul je nog een paar tags opmerken die ingesloten zijn in de

  Moet je de Apple Watch 4 kopen?
tag;

,

, tabelrij, is ingesloten in het

en

.

Deze tags doen het volgende;

-element. De

-tag kan een of meer

tag. De inhoud is standaard vetgedrukt.
    • – en

    		-elementen bevatten.
    		• , tabelkop, is opgenomen in de

    , tabelgegevens, beschrijft de inhoud van gegevens in tabelcellen.

    Wanneer u de code weergeeft die we hierboven hebben geschreven, hebben we deze in onze browser;

    CSS-eigenschappen gebruikt voor opmaaktabellen

    De tabel die we hierboven hebben gemaakt, is volledig functioneel. Het laat echter veel te wensen over omdat het niet goed is gestyled. Om de gewenste stijlen te bereiken en de tabel visueel aantrekkelijk te maken, gebruiken we CSS.

    Weet je nog het CSS-bestand dat we hebben gemaakt? Het is nu tijd om het te gebruiken. U moet echter eerst uw CSS-bestand in uw HTML-bestand importeren om de styling te laten werken. We hebben ons CSS-bestand styles.css genoemd. Voeg in het -gedeelte van uw HTML-document het volgende toe;

    We zijn nu klaar om onze tafel te stylen. We kunnen het als volgt stylen;

    #1. Grens

    We kunnen een rand toevoegen rondom de cellen in onze tabel. Om dit te bereiken, definiëren we een border eigenschap op de

    		en

    		elementen. We kunnen de rand instellen op 2px. 

    th, td {

    border: 2px solid orange;

  }

    We hebben de grenswaarde ingesteld op 2 en oranje toegevoegd als onze kleur.

    Wanneer u de nieuwe pagina rendert, ziet u het volgende;

    #2. Border-ineenstorting

    Als u de bovenstaande schermafbeelding bekijkt, ziet u dat er spaties zijn tussen de randen van elke cel. De eigenschap border-collapse bepaalt of aangrenzende cellen in een tabel een rand moeten delen.

    Als u wilt dat de cellen een rand delen, voegt u deze code toe aan uw CSS-bestand;

    table {

  border-collapse: collapse;

}

    Wanneer u uw pagina weergeeft, kunt u zien dat de cellen de randen als volgt delen;

    Als u wilt dat de cellen verschillende randen hebben, voegt u dit toe aan uw CSS-bestand;

    table {

  border-collapse: separate;

}

    De gerenderde pagina zal er als volgt uitzien;

    #3. Grensafstand

    Met behulp van de eigenschap border-space kunnen we een kleine ruimte creëren tussen de cellen in onze tabel. We stellen de regel in de tabelklasse in ons CSS-bestand in.

    Om deze eigenschap te laten werken, moeten we border-collapse gebruiken: separate; eigendom.

    We kunnen onze tafelklasse als volgt hebben;

    table {

    border-collapse: separate;

    border-spacing: 3px;

  }

    De randen op cellen hebben een ruimte van 3px.

    Wanneer u de tabel rendert, ziet deze er als volgt uit;

    #4. Tabel-indeling

    De eigenschap Table-layout bepaalt de aard van de tabel. U kunt tafels hebben die altijd dezelfde lengte hebben. Aan de andere kant kun je ook tabellen maken die veranderen op basis van inhoud.

    Als we cellen van vergelijkbare grootte willen hebben, kunnen we de eigenschap table-layout als vast instellen.

    tafelindeling: vast;

    Onze laatste code op de tafelklasse zal zijn; 

    table {

    border-collapse: collapse;

    border-spacing: 3px;

    table-layout: fixed;

  }

    Als we cellen willen die veranderen op basis van inhoud, kunnen we de eigenschap tabellay-out wijzigen in automatisch.

    tafelindeling: automatisch;

    De finaletafelklasse in onze CSS-code zal zijn;

    Controleer de laatste cel op de tafel en merk op dat ik deze woorden heb toegevoegd; MailChimp en nog veel meer.

    U kunt nu zien dat de cellen in de laatste rij groter zijn dan de rest, omdat de tabelindeling flexibel is op basis van de inhoud.

    De styling die we tot nu toe hebben behandeld, was gericht op de hele tafel. We kunnen ons nu concentreren op individuele klassen door de eigenschappen voor achtergrondkleur, lettertype en tekstuitlijning voor rijen, cellen of koppen te wijzigen.

    We kunnen deze eigenschappen als volgt stylen;

    #5. Achtergrond kleur

    We kunnen de achtergrond van onze bovenste rij veranderen in geelgroen. We kunnen de :first-child pseudo-klasse selector gebruiken om onze doelen te bereiken.

    Voeg deze code toe aan je CSS-code;

    tr:first-child {

    background-color: yellowgreen;

  }

    De uiteindelijk weergegeven code zal als volgt verschijnen;

    #6. Lettertype

    We kunnen de letterstijl of lettergrootte van specifieke rijen, kolommen of cellen in onze tabel wijzigen.

    We richten ons op de inhoud van de laatste kolom op onze pagina (Bedrijven die gebruikmaken van) om de lettertypestijl te wijzigen.

    We zullen alle inhoud in deze kolom cursief maken door de td:last-child class selector te targeten. U kunt de volgende code aan uw CSS-bestand toevoegen;

    td:last-child {

  font-style: italic;

}

    De uiteindelijke uitvoer is als volgt wanneer u de gerenderde pagina opnieuw laadt;

    We kunnen ook de letterkleur en -grootte van de eerste kolom wijzigen om deze uniek te maken.

    Voeg de volgende code toe aan je CSS-bestand;

    tr td:first-child {

    color: red;

    font-size: x-large;

    font-weight: bolder;

  }

    Wanneer u uw pagina weergeeft, zult u het volgende opmerken; de inhoud in de eerste kolom (Taal) heeft een grotere lettergrootte, is rood en vetter.

    Hoe de tabel responsief te maken

    De tabel die we hebben gemaakt, reageert mogelijk niet op kleine schermen. U kunt de hulpprogramma’s voor ontwikkelaars van Chrome of een externe tool zoals deze gebruiken om te testen of uw code reageert.

    Er zijn verschillende benaderingen die u kunt volgen, maar er wordt er slechts één behandeld.

    Volg deze stappen;

    • Stel de breedte van het
      -element in uw code in;
      table {

  width: 100%;

  border-collapse: collapse;

  table-layout: fixed;

}
      • Zet woordafbreking op td en th om lange woorden in de cel te maken. 
      th, td {

    border: 2px solid orange;

    word-break: break-word;

  }

      Best practices voor stylingtabellen

      CSS kan een keer leuk zijn, vooral als je het weet. Dit zijn enkele van de best practices om ervoor te zorgen dat u het beste krijgt bij het stylen van uw tafels;

      • Gebruik een externe stylesheet: we hadden de mogelijkheid om inline styling te gebruiken, maar we kozen voor een externe stylesheet. We hebben onze styling in verschillende tabellen kunnen hergebruiken, waardoor de ontwikkeltijd is verkort.
      • Houd het simpel: u kunt zich laten meeslepen en uw tafels te veel stylen. Houd echter altijd een eenvoudig ontwerp aan en maak uw tabellen scanbaar en leesbaar.
      • Voeg randen toe aan uw tabellen: een rand maakt een tabel gemakkelijk te lezen en te scannen.
      • Gebruik consistente kleuren: als u meerdere tabellen op uw webpagina’s heeft, zorg er dan voor dat u consistente kleuren en lettertypen gebruikt. Het gebruik van uw merkkleuren kan de zichtbaarheid van uw merk verbeteren.
      • Maak uw tafels responsief: u weet misschien nooit de schermgrootte van de apparaten van de eindgebruikers.
      • Gebruik bijschriften om uw tafels te beschrijven: Het bijschrift beschrijft in het kort waar de tafel over gaat.
      • Gebruik witruimte om uw tafels van elkaar te scheiden: Als meerdere tafels elkaar opvolgen, voeg dan wat witruimte toe en onderschrijf ze dienovereenkomstig.

      Conclusie

      Ik geloof dat je nu een eenvoudige HTML-tabel kunt maken en stylen. We hebben misschien niet alles behandeld, aangezien HTML en CSS breed zijn. U kunt kleinere of grotere tabellen maken, afhankelijk van de aard van de gegevens die u wilt vastleggen.

      Bekijk de CSS-spiekbriefjes als u meer wilt weten over CSS en hoe u deze kunt gebruiken om uw gebruikersinterface te verbeteren.

      Your opinion ?
      0
      0
      0
      0
      0
      0
      0

      Related Posts