HTML tabulas tags tiek izmantots datu attēlošanai tabulas veidā (rinda * kolonna). Rindā var būt daudz kolonnu.

Mēs varam izveidot tabulu datu attēlošanai tabulas veidā, izmantojot

Katrā tabulā tabulas rindu nosakatagu, tabulas galveni nosaka, un tabulas datus definētagus.

HTML tabulas tiek izmantotas, lai pārvaldītu lapas izkārtojumu, piem. galvenes sadaļa, navigācijas josla, pamatteksta saturs, kājenes sadaļa utt. Taču ieteicams izmantot div tagu virs tabulas, lai pārvaldītu lapas izkārtojumu .

HTML tabulas tagi

HTML tabulas piemērs

Apskatīsim HTML tabulas taga piemēru. Tās izvade ir parādīta iepriekš.

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

Izvade:

kā atrast slēptās lietotnes operētājsistēmā Android

Iepriekš minētajā html tabulā ir 5 rindas un 3 kolonnas = 5 * 3 = 15 vērtības.

HTML tabula ar apmali

Ir divi veidi, kā norādīt apmali HTML tabulām.

1. Pēc tabulas apmales atribūta HTML
2. Pēc robežas īpašuma CSS

1) HTML Border atribūts

Varat izmantot tabulas taga atribūtu border atribūtu HTML, lai norādītu apmali. Bet tagad tas nav ieteicams.

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

Izvade:

2) CSS Border īpašums

Tagad ir ieteicams izmantot CSS border rekvizītu, lai tabulā norādītu robežu.

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

Varat sakļaut visas apmales vienā apmalē, izmantojot robežu sakukšanas īpašumu. Tas sagrūs robežu vienā.

primārā atslēga un saliktā atslēga SQL

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

Izvade:

HTML tabula ar šūnu pildījumu

Tabulas galvenes un tabulas datu polsterējumu var norādīt divos veidos:

1. Izmantojot tabulas cellpadding atribūtu HTML
2. Aizpildot īpašumu CSS

HTML tabulas taga atribūts cellpadding tagad ir novecojis. Ieteicams izmantot CSS. Tātad, redzēsim CSS kodu.

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

Izvade:

HTML tabulas platums:

Mēs varam norādīt HTML tabulas platumu, izmantojot CSS platums īpašums. To var norādīt pikseļos vai procentos.

Mēs varam pielāgot galda platumu atbilstoši mūsu prasībām. Tālāk ir sniegts piemērs tabulas attēlošanai ar platumu.

 table{ width: 100%; } 

Piemērs:

 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> 

Izvade:

HTML tabula ar colspan

Ja vēlaties, lai šūna aptvertu vairāk nekā vienu kolonnu, varat izmantot atribūtu colspan.

Tas sadalīs vienu šūnu/rindu vairākās kolonnās, un kolonnu skaits ir atkarīgs no atribūta colspan vērtības.

Apskatīsim piemēru, kas aptver divas kolonnas.

CSS kods:

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

HTML kods:

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

Izvade:

HTML tabula ar rindu diapazonu

Ja vēlaties, lai šūna būtu vairāk nekā viena rinda, varat izmantot atribūtu rowspan.

Tas sadalīs šūnu vairākās rindās. Sadalīto rindu skaits būs atkarīgs no rindu diapazona vērtībām.

java pārtraukums

Apskatīsim piemēru, kas aptver divas rindas.

CSS kods:

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

HTML kods:

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

Izvade:

HTML tabula ar parakstu

HTML paraksts tiek parādīts virs tabulas. To drīkst lietot tikai pēc tabulas atzīmes.

 <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 tabulas pāra un nepāra šūnu veidošana

CSS kods:

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

Izvade:

PIEZĪME. Varat arī izveidot dažāda veida tabulas, savā tabulā izmantojot dažādus CSS rekvizītus.

Atbalsta pārlūkprogrammas

Elements	Chrome	IE	Firefox	Opera	Safari
	Jā	Jā	Jā	Jā	Jā