HTML கற்போம் பகுதி - 7

வணக்கம் நண்பர்களே...!! பகுதி-6 ன் தொடர்ச்சியை இங்கே பாப்போம்... இந்தப் பதிவில் "HTML ஐ பயன்படுத்தி Table அமைப்பது பற்றிப் பார்போம்"

---

<table>

 <tr>

<td>Cell 1</td>

<td>Cell 2</td>

 </tr>

 <tr>

<td>Cell 3</td>

<td>Cell 4</td>

 </tr>

</table>

---

பார்த்தவுடனே பயப்படாதீங்க....

இங்கே <tr> என்பது Table Row ஐ குறிக்கிறது...

<td> என்பது Table Data வைக் குறிக்கிறது.

மேலே தரப்பட்ட code ஐ பயன்படுத்தினால் கீழுள்ளவாறு தான் தோன்றும்..

Cell 1	Cell 2
Cell 3	Cell 4

---

இன்னும் ஒரு உதாரணம்...

<table>

 <tr>

<td>Cell 1</td>

<td>Cell 2</td>

<td>Cell 3</td>

<td>Cell 4</td>

 </tr>

 <tr>

<td>Cell 5</td>

<td>Cell 6</td>

<td>Cell 7</td>

<td>Cell 8</td>

 </tr>

 <tr>

<td>Cell 9</td>

<td>Cell 10</td>

<td>Cell 11</td>

<td>Cell 12</td>

 </tr>

</table>

நிறைய எழுதி இருக்கிறேன் எனப் பயப்படாதீங்க...

இங்கே Table Row அதாவது <tr> 3 முறை எழுதி </tr> எனக் கொடுத்திருக்கிறேன் 

அப்படியானால் இங்கே Table Row 3 ம் Table data 12 ம் வரும்.
அதன் வருவிளைவு இதோ...

Cell 1	Cell 2	Cell 3	Cell 4
Cell 5	Cell 6	Cell 7	Cell 8
Cell 9	Cell 10	Cell 11	Cell 12

---

எப்படி புரிந்ததா.... புரியாவிட்டால் திரும்பத் திரும்ப செய்து பாருங்க விளங்கும்... ம்ம்ம்ம்....

---

வாறன் வாறன் என்ன இது Table என்றால் அட்டவணை இருக்கணும் இது என்ன... என யோசிக்கலாம்..

இப்போ பாருங்கள்... இந்த code ஐ.

<table border="1">

 <tr>

<td>Cell 1</td>

<td>Cell 2</td>

 </tr>

 <tr>

<td>Cell 3</td>

<td>Cell 4</td>

 </tr>

</table>

இந்தக் code அட்டவனையைப் போடும் இதோ அதன் வருவிளைவு..

Cell 1	Cell 2
Cell 3	Cell 4

எப்டி நல்லா இருக்கா... "<table border="1">" உங்கள் வசதிக்கு ஏற்றவாறு 1 ஐ மாற்றலாம்...

அல்லது "<table border="1">" என்பதற்குப் பதிலாக  <table border="1" width="30%">

எனவும் இடலாம்.. இங்கே border என்பதற்குப் பதிலாக width அளவையும் பயன்படுத்தலாம்...

---

விரும்பிய மாதிரி உங்கள் table ஐ அமைக்கலாம்... அமைத்துப் பாருங்கள் சந்தேகம் இருப்பின் கீழே உங்கள் கேள்விகளை இடுங்கள்..

நன்றி..

பரதன்