Denna artikel ger dig en detaljerad och omfattande kunskap om HTML-tabeller. De olika taggarna och formateringen som kan göras.
Sedan den tekniska starten är en tabell ett vanligt sätt att lagra och visualisera data. Den används i nästan alla fält för att presentera textinformation och numerisk data där du enkelt kan jämföra två eller flera element. I den här artikeln kommer jag att diskutera Tabeller i följande ordning:
I enkla ord är en tabell en samling relaterade data som består av rader och kolumner. Nu, som vi vet, är HTML ett standardmarkeringsspråk för att skapa webbsidor och visa det i en webbläsare. Så att skapa och arbeta med tabeller blir en viktig underfärdighet för att behärska HTML. I den här bloggen lär vi oss hur man arbetar med tabeller i HTML.
För att definiera en HTML-tabell använder vi
märka. Inuti
tag definierar du först tabellrader med
märka. Därefter definierar du tabellrubriker i
märka. Data eller cell i tabell definieras med
märka.
HTML-tabelltaggar
Låt oss först titta på listan över HTML-taggar som används för att skapa tabeller. Senare framåt i den här bloggen lär vi oss hur man använder dem med hjälp av exempel.
: Används för att definiera en tabell
: Används för att definiera en rubrikcell i en tabell
: Används för att definiera en rad i en tabell
: Används för att definiera en cell i en tabell
:Används för att definiera en tabelltext
:Används för att ange en grupp med en eller flera kolumner i en tabell för formatering
: Används för att ange kolumnegenskaper för varje kolumn i ett element
:Används för att gruppera rubrikinnehållet i en tabell
: Används för att gruppera kroppsinnehållet i en tabell
: Används för att gruppera sidfotsinnehållet i en tabell
Låt oss nu titta på HTML-koden för att skapa en tabell.
namn
Ålder
Abhishek
18
Guppa
2. 3
Produktion:
Variationer av HTML-tabell
Attribut för cellfyllning och cellavstånd
Det finns två attribut som kallas cellfyllning och cellavstånd som du kan använda för att justera det vita utrymmet i dina bordsceller. Cellavståndsattributet definierar utrymme mellan tabellceller, medan cellfyllning representerar avståndet mellan cellgränser och innehållet i en cell.
Cellutrymme och cellfyllning
namn
Ålder
Abhishek
femton
Guppa
2. 3
Attribut Colspan och Rowspan
Colspan-attribut används för att slå samman två eller flera kolumner, medan raderna används för att slå samman två eller flera rader.
Colspan & Rowspan
Omgång
namn
Ålder
Datavetenskap
Abhishek
femton
Guppa
2. 3
Ha sönder
Bordets höjd och bredd
HTML ger dig möjlighet att justera bordets höjd och bredd. Breddattribut & höjdattribut används för att ställa in bredden och höjden på tabellen. Du kan antingen ange den i procent av tillgängligt område på skärmen eller i form av pixlar.
Ett bord kan delas in i tre sektioner, dvs. ett sidhuvud, en kropp och ett sidfot. Sidhuvud och sidfot liknar sidhuvud och sidfot i ett orddokument som förblir vanligt för varje sida, medan brödtexten innehåller huvudinnehållet.
tag skapar separat tabellrubrik, varvid tag skapar en separat tabellfot. taggar innehåller tabellens huvuddel.
Du kan också ställa in en tabellbakgrund. Bgfärg attribut anger bakgrundsfärgen för hela tabellen såväl som för en cell, medan bakgrundsattribut anger en bakgrundsbild för hela tabellen såväl som bara för en cell.
Bildtextetiketten fungerar som en titel eller förklaring till tabellen som visas högst upp i tabellen.
HTML-tabellbakgrund
Tabelltextning
Kolumn 1
Kolumn 2
Kolumn 3
Rad 1 Cell 1
Rad 1 Cell 2
Rad 1 Cell 3
Rad 2 Cell 2
Rad 2 Cell 3
Rad 3 Cell 1
Med detta kommer vi till ett slut på den här artikeln. Efter att ha kört ovanstående utdrag skulle du ha förstått hur man skapar tabeller i HTML. Jag hoppas att den här bloggen är informativ och ger ett mervärde för dig.
Kolla inav Edureka, ett pålitligt online-lärande företag med ett nätverk av mer än 250 000 nöjda elever spridda över hela världen.Webbutvecklingscertifieringsträning hjälper dig att lära dig att skapa imponerande webbplatser med HTML5, CSS3, Twitter Bootstrap 3, jQuery och Google API: er och distribuera den till Amazon Simple Storage Service (S3).
Har du en fråga till oss? Vänligen nämna det i kommentarsektionen i den här artikeln så återkommer vi till dig.