Introduksjon om HTML-tabellkoder

HTML-tabellen gir en måte å utlede eller definere data som tekst, bilder, lenker osv. Når det gjelder rader og kolonner med celler. HTML-tabellene kan opprettes ved å bruke

stikkord. Som standard er tabelldataene på linje. I dette emnet skal vi lære om HTML-tabellkoder.

Tabellen kan opprettes ved å bruke

tags.

  • De
tag angir tabellradene som brukes til å lage en rad.

Tabelldataene kan struktureres i

, , og
tag definerer en overskrift for tabellen.
  • De
    		• tag angir tabelldatacellene som brukes til å lage kolonnen.
  • De
    • innholdet i tabellen
    med mange bordelementer.

    syntax














    Tabelloverskrift 1Tabelloverskrift 2
    Datacelle 1Datacelle 2
    Datacelle 3Datacelle 4

    Eksempler på HTML-tabellkoder

    Her er eksemplene på HTML-tabellkoder gitt nedenfor

    1. Grunnleggende tabellbruk



    HTML Table Tag Usage


















    NavnLand
    DhoniIndia
    David MillerSør-Afrika
    Joe RootEngland

    Lagre koden med .html-utvidelsen og åpne den i nettleseren. Den vil vise følgende utgang:

    2. Tabelltekst

    Bildeteksten for tabellen kan spesifiseres ved å bruke taggen < bildetekst > .

    Eksempel



    HTML Table Tag Usage


    Dette er tabelltekst
















    NavnLand
    DhoniIndia
    David MillerSør-Afrika
    Joe RootEngland

    Ovenstående kode vil vise utdata nedenfor:

    3. Tabellcelleavstand

    Plassen til tabellcellene kan defineres ved å bruke attributtet celleavstand. Celleavstand-attributtet spesifiserer mellomrommet mellom tabellceller.

    Eksempel



    HTML Table Tag Usage


















    NavnLand
    DhoniIndia
    David MillerSør-Afrika
    Joe RootEngland

    Koden ovenfor viser følgende utdata:

    4. Polstring av tabellceller

    Polstringen av tabellcellene kan defineres ved å bruke attributtet cellpadding. Cellpadding-attributtet avstand mellom tabellcellegrense og data.

    Eksempel



    HTML Table Tag Usage


















    NavnLand
    DhoniIndia
    David MillerSør-Afrika
    Joe RootEngland

    Ovenstående kode vil vise utdata nedenfor:

    5. Attributter for kolonne og radspenn

    De to eller flere tabellradene kan slås sammen til en enkelt rad ved å bruke attributt for radspan, og tabellkolonner kan slås sammen til en enkelt kolonne ved å bruke et kolspanattributt.

    Eksempel



    HTML Table Tag Usage



















    Kolonne énKolonne toKolonne tre
    Rad enRad toRad tre
    Rad fireRad fem
    Rad seks

    Koden viser følgende utdata:

    6. Bakgrunn for tabellen

    Bakgrunnen til tabellen kan opprettes ved å bruke attributten bgcolor. Tabellcellegrensen kan spesifiseres ved å bruke attributtet border-color.

    Eksempel



    HTML Table Tag Usage


















    NavnLand
    DhoniIndia
    David MillerSør-Afrika
    Joe RootEngland

    Utfør koden ovenfor, og den vil vise utdata nedenfor:

    7. Bordets høyde og bredde

    Høyden og bredden på bordet kan stilles inn ved å bruke bredde- og høydeattributter.

    Eksempel



    HTML Table Tag Usage


















    NavnLand
    DhoniIndia
    David MillerSør-Afrika
    Joe RootEngland

    Koden ovenfor viser følgende utdata:

    8. Styling av bordceller

    Eksempel



    HTML Table Tag Usage

    table, th, td (
    border: 1px solid red;
    border-collapse: collapse;
    )
    th, td (
    padding: 15px;
    )
    table#mytable tr:nth-child(even) (
    background-color: #FAD7A0;
    )
    table#mytable tr:nth-child(odd) (
    background-color: #E67E22;
    )
    table#mytable th (
    color: white;
    background-color: teal;
    )


















    NavnLand
    DhoniIndia
    David MillerSør-Afrika
    Joe RootEngland

    Utfør koden ovenfor, og du får utdata nedenfor:

    8. Heklede tabeller

    Du kan bruke en tabell i et annet bord som kalles et nestet bord.

    La oss vurdere eksemplet nedenfor for den nestede tabellen:

    Eksempel



    HTML Table Tag Usage























    NavnLand
    DhoniIndia
    David MillerSør-Afrika
    Joe RootEngland

    Koden ovenfor viser følgende utdata:

    Attributter for tabellen

    • justere: Dette attributtet gir justering av innhold i et element.
    • bgcolor: Dette attributtet spesifiserer bakgrunnsfargen for tabellen.
    • border: Dette attributtet spesifiserer grensen for tabellcellene.
    • cellpadding: Dette attributtet viser polstring mellom tabellceller og tabellinnhold.
    • celleavstand: Dette attributtet viser mellomrommet mellom tabellceller.
    • ramme: Den spesifiserer hvilke deler av yttergrensene som er synlige.
    • regler: Denne spesifiserer hvilke deler av de indre grensene som er synlige.
    • sorterbar: Dette attributtet informerer om at tabellen er sorterbar.
    • sammendrag: Den gir hvilken type tabellinnhold som er til stede.
    • bredde: Dette attributtet forteller bredden på tabellen.
    • høyde: Dette attributtet spesifiserer høyden på tabellen.

    Konklusjon

    Så langt har vi studert de forskjellige typene tabellkoder i HTML. Eksemplene har vist bruken av å style bordet, hekke et bord i et annet bord, sette høyden og bredden på bordet, legge til avstand og polstring for tabellcellene, bruke bakgrunnsfarge på bordet og mange flere.

    Anbefalte artikler

    Dette er en guide til HTML-tabellkoder. Her diskuterer vi eksemplene på HTML-tabellmerker med syntaks og attributter for tabellen. Du kan også se på følgende artikler for å lære mer -

    1. HTML-skjemaelementer
    2. Lag tabeller i HTML
    3. HTML Image Tags
    4. Hva er HTML
    5. HTML-rammer
    6. HTML-blokker
    7. Angi en bakgrunnsfarge i HTML med eksempel

    Kategori:

    Nettutviklingsverktøy