Html Table...

வணக்கம் நண்பர்களே இன்று மற்றொரு பதிவுடன் இணைகின்றேன் நான் உங்களுடன்.HTML இல் Table ஒன்றை எப்படி உருவாக்குவது என்று பார்ப்போம்.

இங்கு Tableஉருவாக்க <table> </table> என்ற Tag பயன்படுகின்றது.எப்பவும் ஒரு  Table இல் Row,Column என்பன அடங்கியிருக்கும். நாம் Html இல் Row வை மட்டுமே உருவாக்குவோம்.அதற்கு  <tr> Table Row என்ற  Tag பயன்படுகின்றது. ஒவ்வொரு Row விலும் எத்தனை Cell வர வேண்டும் என அடுத்த படியாக உருவாக்குவோம். அதற்கு  <td> Table Data என்ற  Tag பயன்படுகின்றது.

<table>

<tr>

<td>Name</td>

<td>Address</td>

</tr>

<tr>

<td>sadun</td>

<td>battilcaloa</td>

</tr>

</table>

உதாரணத்திற்காக இப்படி நான் ஒரு Coding எழுதியுள்ளேன் அதன் விடை எவ்வாறு அமையும் எனப் பார்க்கலாம்

நீங்கள் வியப்பாய் பார்ப்பது விளங்குகின்றது என்னடா இது Table என்றா Row, Column எல்லாம் வேணும் இங்கு ஒன்றையும் காணலையே.....   இதுதானே அதற்கும் நீங்கள் இன்னுமொரு வேலை செய்ய வேண்டும் அது என்னவென்றால்.

<table border="1">

<tr>

<td>Name</td>

<td>Address</td>

</tr>

<tr>

<td>sadun</td>

<td>battilcaloa</td>

</tr>

</table>

பழைய Coding இல் நான் ஒரு மாற்றம் மட்டுமே செய்தேன் அதுதான் <table border="1">   இப்பொழுது பாருங்கள் மாற்றத்தின் பலனை.

இங்கு நாங்கள் கொடுக்கும் Border அளவிற்கேற்ப அதன் Border இன் அளவும் மாறிக் கொண்டே போகும் தேவை இல்லை என்றால் Border ஐ பற்றி கதைக்க வேண்டிய அவசியமே இல்லை.

அதே போல் நாம் Cell  ற்கு Border ஒன்று கொடுக்க  இப்படி coding ஐ பயன்படுத்துவோம'. <th> </th> Table Heading  என்று பொருள்படும்.

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Output

Header 1	Header 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

நாம் Table ற்குள்  Text, Links, Images, Lists, Forms, Other Tables போன்றவற்றை பயன்படுத்தலாம்

நன்றி மீண்டும் ஒரு பதிவுடன் தொடருவோம்.