En trin-for-trin-guide til at komme i gang med HTML-tabeller

HTML-tabel

Oversigt

Internettet er fyldt med information som fodboldresultater, cricketresultater, lister over medarbejdernavne og e-mail-adresser. HTML-tabeller giver dig mulighed for at få vist oplysninger i det, der almindeligvis kaldes tabulære data.

BEMÆRK: Jeg har allerede tilføjet stylingen ved hjælp af CSS, så mine elementer vil se anderledes ud. Men de vil arbejde på nøjagtig samme måde.
Hvis du vil have dine elementer til at ligne mine, kan du finde min CSS-fil i nedenstående links:
CSS: https://gist.github.com/abhishekjakhar/2ea51dfc0dcf6f6ed0d44ac0e72f9c54

Grundlæggende tabel

Vi kan oprette en HTML-tabel ved hjælp af tabelelementet. Det har et åbnings- og lukningsmærke, og det pakker alle tabelrækker og tabelceller inde i det.

Lad os nu indtaste en tabelrække. Tabeller består af rækker med information, der går på tværs af siden. Et

element bruges til at oprette en tabel række.

Der er dog ikke noget element i tabelskolonnen. Tabelkolonner afhænger af hvor mange tabelceller der er inde i hver række. Et

elementet, det nøjagtige samme antal kolonner, du får inden for din tabel række.

Sådan sammenfattes:

  • : Tabelelementet repræsenterer data i en række rækker og kolonner. Tabeller skal kun bruges til visning af tabeldata og aldrig til sidelayout.
: Tabelradelementet definerer en række celler i en tabel. Tabelrader kan udfyldes med tabelceller og tabelhovederceller.
  • - Tabelhovedelementet (må ikke forveksles med tabeloverskudets celleelement) definerer et sæt rækker, der udgør overskriften på en tabel.
  • - Tabelkropselementet definerer en eller flere rækker, der udgør det primære indhold (eller "krop") i en tabel.tabelhovedelementer (<tråd>) og bordkropselement (<krop>)

    Tabelfodelement

    Vi har et bordhoved og et bordkropselement. Så selvfølgelig er der også et bordfodselement. Men spørgsmålet er, hvad er poenget med bordfodselement, når vi allerede har de bordoverskrifter, der mærker kolonner?

    Generelt skal et sidefodselement indeholde en oversigt over tabellen. Dette kan være nogle slutceller, der indeholder summer, totaler og gennemsnit for hver kolonne. Det kan også indeholde nogle meta-oplysninger såsom ophavsretsoplysninger eller datakilden i en tabel.

    Nu skulle du tro, at bordfoden vil gå i bunden af ​​bordet. Dog skal det faktisk gå lige efter bordhovedelementet og lige før bordkropselementet.

    - Tabelfodselementet definerer et sæt rækker, der sammenfatter kolonnerne i tabellen.bordfod (<tfoot>) element

    Billedtekstelement

    Dette element er dybest set en titel på tabellen, og det skal komme umiddelbart efter åbningstabelkoden. Dette er rart at tilføje, fordi det hurtigt opsummerer, hvad en tabel kan indeholde.

    Nu har vi dækket det væsentlige ved tabelelementer i HTML.

    Du kan lære mere om tabellerne i nedenstående links.

    Jeg håber du har fundet dette indlæg informativt og nyttigt. Jeg vil meget gerne høre din feedback!

    Tak fordi du læste!

    highresolution-wallpapers.net © 2020
    -element bruges til at oprette en tabelcelle. Så dybest set er antallet af elementer, du tilføjer i
    : Tabelcelleelementet indeholder data og repræsenterer en enkelt tabelcelle. Hver bordcelle skal være inde i en tabel række.tabel række (<tr>) og tabel celle (<td>) elementer sammen for at danne en tabel
    Bemærk: elementer har ingen attributter. Hvis du tidligere har arbejdet med tabeller, har du muligvis brugt nogle attributter i fortiden. Dog er de alle nu forældede.

    Tabelhovedelement

    Vi har oprettet en grundlæggende tabel, men det er ikke klart, at vores første række i tabellen faktisk er et forsøg på at markere hver af vores kolonner. Lige nu ser den første række simpelthen ud som en anden række i vores tabel.

    Vi kan bruge et tabeloverskriftselement i hver af disse tre kolonner til at fortælle browseren, søgemaskinecrawlere og skærmlæsere, at dette faktisk er overskrifter og ikke kun almindelige data.

    Nu ændrer vi tabelceller i den første række til en tabeloverskabelsescelle. For at gøre dette erstatter vi

    med .

    Teksten i den første række er dristigere end de andre rækker på grund af <th> -elementet, der bruges inden i den første <tr>

    Bordhoved og krop

    I lighed med strukturen i vores HTML-dokument, hvor vi har et hoved og et organ, kan vi også tilføje et hoved og et legeme til vores bord. Vi vil bestemt ikke bruge de samme HTML-elementer, fordi syntaksen bliver ugyldig. For bordet har vi til hovedet og til kroppen.