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

வணக்கம் நண்பர்களே...!! கடந்த பதிவில் table அமைப்பது பற்றிய அடிப்படை பார்த்தோம். இன்றைய பதிவில் table அமைப்பது பற்றி சற்று விரிவாகப் பார்போம்..
அதாவது

---

Cell 1
Cell 2	Cell 3	Cell 4

இதில் நீங்கள் பார்ப்பதாவது Cell 1 என்பது 3 row ஐ பிடித்திருக்கிறது... இப்படியாக ஒரு table ஐ அமைப்பதற்கான HTML code இதுதான்...

<table border="1">
 <tr>
<td colspan="3">Cell 1</td>
 </tr>
 <tr>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
 </tr>
</table>

<table border="1"> இங்கே நீங்கள் விரும்பிய அளவுக்கு border அகலத்தைக் 
கூட்டலாம்..

'colspan=' என்பது குறிப்பது ; 

நீங்கள் எத்தனை row ஐ column க்கு ஒதுக்கப்போகீறீர்கள் என்பதாகும்.. உதாரணமாக..

Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 9

இப்போது அவதானித்திருப்பீர்கள் மேலே உருவாக்கப்பட்ட table க்கான code இதோ..

 <table border="1">
   <tr>
     <td colspan="5">Cell 1</td>
   </tr>
   <tr>

     <td>Cell 2</td>
     <td>Cell 3</td>
     <td>Cell 4</td>
            <td>Cell 5</td>
     <td>Cell 6</td>
             <td>Cell 7</td>

            <td>Cell 9</td>

   </tr>
 </table>
'colspan='இப்போது பார்தீர்களா? 
try செய்து பாருங்கள்..

---

அடுத்து, இந்த code ஐ பார்க்கவும்..

<table border="1">
   <tr>
     <td rowspan="3">Cell 1</td>
     <td>Cell 2</td>
   </tr>
   <tr>
     <td>Cell 3</td>
   </tr>
   <tr>
     <td>Cell 4</td>
   </tr>
 </table>

<table border="1"> 


இங்கே நீங்கள் விரும்பிய அளவுக்கு border அகலத்தைக் கூட்டலாம் 


rowspan= 

இதில் நீங்கள் ஒரு column ல் எவ்வளவு row அடங்கவேண்டும் என்பதைக் 
குறிக்கும்...
உங்கள் விருப்பத்திற்கு ஏற்றவாறு மாற்றலாம்...
மேலே உள்ள code ற்கான வருவிளைவு இதோ...

Cell 1	Cell 2
	Cell 3
	Cell 4

---

<table border="1">
   <tr> 

          <td rowspan="5">Cell 1</td>
     <td>Cell 2</td>
   </tr>
   <tr>
     <td>Cell 3</td>
   </tr>
   <tr>
     <td>Cell 4</td>
   </tr>
 </table>

இந்தக் code ற்கான வருவிளைவு....

<rowspan="5" என்பதிலிருந்து உங்களுக்குப் புரிந்திருக்கும் இங்கே ஒரு cell 5 column க்கு 

சமானாக வர இருக்கிறது என.... எங்கே பார்போம்..

Cell 1	Cell 2
	Cell 3
	Cell 4

பார்த்தீர்களா.....??? எப்படி இருக்கிறது... try செய்து உங்கள் கருத்துகளைக் கீழே இடுங்கள்..

முந்தைய பதிவுகளைப் பார்க்க..

---

பேஸ்புக்கில் என்னுடன் இணைய...