HTML lentelės žyma naudojamas duomenims rodyti lentelės pavidalu (eilutė * stulpelis). Iš eilės gali būti daug stulpelių.

Mes galime sukurti lentelę, kad būtų rodomi duomenys lentelės pavidalu, naudodami

Kiekvienoje lentelėje lentelės eilutė apibrėžiamažymą, lentelės antraštę apibrėžia, o lentelės duomenis apibrėžiažymės.

HTML lentelės naudojamos puslapio maketui tvarkyti pvz. antraštės skiltis, naršymo juosta, turinio turinys, poraštės skiltis ir t. t. Tačiau rekomenduojama naudoti „div“ žymą virš lentelės, kad galėtumėte valdyti puslapio išdėstymą .

HTML lentelės žymos

HTML lentelės pavyzdys

Pažiūrėkime HTML lentelės žymos pavyzdį. Jo išvestis parodyta aukščiau.

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

Išvestis:

tokios svetainės kaip coomeet

Aukščiau pateiktoje html lentelėje yra 5 eilutės ir 3 stulpeliai = 5 * 3 = 15 reikšmių.

HTML lentelė su apvadu

Yra du būdai, kaip nurodyti kraštinę HTML lentelėms.

1. Pagal lentelės kraštinės atributą HTML
2. Pagal pasienio nuosavybę CSS

1) HTML Border atributas

Norėdami nurodyti kraštinę, HTML galite naudoti lentelės žymos border atributą. Bet dabar tai nerekomenduojama.

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

Išvestis:

2) CSS Border nuosavybė

Dabar rekomenduojama naudoti CSS border ypatybę, kad lentelėje nurodytumėte kraštą.

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

Galite sutraukti visas sieneles vienoje kraštinėje naudodami sienų sutraukimo ypatybę. Tai sugrius sieną į vieną.

skruzdė prieš žvėrį

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

Išvestis:

HTML lentelė su langelių užpildymu

Galite nurodyti lentelės antraštės ir lentelės duomenų užpildymą dviem būdais:

1. Naudojant lentelės cellpadding atributą HTML
2. Užpildydami nuosavybę CSS

HTML lentelės žymos cellpadding atributas dabar yra pasenęs. Rekomenduojama naudoti CSS. Taigi pažiūrėkime CSS kodą.

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

Išvestis:

HTML lentelės plotis:

HTML lentelės plotį galime nurodyti naudodami CSS plotis nuosavybė. Jis gali būti nurodytas pikseliais arba procentais.

Mes galime pakoreguoti savo stalo plotį pagal savo reikalavimus. Toliau pateikiamas lentelės pločio rodymo pavyzdys.

 table{ width: 100%; } 

Pavyzdys:

 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> 

Išvestis:

HTML lentelė su colspan

Jei norite, kad langelis apimtų daugiau nei vieną stulpelį, galite naudoti atributą colspan.

Jis padalins vieną langelį / eilutę į kelis stulpelius, o stulpelių skaičius priklausys nuo atributo colspan reikšmės.

Pažiūrėkime pavyzdį, kuris apima du stulpelius.

CSS kodas:

xdxd prasmė

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

HTML kodas:

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

Išvestis:

HTML lentelė su eilučių intervalu

Jei norite, kad langelio apimtis būtų daugiau nei viena eilutė, galite naudoti atributą rowspan.

Jis padalins langelį į kelias eilutes. Padalytų eilučių skaičius priklausys nuo eilučių intervalo verčių.

Pažiūrėkime pavyzdį, kuris apima dvi eilutes.

CSS kodas:

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

HTML kodas:

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

Išvestis:

HTML lentelė su antrašte

HTML antraštė rodoma virš lentelės. Jis turi būti naudojamas tik po lentelės žymos.

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

HTML lentelės lyginių ir nelyginių langelių stilius

CSS kodas:

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

Išvestis:

PASTABA: Taip pat galite kurti įvairių tipų lenteles naudodami skirtingas lentelės CSS ypatybes.

Palaikomos naršyklės

Elementas	Chrome	T.Y	Firefox	Opera	Safari
	Taip	Taip	Taip	Taip	Taip