TechCodeview

HTML-tabelltagg används för att visa data i tabellform (rad * kolumn). Det kan finnas många kolumner i rad.

Vi kan skapa en tabell för att visa data i tabellform med hjälp av

I varje tabell definieras tabellrad avtagg, tabellrubrik definieras av, och tabelldata definieras avtaggar.

HTML-tabeller används för att hantera layouten på sidan t.ex. sidhuvud, navigeringsfält, brödtext, sidfot osv. Men det rekommenderas att använda div-tagg över tabell för att hantera sidans layout.

HTML-tabelltaggar

Exempel på HTML-tabell

Låt oss se exemplet med HTML-tabelltagg. Utgången visas ovan.

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

I html-tabellen ovan finns det 5 rader och 3 kolumner = 5 * 3 = 15 värden.

HTML-tabell med kantlinje

Det finns två sätt att ange kantlinje för HTML-tabeller.

1. Efter border-attribut för tabell i HTML
2. Efter gränsegendom i CSS

1) HTML Border-attribut

Du kan använda border-attributet för table-taggen i HTML för att ange kant. Men det rekommenderas inte 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-egenskap

Det rekommenderas nu att använda border-egenskapen för CSS för att specificera border i tabellen.

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

Du kan komprimera alla gränser i en gräns med gräns-kollapsegenskap. Det kommer att kollapsa gränsen till en.

git pull syntax

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

Produktion:

HTML-tabell med cellfyllning

Du kan ange utfyllnad för tabellrubrik och tabelldata på två sätt:

1. Genom cellpadding attribut för tabell i HTML
2. Genom att utfylla egendom i CSS

Cellpadding-attributet för HTML-tabelltaggen är föråldrat nu. Det rekommenderas att använda CSS. Så låt oss se koden för CSS.

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

Produktion:

HTML-tabellbredd:

Vi kan specificera HTML-tabellens bredd med hjälp av CSS bredd fast egendom. Det kan anges i pixlar eller procent.

Vi kan anpassa vårt bords bredd enligt våra krav. Följande är exemplet för att visa tabell med bredd.

 table{ width: 100%; } 

Exempel:

 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-tabell med colspan

Om du vill att en cell spänner över mer än en kolumn kan du använda attributet colspan.

Det kommer att dela en cell/rad i flera kolumner, och antalet kolumner beror på värdet på attributet colspan.

Låt oss se exemplet som spänner över två kolumner.

CSS-kod:

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

HTML-kod:

 <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-tabell med radspann

Om du vill få en cell att spänna över mer än en rad kan du använda attributet rowspan.

Det kommer att dela en cell i flera rader. Antalet delade rader beror på radspansvärden.

Låt oss se exemplet som spänner över två rader.

CSS-kod:

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

HTML-kod:

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

HTML-tabell med bildtext

HTML-textning visas ovanför tabellen. Den får endast användas efter tabelltaggen.

java-sträng till heltal

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

Styling HTML-tabell jämna och udda celler

CSS-kod:

 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:

OBS: Du kan också skapa olika typer av tabeller med olika CSS-egenskaper i din tabell.

Stöd för webbläsare

Element	Krom	IE	Firefox	Opera	Safari
	Ja	Ja	Ja	Ja	Ja