HTML เคช्เคฐेเค्เคिเคเคฒ - เคेเคฌเคฒ เคा เคช्เคฐเคฏोเค เคैเคธे เคเคฐें?
HTML Practical - How to Create Table?
เคตेเคฌ เคกिเคाเคเคจ เคตिเคฆ เคเคเคीเคเคฎเคเคฒ เคช्เคฐेเค्เคिเคเคฒ | เคेเคฌเคฒ เคैเค्เคธ เคा เคช्เคฐเคฏोเค
Web Design with HTML Practical - Using Table Tags
Objective : เคเคเคीเคเคฎเคเคฒ เคेเคฌเคฒ (Table) เคैเค्เคธ เคा เคช्เคฐเคฏोเค
เคตेเคฌ เคกिเคाเคเคจ เคเคเคीเคเคฎเคเคฒ เคช्เคฐोเค्เคฐाเคฎिंเค เคे เคช्เคฐेเค्เคिเคเคฒ เคช्เคฐाเคฏोเคिเค เคाเคฐ्เคฏ เคे เคฆ्เคตाเคฐा เคเคเคीเคเคฎเคเคฒ เคฎें เคेเคฌเคฒ เคा เคช्เคฐเคฏोเค เคैเคธे เคเคฐें เคธीเคेंเคे:
เคเคเคीเคเคฎเคเคฒ เคฎें เคेเคฌเคฒ เคฌเคจाเคจे เคे เคฒिเค เคตिเคญिเคจ्เคจ เคैเค्เคธ เคो เคเค เคธाเคฅ เคช्เคฐเคฏोเค เคฎें เคฒाเคฏा เคाเคคा เคนै। เคैเคธे เคेเคฌเคฒ เคธ्เคाเคฐ्เค เคเคฐเคจे เคे เคฒिเค <Table>, เคेเคฌเคฒ เคฐो เคे เคฒिเค <tr>,เคेเคฌเคฒ เคกाเคा เคे เคฒिเค <td> เคเคฆि।
HTML เคฎें เคฎुเค्เคฏ เคฐूเคช เคธे เคจिเคฎ्เคจ เคैเค เคा เคช्เคฐเคฏोเค เคेเคฌเคฒ เคฌเคจाเคจे เคे เคฒिเค เคिเคฏा เคा เคธเคเคคा เคนै।
➥ เคेเคฌเคฒ เคैเค (Table Tag) : <table> ........</table>
➥ เคेเคฌเคฒ เคฐो (Table Row) : <tr> ........</tr>
➥ เคेเคฌเคฒ เคกाเคा (Table Data) : <td> ........</td>
➥ เคेเคฌเคฒ เคนेเคกिंเค (Table Heading) : <th> ........</th>
➥ เคैเคช्เคถเคจ (Caption) : <caption> ........</caption>
Requirements : (Tools / Equipments / Instruments)
เคชเคฐ्เคธเคจเคฒ เคंเคช्เคฏूเคเคฐ / เคฎाเคเค्เคฐोเคธॉเคซ्เค เคตिंเคกोเค / เคจोเคเคชैเคก / เคตेเคฌ เคฌ्เคฐाเคเฅเคฐ
เคเคเคीเคเคฎเคเคฒ เคเคฐ्เคกเคฐ เคฒिเคธ्เค เคा เคช्เคฐเคฏोเค | Using Ordered List in HTML
HTML เคฎें เคेเคฌเคฒ เคฒिเคธ्เค เคा เคช्เคฐเคฏोเค เคเคฐเคจे เคे เคฒिเค เคจिเคฎ्เคจाเคจुเคธाเคฐ เคธ्เคेเคช्เคธ เคช्เคฐเคฏोเค เคीเคिเค।
เคตिंเคกोเค เคे เคจोเคेเคชेเคก เคช्เคฐोเค्เคฐाเคฎ เคो เคเคชเคจ เคीเคिเค
START > ALL PROGRAMS > ACCESSORIES > NOTEPAD
เคจोเคเคชैเคก เคฎें เคจिเคฎ्เคจाเคจुเคธाเคฐ เคोเคก เคाเคเคช เคीเคिเค।
เคซाเคเคฒ เคो เคธेเคต เคीเคिเค। HTML File เคो เคธेเคต เคเคฐเคจे เคे เคฒिเค เคी-เคฌोเคฐ्เคก เคธे Ctrl + S เคฆเคฌाเคं। SaveAs เคกाเคฏเคฒॉเค เคฌॉเค्เคธ เคฎें เคซाเคเคฒ เคे เคจाเคฎ เคे เคธाเคฅ เคเค्เคธเคेंเคถเคจ เคे เคฐूเคช เคฎें HTML เค เคตเคถ्เคฏ เคฒिเคें. เคैเคธे table.html เคเคฐ Save as type : เคเคช्เคถเคจ เคชเคฐ เคจिเคฎ्เคจाเคจुเคธाเคฐ All Files เคธेเคฒेเค्เค เคเคฐ Save เคฌเคเคจ เคชเคฐ เค्เคฒिเค เคीเคिเค।
เคซाเคเคฒ เคो เคोเคฒเคจे เคे เคฒिเค เคฎाเคเคธ เคธे เคกเคฌเคฒ เค्เคฒिเค เคीเคिเค। เคเคชเคी เคซाเคเคฒ เคเคชเคे เคกिเฅॉเคฒ्เค เคฌ्เคฐाเคเฅเคฐ เคฎें เคเคชเคจ เคนो เคाเคเคी। เคฏเคน เคเคธ เคช्เคฐเคाเคฐ เคฆिเคाเค เคฆेเคी।
เคเคเคीเคเคฎเคเคฒ เคเคจเคฒाเคเคจ เคช्เคฐेเค्เคिเคธ – เคेเคฌเคฒ เคैเค เคा เคช्เคฐเคฏोเค
Online HTML Practice - Using Table Tag in HTML
HTML เคช्เคฐोเค्เคฐाเคฎ เคी เคเคจเคฒाเคเคจ เคช्เคฐैเค्เคिเคธ เคจीเคे เคฆिเค เคเค เคोเคก เคตिंเคกो เคฎें เคเคเคीเคเคฎเคเคฒ เคेเคฌเคฒ เคैเค เคा เคช्เคฐोเค्เคฐाเคฎ เคोเคก เคฒिเค เคเคฐ เคेเคฌเคฒ เคฌเคจा เคธเคเคคे เคนैं। เคช्เคฐोเค्เคฐाเคฎ เคोเคก เคा เคเคเคเคชुเค, เคฐिเคเคฒ्เค เคตिंเคกो เคฎें เคช्เคฐเคฆเคฐ्เคถिเคค เคนोเคा।
See the Pen Creating Table HTML Code by ITI COPA (@copaguide) on CodePen.
เคเคเคीเคเคฎเคเคฒ เคช्เคฐैเค्เคिเคเคฒ - เคेเคฌเคฒ เคฎें เคेเคฌเคฒ เคนेเคกिंเค เคैเค्เคธ เคा เคช्เคฐเคฏोเค
Using Table Heading Tags in HTML Tables
เคเคเคीเคเคฎเคเคฒ เคฎें เคिเคธी เคญी เคेเคฌเคฒ เคी เคซเคฐ्เคธ्เค เคฐो (row) เคो เคนेเคกिंเค เคฆेเคจे เคे เคฒिเค เคेเคฌเคฒ เคนेเคกिंเค เคा เคช्เคฐเคฏोเค เคिเคฏा เคाเคคा เคนै, เคเคธเคे เคฒिเค เคชเคนเคฒी เคेเคฌเคฒ เคฐो <tr> เคैเค เคे เคฌाเคฆ เคนेเคกिंเค เคฆेเคจे เคे เคฒिเค <th> เคैเค เคा เคช्เคฐเคฏोเค เคिเคฏा เคाเคคा เคนै। เคिเคธी เคญी เคेเคฌเคฒ เคी เคนेเคกिंเค เค
เคจ्เคฏ เคฐो (row) เคी เคคुเคฒเคจा เคฎें เคฌोเคฒ्เคก เคฆिเคाเค เคฆेเคคी เคนै। <th> Element เคฆ्เคตाเคฐा เคेเคฌเคฒ เคी เคนेเคกिंเค เคो เคกिเคซाเคเคจ เคिเคฏा เคाเคคा เคนै।
HTML เคช्เคฐोเค्เคฐाเคฎ เคी เคเคจเคฒाเคเคจ เคช्เคฐैเค्เคिเคธ เคจीเคे เคฆिเค เคเค เคोเคก เคตिंเคกो เคฎें เคเคเคीเคเคฎเคเคฒ เคेเคฌเคฒ เคी เคชเคนเคฒी เคฐो เคो เคนेเคกिंเค เคฆेเคเคฐ เคेเคฌเคฒ เคนेเคกिंเค เคा เคช्เคฐเคฏोเค เคเคฐ เคธเคเคคे เคนैं। เคช्เคฐोเค्เคฐाเคฎ เคोเคก เคा เคเคเคเคชुเค, เคฐिเคเคฒ्เค เคตिंเคกो เคฎें เคช्เคฐเคฆเคฐ्เคถिเคค เคนोเคा।
See the Pen Table with Heading by ITI COPA (@copaguide) on CodePen.
เคเคเคीเคเคฎเคเคฒ เคेเคฌเคฒ เคฎें เคฌॉเคฐ्เคกเคฐ เคเคตं เคैเคช्เคถเคจ เคा เคช्เคฐเคฏोเค
Using Table Border and Caption in HTML Table
เคธाเคฎाเคจ्เคฏเคคः เคเคเคीเคเคฎเคเคฒ เคฎें เคेเคฌเคฒ เคฌเคจाเค เคाเคจे เคชเคฐ เคเคธเคฎें เคฌॉเคฐ्เคกเคฐ เคจเคนीं เคฆिเคाเค เคฆेเคคा เคนै। เคเคเคीเคเคฎเคเคฒ เคฎें เคेเคฌเคฒ เคฎें เคฌॉเคฐ्เคกเคฐ เคे เคฒिเค เคेเคฌเคฒ เคैเค เคे เคธाเคฅ เคนी เคฌॉเคฐ्เคกเคฐ เคเคฒीเคฎेंเค เคा เคช्เคฐเคฏोเค เคเคฐ เคฌॉเคฐ्เคกเคฐ เคฆिเคฏा เคाเคคा เคนै। เคเคธเคे เคฒिเค <table border="1"> เคैเค เคा เคช्เคฐเคฏोเค เคिเคฏा เคाเคคा เคนै।
เคเคเคीเคเคฎเคเคฒ เคेเคฌเคฒ เคฎें เคฌॉเคฐ्เคกเคฐ เคे เคธाเคฅ เคธाเคฅ เคेเคฌเคฒ เคी เคนाเคเค (height) เคเคตं เคตिเคก्เคฅ (width) เคो เคญी เคเคตเคถ्เคฏเคเคคाเคจुเคธाเคฐ เคชเคฐिเคตเคฐ्เคคिเคค เคिเคฏा เคा เคธเคเคคा เคนै, <table width="600" height="150" > เคा เคช्เคฐเคฏोเค เคเคฐ เคेเคฌเคฒ เคी เคตिเคก्เคฅ เคो 600px เคชिเค्เคธेเคฒ เคเคตं เคนाเคเค เคो 150 px เคเคฐ เคธเคเคคे เคนैं।
เคเคเคीเคเคฎเคเคฒ เคฎें เคेเคฌเคฒ เคैเคช्เคถเคจ เคैเค <caption>Student Table </caption> เคा เคช्เคฐเคฏोเค เคिเคฏा เคाเคคा เคนै। เคเคธ เคैเค เคे เคฌाเคฆ เคฆिเค เคाเคจे เคตाเคฒे เคैเคช्เคถเคจ เคो เคฒिเคा เคाเคคा เคนै, เคเคตं เคเคธ เคैเค เคो เค्เคฒोเฅिंเค เคैเค เคธे เคฌंเคฆ เคिเคฏा เคाเคคा เคนै।
HTML เคช्เคฐोเค्เคฐाเคฎ เคी เคเคจเคฒाเคเคจ เคช्เคฐैเค्เคिเคธ เคे เคฒिเค เคोเคก เคตिंเคกो เคฎें เคเคเคीเคเคฎเคเคฒ เคेเคฌเคฒ เคฌॉเคฐ्เคกเคฐ, เคนाเคเค เคเคตं เคตिเคก्เคฅ เคคเคฅा เคैเคช्เคถเคจ เคा เคช्เคฐเคฏोเค เคเคฐเคे เคฆेเคें। เคช्เคฐोเค्เคฐाเคฎ เคोเคก เคा เคเคเคเคชुเค, เคฐिเคเคฒ्เค เคตिंเคกो เคฎें เคช्เคฐเคฆเคฐ्เคถिเคค เคนोเคा।
See the Pen Table Border HTML Code by ITI COPA (@copaguide) on CodePen.
➥ เคเคเคीเคเคฎเคเคฒ เคेเคฌเคฒ เคฌॉเคฐ्เคกเคฐ เคे เคฒिเค เคตिเคญिเคจ्เคจ เคเคช्เคถเคจ เคैเคธे <table border="2", <table border="3" เคเคตं <table border="4" เคा เคช्เคฐเคฏोเค เคเคฐ เคเคเคเคชुเค เคฐिเคเคฒ्เค เคตिंเคกो เคฎें เคฆेเคें।
➥ เคเคเคीเคเคฎเคเคฒ เคฎें เคेเคฌเคฒ เคी เคนाเคเค (height) เคเคตं เคตिเคก्เคฅ (width) เคो เค
เคฒเค เค
เคฒเค เคธाเคเฅ เคฎें เคฌเคฆเคฒ เคเคฐ เคैเคธे <table width="400" height="200"> เคเคเคเคชुเค เคฐिเคเคฒ्เค เคตिंเคกो เคฎें เคฆेเคें।
เคเคเคीเคเคฎเคเคฒ เคेเคฌเคฒ เคฎें เคॉเคฒเคฎ เคธ्เคชैเคจ เคा เคช्เคฐเคฏोเค
Using colspan in HTML Table
เคเคเคीเคเคฎเคเคฒ เคฎें เคॉเคฒเคฎ เคธ्เคชैเคจ (colspan) เคैเค เคा เคช्เคฐเคฏोเค เคॉเคฒเคฎ เคो เคฎเคฐ्เค เคเคฐเคจे เคे เคฒिเค เคिเคฏा เคाเคคा เคนै। เคिเคธी เคญी เคेเคฌเคฒ เคฎें เคॉเคฒเคฎ (column) เคो เคฎเคฐ्เค เคเคฐเคจे เคे เคฒिเค เคเคจ เคैเค เคा เคช्เคฐเคฏोเค เคिเคฏा เคाเคคा เคนै। <colspan> เคैเค เคे เคธाเคฅ เคिเคคเคจी เคॉเคฒเคฎ เคो เคฎเคฐ्เค เคเคฐเคจा เคนै, เคเคจเคी เคธंเค्เคฏा เคฆी เคा เคธเคเคคी เคนै। เคैเคธे เคฆो เคॉเคฒเคฎ เคो เคฎเคฐ्เค เคเคฐเคจे เคे เคฒिเค <colspan="2"> เคैเค เคा เคช्เคฐเคฏोเค เคिเคฏा เคाเคคा เคนै। เคเคจ เคैเค เคो เคेเคฌเคฒ เคนेเคกเคฐ, เคेเคฌเคฒ เคฐो เค เคฅเคตा เคेเคฌเคฒ เคกाเคा เคे เคธाเคฅ เคช्เคฐเคฏोเค เคिเคฏा เคा เคธเคเคคा เคนै।
See the Pen Using Column Span in Table HTML Code by ITI COPA (@copaguide) on CodePen.
เคเคเคीเคเคฎเคเคฒ เคेเคฌเคฒ เคฎें เคฐो เคธ्เคชैเคจ เคा เคช्เคฐเคฏोเค
Using Rowspan in HTML Table
เคเคเคीเคเคฎเคเคฒ เคฎें เคฐो เคธ्เคชैเคจ (Rowspan) เคเคตं เคॉเคฒเคฎ เคธ्เคชैเคจ (colspan) เคैเค เคा เคช्เคฐเคฏोเค เคฐो เคเคตं เคॉเคฒเคฎ เคो เคฎเคฐ्เค เคเคฐเคจे เคे เคฒिเค เคिเคฏा เคाเคคा เคนै। เคिเคธी เคญी เคेเคฌเคฒ เคฎें เคธेเคฒ เคो เคฎเคฐ्เค เคเคฐเคจे เคे เคฒिเค เคเคจ เคैเค เคा เคช्เคฐเคฏोเค เคिเคฏा เคाเคคा เคนै। <rowspan> เคैเค เคे เคธाเคฅ เคिเคคเคจी เคฐो เคो เคฎเคฐ्เค เคเคฐเคจा เคนै, เคเคจเคी เคธंเค्เคฏा เคฆी เคा เคธเคเคคी เคนै। เคैเคธे เคฆो เคฐो เคो เคฎเคฐ्เค เคเคฐเคจे เคे เคฒिเค <rowspan="2"> เคैเค เคा เคช्เคฐเคฏोเค เคिเคฏा เคाเคคा เคนै। เคเคจ เคैเค เคो เคेเคฌเคฒ เคนेเคกเคฐ, เคेเคฌเคฒ เคฐो เค เคฅเคตा เคेเคฌเคฒ เคกाเคा เคे เคธाเคฅ เคช्เคฐเคฏोเค เคिเคฏा เคा เคธเคเคคा เคนै।
See the Pen Using Row Span HTML Code by ITI COPA (@copaguide) on CodePen.




