[தமிழ்] How to create table in CSS? CSS இல் table உருவாக்குவது எப்படி?

Ad Blocker Detected

Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

அனைவருக்கும் வணக்கம். கடைசியாக நாம் போட்ட பதிவில் HTML 5 மற்றும் CSS 3 என்றால் என்ன மற்றும் அதன் பயன்பாடுகளை பற்றி ஒரு விரிவாக்கம் ஆகா எடுத்துக்காட்டுடன் பார்த்தோம். இதில் உங்களுக்கு ஏதேனும் கேள்வி இருந்தால் Comment Box இல் கேளுங்கள். இந்த HTML மற்றும்  CSS  ஐ நீங்கள் செய்துபார்க்க சிறந்த சைட் ஆனது w3schools ஆகும். இந்த பதிவில் HTML  மற்றும் css  பயன்படுத்தி table ஆனது எப்படி உருவாக்க வேண்டும் என்பதை பாப்போம்.

Table உருவாக்க:

ஒரு டேபிள் ஆனது உருவாக்க அதன் டேக் ஆனது முதலில் தெரிந்திருக்க வேண்டும். இந்த டேபிள் இல் பயன்படும் டேக் களை பற்றி பார்ப்போம். <table></table> இந்த  டேக் ஆனது பயன்படுத்தி டேபிள் ஆனது உருவாக்க வேண்டும். பின்பு இதனுள் <td></td> என்ற tag ம் <tr></tr> என்ற tag ம் பயன்படுத்தலாம். இதில் td என்பது table data ஐ குறிக்கும். table data  என்பது அந்த டேபிள் இல் போடப்படும் இமேஜ் அல்லது text ஐ குறிக்கும். மற்றும் இதில் tr என்பது table row ஐ குறிக்கும்.  உங்களுக்கு எத்தனை row தேவைப்படுமா அவைக்கு <tr></tr> டேக் ஆனது பயன்படுத்த வேண்டும்.

இதற்கான Coding ஐ பார்ப்போம்:

முதலில் table டேக் ஐ ஓபன் செய்யலாம்

 

<table border=”2px” cellspacing=”0″ bordercolor=”#dddddd”>

மேலே கொடுக்கப்பட்டுள்ள டேக் இல் table இல் உள்ள border ஆனது 2px ஆகவும், border ன் color ஆனது #dddddd (grey) ஆகவும் மற்றும் cellspacing 0 என குறிப்பிடப்பட்டுள்ளது. இதில் cellspacing என்பது இரண்டு box கு நடுவில் உள்ள இடைவெளி ஆகும். இறுதியில் table டேக் (</table>) ஆனது close  செய்ய வேண்டும்.

 

<tr><td colspan=”6″ style=”background-color:#960380;color:white;padding:20px;font-weight:bold;”>Postpaid plans for Broadband service </td></tr>

இந்த tag இல் colspan என்பது column களை merge செய்வதற்கு பயன்படும். இதன் background-color ஆகா pink ஆனது கொடுக்கப்பட்டுள்ளது. இதில் உள்ள text ன் font-weight ஆனது bold ஆகாவும் text ன் கலர் வைட் ஆகவும் கொடுக்கப்பட்டுள்ளது. மற்றும் இதன் உட்புற நிரப்பு அதாவது (Padding) ஆனது 20px கொடுக்கப்பட்டுள்ளது.

2<tr>
<td style=”background-color:#dc10aa;color:white;padding:20px;”>Base Plan</td>
<td style=”background-color:#dc10aa;color:white;padding:20px”>Plan Name</td>
         <td style=”background-color:#dc10aa;color:white;padding:20px”>Monthly Rental</td>
<td style=”background-color:#dc10aa;color:white;padding:20px”>Free Usage</td>
                             <td style=”background-color:#dc10aa;color:white;padding:20px”>Additional Usage Charges</td>
</tr>

இதிலும் tr (table row) என டேக் ஆனது ஓபன் செய்து அதனுள் ஐந்து td(table column) டேக் களை போடவேண்டும். பின்பு அதற்கு background color, text color மற்றும் padding ஆகியவற்றை கொடுக்க வேண்டும்.

3

<tr>
         <td rowspan=”3″ style=”color:960372″>Data Based</td>
                <td style=”color:#960372;padding:20px;”>Starter Plus</td>
<td style=”color:#960372;padding:20px;”>250</td>
         <td style=”color:#960372;padding:20px;”>300 MB</td>
          <td style=”color:#960372;padding:20px;”>Re.1/MB</td>
</tr>

மேலும் வாசிக்க:  HTML என்றால் என்ன? விரிவாக்கம் தமிழில்...

இதில் <td rowspan=”3″> ஆனது கொடுக்கப்பட்டுள்ளது. இதில் rowspan என்பது இரண்டு அல்லது அதற்கு மேற்பட்ட row களை மேர்ஜ் செய்ய பயன்படும் டேக் ஆகும். இதில் database ஆனது மூன்று row களின் தலைப்பாக இருப்பதால் இதில் rowspan டேக் ஆனது பயன்படுத்தப்பட்டுள்ளது.

<tr>
          <td style=”color:#960372;padding:20px;”>Plus Lite</td>
<td style=”color:#960372;padding:20px;”>500</td>
        <td style=”color:#960372;padding:20px;”>650 MB</td>
                   <td style=”color:#960372;padding:20px;”>Re.0.50//MB</td>
</tr>

<tr>
           <td style=”color:#960372;padding:20px;”>1GB Plus</td>
<td style=”color:#960372;padding:20px;”>650</td>
 <td style=”color:#960372;padding:20px;”>1 GB</td>
                   <td style=”color:#960372;padding:20px;”>Re.0.50//MB</td>
</tr>

இதிலும் tr (table row) என டேக் ஆனது ஓபன் செய்து அதனுள் ஐந்து td(table column) டேக் களை போடவேண்டும். பின்பு அதற்கு text color மற்றும் padding ஆகியவற்றை கொடுக்க வேண்டும்.

5

<tr>
          <td rowspan=”2″ style=”color:960372″>Time Based</td>
            <td style=”color:#960372;padding:20px;”>5Hrs Plus</td>
<td style=”color:#960372;padding:20px;”>250</td>
         <td style=”color:#960372;padding:20px;”>300 Min</td>
          <td style=”color:#960372;padding:20px;”>Re.1/Min</td>
</tr>

இதில் <td rowspan=”2″> ஆனது கொடுக்கப்பட்டுள்ளது. இதில் rowspan என்பது இரண்டு அல்லது அதற்கு மேற்பட்ட row களை மேர்ஜ் செய்ய பயன்படும் டேக் ஆகும். இதில் Time based  ஆனது இரண்டு  row களின் தலைப்பாக இருப்பதால் இதில் rowspan டேக் ஆனது பயன்படுத்தப்பட்டுள்ளது.

<tr>
                <td style=”color:#960372;padding:20px;”>30 Hrs Plus</td>
<td style=”color:#960372;padding:20px;”>500</td>
           <td style=”color:#960372;padding:20px;”>1800 Min</td>
          <td style=”color:#960372;padding:20px;”>Re.1/Min</td>
</tr>

இதிலும் tr (table row) என டேக் ஆனது ஓபன் செய்து அதனுள் ஐந்து td(table column) டேக் களை போடவேண்டும். பின்பு அதற்கு  text color மற்றும் padding ஆகியவற்றை கொடுக்க வேண்டும்.

இவையனைத்தும் </table> டேக் மற்றும் </body> tag இனுள் இருக்க வேண்டும்.

முடிவு :

இது உங்களுக்கு புரிந்திருக்கும் என்று நினைக்குறேன். இந்த பதிவானது உங்களுக்கு பிடித்திருந்தால் இதற்கு like மற்றும் share  செய்யுங்கள். மீண்டும் மற்றொரு பதிவில் சந்திக்குறேன். உங்களது கருது அல்லது ஏதேனும் கேள்வி ஆனது இருந்தால் அதனை comment box இல் கேளுங்கள். நன்றி.

Leave a Reply