Inleiding op CSS-tafelstijlen

Waarom we CSS gebruiken, hoewel we HTML-tabellen kunnen gebruiken, is omdat in de HTML-tabel een op tabellen gebaseerde paginalay-out vaak langzamer wordt weergegeven dan een vergelijkbare op CSS gebaseerde lay-out; dit geldt met name voor pagina's met veel inhoud. Tabellen mogen niet worden gebruikt als lay-outhulpmiddelen. En als we HTML-tabellen bouwen zonder stijlen of attributen in de browser, wordt deze zonder rand weergegeven. Een tafel stylen met CSS kan het uiterlijk verbeteren.

CSS-tabellen zijn vrij eenvoudig te begrijpen en te gebruiken. Het is gewoon een kwestie van het onthouden van de overeenkomstige CSS-weergave-eigenschappen voor de elementaire HTML-tabelelementen. Met behulp van CSS zijn we in staat om enkele stijlvolle tafels te maken.

Wat is de CSS-tafelstijl?

Een CSS-tabel (Cascading Style Sheets) beschrijft hoe een set elementen in rijen en kolommen moet worden ingedeeld. De standaard CSS die wordt toegepast op een HTML-tabel is een CSS-tabel.

  • CSS heeft flexibiliteit ontworpen en opnieuw ontworpen.
  • Het betekent dat een op CSS gebaseerde lay-out ervoor zorgt dat u al uw stijlen (dwz van kleine wijzigingen aan de belangrijkste regels) op één locatie plaatst.
  • Door de lay-outregels te wijzigen die u in dat stijlblad instelt, en u beïnvloedt elke pagina die ernaar verwijst.
  • Op CSS gebaseerde paginalay-out verschijnt meestal sneller op het scherm en zelfs de download zal sneller zijn dan de op tabellen gebaseerde lay-out.

CSS-tabelstijleigenschappen

Hieronder staan ​​de verschillende eigenschappen van de CSS-tabelstijlen:

1. Grens instorten

Het wordt gebruikt om aan te geven of de randen rond de cellen van een tabel moeten worden gescheiden of samengevouwen.

Syntaxis: border-collapse: separate|collapse|initial|inherit;

  • Grens samenvouwen: gescheiden: het wordt gebruikt zodat de aangrenzende cellen hun eigen en onafhankelijke randen hebben die niet worden gedeeld.

Syntaxis

border-collapse: separate;

De standaardwaarde die is ingesteld op de eigenschap border collapse, is afzonderlijk. Wanneer ze gescheiden zijn, plaatsen browsers een ruimte van een paar pixels tussen elke cel met behulp van de eigenschap border-spacing.

Code

Output:

  • Border collapse: collapse: telkens wanneer we de border-collapse eigenschap instellen op collapse, wordt de ruimte tussen de cellen verwijderd.

Syntaxis

border-collapse: collapse;

Code

Uitgang:

Zelfs als u deze ruimte elimineert door het cellspacing-kenmerk voor de HTML-tag in te stellen op 0, geven browsers nog steeds dubbele randen weer. Dat wil zeggen dat de onderste rand van een cel boven de bovenste rand van de onderliggende cel verschijnt, waardoor de randen verdubbelen. Als u de eigenschap border-collapse instelt op collapse, wordt zowel de ruimte tussen cellen als deze verdubbeling van borderlines geëlimineerd.

  • Border collapse: initial: Het wordt gebruikt om de border-collapse eigenschap in te stellen op de standaardwaarde.
  • Border collapse: inherit: het wordt gebruikt wanneer border-collapse eigenschap van de bovenliggende elementen erft. Deze eigenschap werkt alleen wanneer toegepast op een label.

    Waarden: instorten, scheiden, aanvankelijk, erven;

    2. Randafstand

    Het stelt de ruimte naast de randen en de inhoud rondom de tabel in. Het lijkt op de celruimte van de tag

    kenmerk, behalve dat het een optionele tweede waarde heeft. Deze eigenschap werkt alleen wanneer toegepast op een
    label.

    Syntaxis

    border-spacing: Length|initial|inherit;

    De grensafstand neemt meestal een of twee lengtewaarden aan. Hierin wordt slechts één waarde opgegeven, die vervolgens de horizontale en verticale afstand tussen cellen definieert.

    Code

    Output:

    Als hier twee waarden worden opgegeven, definieert de eerste waarde de horizontale afstand tussen cellen (de ruimte aan weerszijden van elke cel) en definieert de tweede waarde de verticale afstand tussen cellen. (de ruimte die de onderkant van een cel scheidt van de bovenkant van de cel eronder).

    3. Bijschrift-kant

    De eigenschap bijschriftzijde geeft de plaatsing van een tabelbijschrift aan. Wanneer toegepast op een tabelbijschrift, bepaalt deze eigenschap of het bijschrift boven of onder aan de tabel wordt weergegeven. Normaal verschijnt een bijschrift bovenaan de tabel.

    Syntaxis

    caption-side: top|bottom|initial|inherit;

    Deze eigenschap kan een van de vier waarden hebben:

    • Bijschrift: boven: dit is de standaardwaarde. Hierin wordt het bijschrift boven de tabel geplaatst.

    Syntaxis: caption-side:top;

    Code

    Output:

    • Bijschriftzijde: onder: plaatst het bijschrift onder de tabel.

    Syntaxis: caption-side:bottom;

    Code

    Output:

    • Bijschrift: initiaal: het wordt gebruikt om de eigenschap in te stellen op de standaardwaarde.
    • Bijschrift: erven: neemt deze eigenschap over van het bovenliggende element.

    Waarden: boven, onder, initieel, erven;

    4. Lege cellen

    Het vertelt de browser of deze een tabelcel moet weergeven die helemaal leeg is. Het bepaalt de weergave van de randen en de achtergrond van de cellen die geen zichtbare inhoud hebben in een tabel die het gescheiden randen-model gebruikt.

    Syntaxis: empty-cells: show|hide|initial|inherit;

    Deze eigenschap kan een van de vier waarden hebben:

    • Lege cel: show: deze eigenschap wordt gebruikt om de randen van de lege cel weer te geven.

    Syntaxis: empty-cells: show;

    Code

    Output:

    • Lege cel: verbergen: deze eigenschap wordt gebruikt om de randen in de lege cel te verbergen.

    Syntaxis: empty-cells: hide;

    Code

    Output:

    • Lege cel: eerste : hiermee wordt de eigenschap ingesteld op de standaardwaarde.
    • Lege cel: erven: neemt deze eigenschap over van het bovenliggende element.

    Waarden: tonen, verbergen, aanvankelijk, erven;

    5. Tabelindeling

    Bepaalt hoe een webbrowser een tabel tekent en kan de snelheid waarmee de browser deze weergeeft enigszins beïnvloeden. Deze eigenschap kan een van de vier waarden hebben.

    Syntaxis: table-layout: auto|fixed|initial|inherit;

    De standaard eigenschap is auto.

    1. Tabelindeling: auto: de auto zorgt ervoor dat de breedte van de elementen automatisch wordt aangepast aan de inhoud.

    2. Tabel - lay-out: vast : de vaste instelling dwingt de browser alle kolommen dezelfde breedte te geven als de kolommen in de eerste rij. Als de inhoud breder wordt dan de eerste rij, wordt de inhoud ingepakt, afgekapt of uitgebreid buiten de cellen.

    Code

    Output:

    3. Tabelindeling: initieel: hiermee wordt de eigenschap ingesteld op de standaardwaarde.

    4. Tabelindeling : erven: neemt deze eigenschap over van het bovenliggende element.

    Conclusie

    Met behulp van CSS kunnen we stijlvolle tafels maken en het uiterlijk van de tafel verbeteren.

    Aanbevolen artikelen

    Dit is een gids voor CSS Table Styling. Hier bespreken we eigenschappen met codes, uitgangen en syntaxis van CSS-tabelstyling. U kunt ook door onze gegeven artikelen gaan voor meer informatie -

    1. Voordelen van CSS
    2. Gebruik van CSS
    3. Inleiding tot CSS
    4. CSS-tekstopmaak

    Categorie:

    Web ontwikkelingstools