HTML tabel tag bruges til at vise data i tabelform (række * kolonne). Der kan være mange kolonner i en række.

Vi kan oprette en tabel til at vise data i tabelform ved hjælp af

I hver tabel er tabelrækken defineret aftag, tabeloverskrift er defineret af, og tabeldata er defineret aftags.

HTML-tabeller bruges til at styre layoutet på siden f.eks. header sektion, navigationslinje, body content, footer sektion osv. Men det anbefales at bruge div tag over tabel til at styre layoutet på siden.

HTML-tabel-tags

Eksempel på HTML-tabel

Lad os se eksemplet med HTML-tabeltag. Dens output 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> 

Produktion:

java datastrukturer

I ovenstående html-tabel er der 5 rækker og 3 kolonner = 5 * 3 = 15 værdier.

HTML-tabel med kant

Der er to måder at angive grænse for HTML-tabeller.

1. Efter border-attribut for tabel i HTML
2. Ved grænseejendom i CSS

1) HTML Border attribut

Du kan bruge border attribut for table tag i HTML til at specificere kant. Men det anbefales ikke nu.

 <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> 

Produktion:

2) CSS Border ejendom

Det anbefales nu at bruge grænseegenskaber for CSS til at angive grænse i tabellen.

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

Du kan skjule alle grænser i én kant ved at skjule egenskaben. Det vil kollapse grænsen til én.

css-justeringsbilleder

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

Produktion:

HTML-tabel med celleudfyldning

Du kan angive udfyldning for tabelhoved og tabeldata på to måder:

1. Ved cellpadding attribut for tabel i HTML
2. Ved at udfylde ejendom i CSS

Cellpadding-attributten for HTML-tabeltag er forældet nu. Det anbefales at bruge CSS. Så lad os se koden for CSS.

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

Produktion:

HTML-tabelbredde:

Vi kan angive HTML-tabellens bredde ved hjælp af CSS bredde ejendom. Det kan angives i pixels eller procent.

Vi kan justere vores bordbredde efter vores krav. Følgende er eksemplet for at vise tabel 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> 

Produktion:

HTML-tabel med colspan

Hvis du ønsker at få en celle til at spænde over mere end én kolonne, kan du bruge colspan-attributten.

Det vil opdele en celle/række i flere kolonner, og antallet af kolonner afhænger af værdien af ​​colspan-attributten.

Lad os se eksemplet, der spænder 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> 

Produktion:

HTML-tabel med rækkevidde

Hvis du ønsker at få en celle til at spænde over mere end én række, kan du bruge rowspan-attributten.

Det vil opdele en celle i flere rækker. Antallet af opdelte rækker vil afhænge af rækkeviddeværdier.

Lad os se eksemplet, der spænder over to rækker.

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> 

Produktion:

pd flette

HTML-tabel med billedtekst

HTML billedtekst vises over tabellen. Det må kun bruges efter tabelmærke.

 <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> 

Style HTML-tabel lige og ulige 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; } 

Produktion:

BEMÆRK: Du kan også oprette forskellige typer tabeller ved hjælp af forskellige CSS-egenskaber i din tabel.

Understøtter browsere

Element	Chrome	IE	Firefox	Opera	Safari
	Ja	Ja	Ja	Ja	Ja