Table create करने के लिए आपको tags का order हमेशा ध्यान रखना चाहिए। सबसे पहले <table> tag आता है। इसके बाद <tr> tag आता है। फिर उसके बाद <th> और <td> tags आते है। <th> और <td> tags हमेशा <tr> tags के अंदर ही आएंगे।
एक बात आपको और ध्यान रखनी चाहिए की जब तक आप border attribute के द्वारा table की border define नहीं करते है तब तक table की border show नहीं होती है।
एक बात आपको और ध्यान रखनी चाहिए की जब तक आप border attribute के द्वारा table की border define नहीं करते है तब तक table की border show नहीं होती है।
Creating Table Headings
आप चाहे तो tables कि first row मे headings भी create कर सकते है। Heading text table के बाकी text से मोटा ओर बडा होता है। उदाहरण के लिए यदि आप कोई table create कर रहे है जो employees कि information store करती है तो आप Names ओर addresses आदि headings create कर सकते है।
Heading create करने के लिये <th> tag युज किया जाता है। इसे table heading tag कहते है। इस tag मे आप जो text युज करते है वह web page मे heading कि तरह show होती है। इस tag को <tr> tag के अंदर युज किया जाता है। इसका उदाहरण नीचे दिया जा रहा है।
Heading create करने के लिये <th> tag युज किया जाता है। इसे table heading tag कहते है। इस tag मे आप जो text युज करते है वह web page मे heading कि तरह show होती है। इस tag को <tr> tag के अंदर युज किया जाता है। इसका उदाहरण नीचे दिया जा रहा है।
<html>
<head>
<title>Table Heading Page</title>
</head>
<body>
<table border="1">
<tr>
<th>Names</th>
<th>Addresse</th>
</tr>
<tr>
<td>Sam</td>
<td>United States</td>
</tr>
<tr>
<td>Vijay</td>
<td>India</td>
</tr>
</table>
</body>
|
COLSPAN Attribute
आप चाहे तो किसी एक row के column को एक से ज्यादा columns मे भी divide कर सकते है। इसके लिये आप उससे पहले वाले column मे colspan attribute define करते है। जिस column मे आप colspan define करते है वो एक column उतने ही columns की जगह घेरता है।
इसका उदाहरण नीचे दिया जा रहा है।
इसका उदाहरण नीचे दिया जा रहा है।
<html>
<head>
<title>Colspan WebPage </title>
</head>
<body>
<table border="1">
<tr>
<th>Names</th>
<th colspan ="2">Mobile No.</th>
</tr>
<tr>
<td>Charlie</td>
<td>4856456465486</td>
<td>1235713</td>
</tr>
<tr>
<td>Rajesh</td>
<td colspan ="2">12683124598</td>
</tr>
</table>
</body>
|
उपर दिए गए उदाहरण को देखिये राम के pass 2 mobile numbers है। लेकिन श्याम के pass एक ही mobile number है। यदि आप normally table create करेंगे तो श्याम वाली row में एक column की जगह खाली बच जाएगी। ऐसे में table बिलकुल भी अच्छी नहीं लगेगी।
यदि आप चाहते है की श्याम वाली row का एक column ऊपर वाली row के दो columns को cover करे तो आप उस column में colspan attribute यूज़ करते है और जितने columns आप इस एक column से cover करना चाहते है उतनी ही integer values देते है।
जैसे की मैने उपर दिए हुए example श्याम वाली row के एक column से राम वाली row के 2 columns cover किये है। इस script के द्वारा निचे दिया गया web page generate होगा।
यदि आप चाहते है की श्याम वाली row का एक column ऊपर वाली row के दो columns को cover करे तो आप उस column में colspan attribute यूज़ करते है और जितने columns आप इस एक column से cover करना चाहते है उतनी ही integer values देते है।
जैसे की मैने उपर दिए हुए example श्याम वाली row के एक column से राम वाली row के 2 columns cover किये है। इस script के द्वारा निचे दिया गया web page generate होगा।
ROWSPAN Attribute
ROWSPAN attribute भी colspan की तरह ही होता है। इसे आप <tr> tag में define करते है। इस attribute की आप जितनी values देते है वह एक row उतने ही columns की जगह घेरती है। इसका उदाहरण नीचे दिया जा रहा है।
<head>
<title> Rowspan Webpage </title>
</head>
<body>
<table border="1">
<tr>
<th rowspan="2">Colors</th>
<td>Red</td>
</tr>
<tr>
<td>Lime</td>
</tr>
<tr>
<th rowspan="2">Guava</th>
<td></td>
</tr>
<tr>
<td>Apple</td>
</tr>
</table>
</html>
|
ऊपर दी गयी script निचे दिया गया web page generate करेगी।
Naming The Table
आप चाहे तो table का कोई नाम दे सकते है जिसे caption भी बोलते है। इसके लिए आप <caption> tag यूज़ करते है। इसे <table> tag के बाद define किया जाता है। इसका उदाहरण नीचे दिया गया है।
<html
<head>
<title>Naming the tables</title>
</head>
<body>
<table border="2">
<caption> MyTable</caption>
<tr>
<td> Bindesh Yadav </td>
<td>Delhi </td>
</tr>
</table>
</body>
|
ऊपर दी गयी script निचे दिया गया web page generate करेगी।
0 Comments