HTML3: HTML பயன்படுத்தி பதிவுக்குள் Table உருவாக்கலாம் | கற்போம்

HTML3: HTML பயன்படுத்தி பதிவுக்குள் Table உருவாக்கலாம்

ரொம்ப நாட்கள் கழித்து HTML பற்றி பதிவு எழுதுகிறேன். பதிவெழுதும் பலரும் தங்கள் பதிவுக்குள் ஒரு table கொண்டு வருவது எப்படி என யோசித்து இருப்பீர்கள். எப்படி எனப் பார்ப்போம் வாருங்கள்.



எனது முந்தைய HTML பதிவுகள்




முதலில் உங்களுக்கு எத்தனை Rows, columns வேண்டும் என்பதை தீர்மானித்துக் கொள்ளவும்.

உங்களுக்கு 11 Rows மற்றும் 4 Columns கொண்ட ஒரு table தருகிறேன். இதில் இருந்து உங்களுக்கு வேண்டியதை நீங்கள் Add மற்றும் Remove செய்து கொள்ளுங்கள்.

<table border="1" cellpadding="7" style="width: 500px;">
<tbody>
<tr>   <td></td>   <td></td>   <td></td> <td></td></tr>
<tr>   <td></td>   <td></td>   <td></td> <td></td></tr>
<tr>   <td></td>   <td></td>   <td></td> <td></td></tr>
<tr>   <td></td>   <td></td>   <td></td> <td></td></tr>
<tr>   <td></td>   <td></td>   <td></td> <td></td></tr>
<tr>   <td></td>   <td></td>   <td></td> <td></td></tr>
<tr>   <td></td>   <td></td>   <td></td> <td></td></tr>
<tr>   <td></td>   <td></td>   <td></td> <td></td></tr>
<tr>   <td></td>   <td></td>   <td></td> <td></td></tr>
<tr>   <td></td>   <td></td>   <td></td> <td></td></tr>
<tr>   <td></td>   <td></td>   <td></td> <td></td></tr>

</tbody></table>

இதில் மேலிருந்து கீழாக  <td></td> யை வரிசையாக Add/ Remove மூலம் ஒரு Column Add/ Remove செய்யலாம். இதே போல தான் இடமிருந்து  வலதுக்கும் <td></td> யை Add/ Remove மூலம் ஒரு Row  Add/ Remove செய்யலாம், அத்துடன் இதில் அதே வரியில் உள்ள <tr>, </tr> என்பதையும் Add/ Remove வேண்டும்.

இதில் உங்களுக்கு குறிப்புகளை ஒவ்வொரு <td> மற்றும் </td>இடையில் கொடுக்க வேண்டும். இதில் ஏதேனும் ஒன்று கொடுக்கபடாமல் இருந்தாலும் அந்த இடம் கட்டம் ஏதும் இல்லாமல் இருக்கும். அதனை சரியாக கண்டுபிடித்து நிரப்பவும்.

இதில் border table border ஐ தீர்மானிக்கும், cellpadding ஒரு கட்டத்தின் அளவை குறிக்கும், மற்றும் width ஆனது Table width ஐ குறிக்கும். <tr>

ஒரு உதாரண table:

<table border="1" cellpadding="5" style="width: 500px;"><tbody>
<tr>   <td>Rank</td>   <td>NEWSPAPER</td>   <td>COUNTRY</td> <td>AVERAGE DAILY CIRCULATION(2008)</td></tr>
<tr>   <td>1</td>   <td>The Times of India</td>   <td>India</td> <td>3,146,000</td></tr>
<tr>   <td>2</td>   <td>The Sun</td>   <td>UK</td> <td>3,121,000</td></tr>
<tr>   <td>3</td>   <td>USA Today</td>   <td>USA</td> <td>2,284,219</td></tr>
<tr>   <td>4</td>   <td>Daily Mail</td>   <td>UK</td> <td>2,241,788</td></tr>
<tr>   <td>5</td>   <td>The Wall Street Journal</td>   <td>USA</td> <td>2,069,463</td></tr>
<tr>   <td>6</td>   <td>Daily Mirror</td>   <td>UK</td> <td>1,494,000</td></tr>
<tr>   <td>7</td>   <td>Hindustan Times</td>   <td>India</td> <td>1,143,000</td></tr>
<tr>   <td>8</td>   <td>The Hindu</td>   <td> India </td> <td>1,102,783</td></tr>
<tr>   <td>9</td>   <td>Deccan Chronicle</td>   <td> India </td> <td>1,03,171</td></tr>
<tr>   <td>10</td>   <td>The New York Times</td>   <td>USA</td> <td>1,000,665</td></tr>

</tbody></table>
மேலே உள்ளதை  இந்த பக்கத்தில் HTML Instant  இடது பக்கத்தில் Paste செய்து பார்க்கவும். உங்களுக்கு இதில் கூட நீங்கள் எடிட் செய்து கொள்ளலாம். 

இந்த Table பயன்படுத்தப்பட்டு உள்ள லிங்க்: 

உங்களுக்கு புரியாதவற்றை கேட்கவும். தவறுகளை சுட்டிக் காட்டவும்.
◘பலே ட்வீட்◘

இரவில் குழந்தைகள் சமத்தாக தூங்கினால், அதற்கு பெற்றோர்கள் அந்தகுழந்தைக்கு தரும் அன்பு பரிசு : தம்பி அல்லது தங்கை !
_Kaniyen@twitter.com

என்னை விட எடை கூடுதலான உன்னை எந்த சிரமமுமின்றி எப்போதும் சுமந்து திரிகிறேன் இதயத்தில்
_arattaigirl@twitter.com

♦பலே பத்து♦

Top 10 Most Populated Countries

9 comments

பயனுள்ள இடுகை. மிக்க நன்றி.

Reply

நன்றாகத்தான் தொழினுட்ப பதிவுகளை எழுதுகின்றீர்கள் வாழ்த்துக்கள் பிரபு

Reply

பயனுள்ள பதிவு சகோ.
இப் பதிவுடன் தொடர்பு படாத, தொழில் நுட்பக் கேள்வி,

வலையில் தொடர் கதையாக, ஒரு பதிவு எழுதி வரும் போது, அப் பதிவின் தலைப்பின் கீழ் அதன் முந்தைய தொடர்கள் அனைத்தையும் ஒரு Menu bar அடிப்படையில் வர வைக்க வேண்டும். அது பற்றி ஏதாவது தொழில் நுட்பங்கள் பகிர முடியுமா சகோ.
http://ragariz.blogspot.com/2011/05/pulan-visaranai-part-11-from-gazali.html
சகோ ஹசாலியின் ப்ளாக்கில் உள்ளது போன்று செய்வது எப்படி என்று விளக்க முடியுமா?

Reply

உங்களின் தொழில் நுட்பப் பணிக்கு வாழ்த்துக்கள் சகோ.

Reply

@ நிரூபன்

எப்படி என்பது தெரிந்து விட்டது. தங்களுக்கு அதனை அடுத்த பதிவில் தெரிவிக்கிறேன்.

Reply

@ நிரூபன்

இப்போது பாருங்கள் என் வலைப்பூவில் சில மாற்றங்கள் உடன் அதனை Add செய்து உள்ளேன்.

Reply

@ சார்வாகன்
@ Indian
@ மகாதேவன்-V.K
@ நிரூபன்

நன்றி நண்பர்களே !!!

Reply

Post a Comment