HTML-TABELL - HTML OPPLÆRING

HTML-tabell-tag brukes til å vise data i tabellform (rad * kolonne). Det kan være mange kolonner på rad.

Vi kan lage en tabell for å vise data i tabellform ved å bruke

element, ved hjelp av,

, og	elementer.

I hver tabell er tabellrad definert avtag, tabelloverskrift er definert av, og tabelldata er definert avtagger.

HTML-tabeller brukes til å administrere layouten på siden f.eks. topptekstdel, navigasjonslinje, brødtekstinnhold, bunntekstseksjon osv. Men det anbefales å bruke div-tag over tabell for å administrere layouten på siden .

HTML-tabellkoder

stikkord

Beskrivelse

Den definerer en tabell.

Den definerer en rad i en tabell.

Den definerer en overskriftscelle i en tabell.

Den definerer en celle i en tabell.

Den definerer tabellteksten.

Den spesifiserer en gruppe med én eller flere kolonner i en tabell for formatering.

Den brukes med element for å spesifisere kolonneegenskaper for hver kolonne.

Den brukes til å gruppere kroppsinnholdet i en tabell.

Den brukes til å gruppere topptekstinnholdet i en tabell.

Den brukes til å gruppere bunntekstinnholdet i en tabell.

Eksempel på HTML-tabell

La oss se eksempelet på HTML-tabelltaggen. Utgangen er vist ovenfor.

 <table class="table"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table>

Test det nå

Produksjon:

separat streng i java

Fornavn	Etternavn	Merker
Sonoo	Jaiswal	60
James	William	80
Swati	Sironi	82
Bevegelse	Singh	72

I html-tabellen ovenfor er det 5 rader og 3 kolonner = 5 * 3 = 15 verdier.

HTML-tabell med kantlinje

Det er to måter å angi kantlinje for HTML-tabeller på.

Etter grenseattributt til tabell i HTML
Etter grenseeiendom i CSS

1) HTML Border-attributt

Du kan bruke border attribute for table tag i HTML for å spesifisere kant. Men det anbefales ikke nå.

 <table class="table"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table>

Test det nå

Produksjon:

Fornavn	Etternavn	Merker
Sonoo	Jaiswal	60
James	William	80
Swati	Sironi	82
Bevegelse	Singh	72

2) CSS Border-eiendom

Det anbefales nå å bruke grenseegenskapen til CSS for å spesifisere kant i tabellen.

 table, th, td { border: 1px solid black; }

Test det nå

Du kan skjule alle grensene i én kant ved hjelp av grensekollapseegenskap. Det vil kollapse grensen til en.

skjær java

 table, th, td { border: 2px solid black; border-collapse: collapse; }

Test det nå

Produksjon:

Navn	Etternavn	Merker
Sonoo	Jaiswal	60
James	William	80
Swati	Sironi	82
Bevegelse	Singh	72

HTML-tabell med cellefylling

Du kan spesifisere utfylling for tabelloverskrift og tabelldata på to måter:

Ved cellpadding attributt for tabell i HTML
Ved å utfylle eiendom i CSS

Cellpadding-attributtet til HTML-tabelltaggen er foreldet nå. Det anbefales å bruke CSS. Så la oss se koden til CSS.

 table, th, td { border: 1px solid pink; border-collapse: collapse; } th, td { padding: 10px; }

Test det nå

Produksjon:

Navn	Etternavn	Merker
Sonoo	Jaiswal	60
James	William	80
Swati	Sironi	82
Bevegelse	Singh	72

HTML-tabellbredde:

Vi kan spesifisere HTML-tabellbredden ved å bruke CSS-bredde eiendom. Det kan spesifiseres i piksler eller prosent.

Vi kan justere bordbredden i henhold til våre krav. Følgende er eksempelet for å vise tabell med bredde.

 table{ width: 100%; }

Eksempel:

 table table{ border-collapse: collapse; width: 100%; } th,td{ border: 2px solid green; padding: 15px; } <table class="table"> <tr> <th>1 header</th> <th>1 header</th> <th>1 header</th> </tr> <tr> <td>1data</td> <td>1data</td> <td>1data</td> </tr> <tr> <td>2 data</td> <td>2 data</td> <td>2 data</td> </tr> <tr> <td>3 data</td> <td>3 data</td> <td>3 data</td> </tr> </table>

Test det nå

Produksjon:

HTML-tabell med colspan

Hvis du vil at en celle skal spenne over mer enn én kolonne, kan du bruke colspan-attributtet.

Det vil dele en celle/rad i flere kolonner, og antall kolonner avhenger av verdien av colspan-attributtet.

La oss se eksemplet som spenner over to kolonner.

CSS-kode:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; }

HTML-kode:

 <table class="table"> <tr> <th>Name</th> <th>Mobile No.</th> </tr> <tr> <td>Ajeet Maurya</td> <td>7503520801</td> <td>9555879135</td> </tr> </table>

Test det nå

Produksjon:

Navn	Mobilnr.
Ajeet Maurya	7503520801	9555879135

HTML-tabell med radspenn

Hvis du vil lage en cellespenning over mer enn én rad, kan du bruke rowspan-attributtet.

Det vil dele en celle i flere rader. Antall delte rader vil avhenge av radspennverdier.

La oss se eksemplet som spenner over to rader.

CSS-kode:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; }

HTML-kode:

 <table class="table"> <tr><th>Name</th><td>Ajeet Maurya</td></tr> <tr><th>Mobile No.</th><td>7503520801</td></tr> <tr><td>9555879135</td></tr> </table>

Test det nå

Produksjon:

sammenlignbar liste

Navn	Ajeet Maurya
Mobilnr.	7503520801
9555879135

HTML-tabell med bildetekst

HTML-teksting vises over tabellen. Den må kun brukes etter tabellmerke.

 <table class="table"> Student Records <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr> <tr><td>Mike</td><td>Warn</td><td>60</td></tr> <tr><td>Shane</td><td>Warn</td><td>42</td></tr> <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr> </table>

Test det nå

Styling HTML-tabell partall og oddetall celler

CSS-kode:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } table#alter tr:nth-child(even) { background-color: #eee; } table#alter tr:nth-child(odd) { background-color: #fff; } table#alter th { color: white; background-color: gray; }

Test det nå

Produksjon:

MERK: Du kan også lage ulike typer tabeller ved å bruke forskjellige CSS-egenskaper i tabellen.

Støtter nettlesere

Element

Chrome

DVS

Firefox

Opera

Safari