CSS Center Table
Eksempel 01: Opprette en tabell midt på websiden ved å bruke stilkoden CSS i en HTML -fil
I dette tilfellet vil vi lage en tabell som vil være på linje med sentrum av websiden. Style Tag CSS -metoden vil bli brukt i dette tilfellet. Marginegenskapen vil bli brukt i dette eksemplet for sentralt å justere en tabell i nettleseren vår.
I dette skriptet åpner vi først hodemerket. I hodelappen åpner vi CSS -stilkoden. I stilmerket vil vi gi bordet og dets elementer noen stylingegenskaper. Først vil være grensestørrelse, form og farge; Deretter vil vi gi det litt polstring. På slutten av stilmerket vil vi tilordne "margin" -egenskapen og deretter lukke stilen og hodemerket. Etter dette åpner vi kroppskoden, der vi lager tabellen vår ved hjelp av tabellkoden. Inne i tabellmerket vil vi gi den to sett med rader. I den første raden vil "TH" -merket bli brukt, som vil tilordne overskriften på tabellens kolonne. Så oppretter vi den andre raden med "TR" -merket og gir denne raden noen data for kolonnene ved å bruke "TD" -taggen.
Som vi kan se i utdataene ovenfor, er tabellen rettet mot midten av siden på grunn av margin -bilegenskapen som ble tildelt i filteksten.
Eksempel 02: Bruke inline CSS -teknikk for å justere en tabell i midten av en HTML -side
I dette eksemplet vil vi bruke marginegenskapen med bilfunksjonen, som vil justere tabellen til midten av websiden. Inline CSS -tilnærmingen vil bli brukt i dette eksemplet for å oppnå målet.
I dette skriptet starter vi direkte fra kroppskoden. Vi starter med H1 -taggen for å gi siden en overskrift. Så starter vi tabellkoden der vi vil ringe stil og gi den en grense med dens form, størrelse og farge som eiendom. Da vil vi gi bordet litt polstring, og marginegenskapen med bilfunksjonen vil bli kalt. "TR" -merket vil da bli brukt til å legge til to rader i bordet. Vi bruker "TH" -merket for å gi kolonnen i tabellnavnene og "TD" -merket for å tilordne data til den andre raden i tabellen. Inline CSS -stil nøkkelord vil bli brukt på både "TH" og "TD" -merker for å gi stilistiske funksjoner til tabellkomponentene uavhengig. Stylingegenskapene inkluderer grensen med form, størrelse, farge og polstring.
Etter å ha lagret det forrige skriptet og åpnet det på en hvilken som helst nettleser du ønsker, vil vi få overheadutgangen. Som vi kan se at vi har justert tabellen med midten av siden ved hjelp av den inline CSS -tilnærmingen.
Eksempel 03: Bruke margin-venstre og margin-høyre CSS-egenskaper for å justere en tabell til midten av siden i en HTML-fil
I dette eksemplet vil stilkoden CSS -tilnærmingen bli brukt. Her vil vi lage en tabell som vil være sentrert på siden. Marginegenskapen vil bli skilt i to stykker, venstre og høyre, som deretter vil bli brukt til å stenge en tabell på nettleserens side i dette eksemplet sentralt på vår nettleser i dette eksemplet.
Hodemerket åpnes først i dette skriptet. CSS -stilkoden åpnes i hodemerket. Vi vil gi bordet og dets deler noen stilistiske egenskaper med stilkoden. Borderstørrelsen, formen og fargen kommer først, etterfulgt av polstring. Etter stilmerket vil vi tilordne "margin-høyre" og "margin-venstre" -egenskapene og gi dem prosentvise verdier før du lukker stilen og hodemerkene. Etter det vil vi åpne kroppskoden og begynne med å gi siden en overskrift ved å bruke H1 -taggen. Tabellmerket vil da bli brukt til å konstruere tabellen vår. Vi vil gi den to sett med rader i tabellkoden.
"TH" -merket vil bli brukt i første rad for å tilordne overskriften på tabellens kolonne. Deretter ved å bruke "TR" -merket, oppretter vi den andre raden og bruker "TD" -merket for å fylle kolonnene med data. Etter det vil vi lukke alle taggene og lagre filen for å bevare endringene som vises i nettleseren vår, som vist nedenfor:
Tabellen er på linje med midten av siden, som vist i utgangen over, på grunn av margin-venstre og margin-høyre egenskaper satt i filens overskrift.
Eksempel 04: Bruke margin-venstre og margin-høyre CSS-egenskaper med bilfunksjonen for å justere en tabell til midten av siden
I dette eksemplet vil stilkoden CSS -tilnærmingen bli brukt. Her lager vi et bord som finnes i midten av siden. Marginegenskapen vil bli delt inn i to seksjoner, venstre og høyre, som deretter vil bli brukt til sentralt å justere en tabell i vårt eksempel ved å bruke Auto -funksjonen på nettleserens side.
I dette skriptet åpnes hodemerket først. I hodemerket vil CSS -stilkoden åpnes. Med stilkoden vil vi gi bordet og dets komponenter noen stilistiske egenskaper. Polstringen kommer etter grensestørrelse, form og farge. Før vi lukker stil- og hodemerkene, vil vi legge til "margin-høyre" og "margin-venstre" -egenskapene etter stilkoden og gi dem bilfunksjonen som deres verdi. Tabellmerket vil bli brukt til å bygge vårt bord.
Innenfor tabellmerket vil vi gi den to sett med rader. "TH" -merket vil bli brukt i første rad for å gi kolonnen på vei til bordet. Deretter vil vi ved å bruke "TR" -taggen konstruere den andre raden, og "TD" -merket vil bli brukt til å fylle kolonnene med data med data. Etter det vil vi lukke alle taggene og lagre filen for å bevare endringene som vil være synlige i nettleseren vår.
Fordi margin-venstre og margin-høyre verdier i filens overskrift er satt til Auto, er tabellen rettet mot midten av siden, som vist i utgangen ovenfor.
Konklusjon
Vi diskuterte mange metoder som CSS gir for å justere en tabell i midten av en webside i denne artikkelen. Marginegenskapen ble utforsket og implementert på hypertekstmarkeringsspråket for å oppnå dette fenomenet. Vi brukte marginegenskapen med flere forskjellige egenskaper som ble tildelt, som bilfunksjon og prosentverdier, for å justere tabellen i sentrum. Vi implementerte alle eksemplene på Notisblokkene ++ IDE i denne artikkelen.