You are here: Home / HTML-XHTML in Hindi / The attributes of table Element in HTML
by on January 14, 2013

The attributes of table Element in HTML

Attributes of table Element in HTML: पिछले उदाहरण में हमने Table Element को उपयोग में लेने की प्रक्रिया को जाना। अब हम इस Table Element के साथ उपयोग में लिए जा सकने वाले विभिन्‍न Attributes को विस्‍तार से समझेंगे।

The <table> Element’s Attributes

Table Element वह Element होता है, जिसमें एक Table के सभी अन्‍य Elements को लिखा जाता है। इस Table Element में हम सभी Universal Attributes व Scripting करने के लिए सभी Basic Event Attributes को उपयोग में ले सकते हैं। एक Table Element निम्‍न Deprecated Elements को भी उपयोग में ले सकता है:

align, bgcolor, border, cellpadding, cellspacing, dir, frame, rules, summary, width

The align Attribute (Deprecated)

हालांकि ये एक Deprecated Attribute है, लेकिन फिर भी इसे काफी उपयोग में लिया जाता है। जब हम इस Attribute का प्रयोग Table Element के साथ करते हैं, तब हम ये तय करते है कि हमारी Table हमारे Web Document किस Location (Left, Right, Center) पर दिखाई देगी, जबकि जब हम इस Attribute को Table के Cell के साथ उपयोग में लेते हैं, तब हम ये तय करते हैं कि हमारे Table के Cell में दिखाई देने वाले Contents किस Location (Left, Right, Center) पर दिखाई देंगे। Table Create करने के बाद हम जो भी Content लिखते हैं, वह Content Table की Boundary से Associate होकर दिखाई देने लगता है। यानी यदि हम उपरोक्‍त HTML File को Execute करते हैं, तो Web Browser में हमें हमारा Page निम्‍नानुसार दिखाई देता है:

Table Element and Attributes - XHTML in Hindi

यदि हम हमारी Table को किसी दूसरे Element के अन्‍दर Next करते हैं और Table में किसी Left, Right अथवा Center Align Attribute Value का प्रयोग करते हैं, तो हमारी Table उस Element के आधार पर ही अपनी Position को Locate करता है।

जैसा कि हम उपरोक्‍त चित्र में देख सकते हैं, कि यदि हम हमारे Table में align Attribute का प्रयोग करते हैं, तो हमारा Text हमारी Table के साथ ही दिखाई देने लगता है। अब यदि हम चाहते हैं कि हमारा Text Table से अलग दिखाई दे, तो हमें हमारी Table के Closing Tag के बाद <br/> Element का प्रयोग करना जरूरी होता है। जैसे:

<html>
<body>
<table border=”1”>
<tr>
	<td> Row1, Column1 </td>
	<td> Row1, Column2 </td>
</tr>
<tr>
	<td> Row2, Column1 </td>
	<td> Row2, Column2 </td>
</tr>
</table>
<br clear=”left”/>
</html>
</body>

जैसाकि हम देख सकते हैं कि clear Attribute का प्रयोग <br/> Element के साथ किया जाता है। इस Attribute में हम left, right, all व none में से किसी भी Value का प्रयोग कर सकते हैं। इस Attribute द्वारा हम ये तय करते हैं कि Line Break करने के बाद दिखाई देने वाला Text किस तरह से दिखाई देगा। <br/> Element में हम इन चारों मानों को उपयोग में लेकर इनके काम करने के तरीके को समझ सकते हैं।

The bgcolor Attribute (Deprecated)

ये Attribute Table के Background को Set करने का काम करता है। इस Attribute में Value के रूप में या तो कोई Hexadecimal Code हो सकता है अथवा किसी Color का नाम हो सकता है। जैसे :

bgcolor=”#RRGGBB

The border Attribute (Deprecated)

ये Attribute Table व Table के हर Cell के चारों ओर एक Border Show करने का काम करता है। इस Attribute में हम जो मान Specify करते हैं, वह मान Pixels की संख्‍या होती है, जो Border की Size को Specify करता है। यदि हम इस Attribute को 0 मान Set करते हैं अथवा यदि हम इस Attribute को उपयोग में नहीं लेते हैं, तो हमें किसी तरह की कोई Border दिखाई नहीं देती है।  जैसे :

Border=”0”

The cellpadding Attribute (Deprecated)

ये Attribute Table के Cell व Cell के अन्‍दर लिखे गए Contents के बीच दिखाई देने वाले Gap को निर्धारित करने का काम करता है। इस Attribute में हम जो मान Specify करते हैं, वह मान Pixels की संख्‍या अथवा Percentage हो सकती है, जो Gap की Size को Specify करता है। हम समझ सकते हैं कि यदि दो Cell में Contents लिखे हों और दोनों ही Cells के बीच कोई Gap ना हो, तो उनमें लिखे गए Contents को ठीक से पढ पाना मुश्किल हो जाता है। इस Attribute को हम निम्‍नानुसार उपयोग में ले सकते हैं :

Cellpadding=”4”         OR          cellpadding=”2%”

The cellspacing Attribute (Deprecated)

ये Attribute Table के दो Cell के Borders के बीच की Spacing को तय करने का काम करता है। इस Attribute में हम जो मान Specify करते हैं, वह मान Pixels की संख्‍या अथवा Percentage हो सकती है, जो कि दोनों Cells के बीच की दूरी को Specify करता है। इस Attribute को भी हम निम्‍नानुसार उपयोग में ले सकते हैं :

Cellspacing=”4”         OR          cellspacing=”2%”

The dir Attribute (Deprecated)

ये Attribute Table में लिखे जाने वाले Contents के Direction को तय करने का काम करता है। इस Attribute में हम ltr अथवा rtl मान Specify कर सकते हैं। इस Attribute को हम निम्‍नानुसार उपयोग में ले सकते हैं :

Dir=”rtl”

यदि हम इस Attribute को Table Element में उपयोग में लेते हैं और उसमें rtl मान को Specify करते हैं, तो Document में Appear होने वाले सभी Cells Right Side से Appear होना शुरू करते हैं और हर Cell Left की ओर Place होता है। इस Process को हम निम्‍न उदाहरण द्वारा समझ सकते हैं:

<html>
<body>

<table border=”1”>

<tr>
	<th></th>
	<th>Outgoings ($)</th>
	<th>Receipts ($)</th>
	<th>Profit ($)</th>
</tr>

<tr>
	<th>Quarter 1 (Jan-Mar)</th>
		<td>11200.00</td>
		<td>21800.00</td>
		<td><b>10600.00</b></td>
</tr>

<tr>
	<th>Quarter 2 (Apr-Jun)</th>
		<td>11700.00</td>
		<td>22500.00</td>
		<td><b>10800.00</b></td>
</tr>

<tr>
	<th>Quarter 3 (Jul - Sep)</th>
		<td>11650.00</td>
		<td>22100.00</td>
		<td><b>10450.00</b></td>
</tr>

<tr>
	<th>Quarter 4 (Oct - Dec)</th>
		<td>11850.00</td>
		<td>22900.00</td>
		<td><b>11050.00</b></td>
</tr>
</table>

This is an example of using Table Element in the web document. We can see that our text is 
wrapping around the table. It is happening, because we have alined our Table to left of the 
web document.
<br clear="left">If we remove this align attribute, from the table Element, Our text renders in 
the browser after the Table.The text after this image will be displayed next to the image and wrap
to the next line until you see the line break element. Now
it should be on a new line underneath (not next to) the image.

</html>
</body>
Table Element and Attributes - XHTML in Hindi

The frame Attribute (Deprecated)

इस Attribute में विभिन्‍न प्रकार के मानों को Specify करके हम हमारे Table की दिखाई देने वाली Borders को Control कर सकते हैं। उदाहरण के लिए यदि हमें हमारे Table की हर Row में केवल उपर की Border ही चाहिए, तो हम इस Attribute में “above” मान Set कर सकते हैं। ऐसा करने पर हमें Table की हर Row में केवल उपर की Border ही दिखाई देगी। इस Attribute में हम अपनी विभिन्‍न प्रकार की जरूरतों को पूरा करने के लिए निम्‍न में किसी भी मान का प्रयोग कर सकते हैं:

Value Purpose
void No outer border (the default)
above A border on top only
below A border on bottom only
hsides A border on top and bottom
lhs A border on left side of table
rhs A border on right side of table
vsides A border on left and right sides of table
box A border on all sides
border A border on all sides

The rules Attribute (Deprecated)

इस Attribute का प्रयोग करके हम ये तय करते हैं कि हमारे Table की कौनसी Inner Borders दिखाई देनी चाहिए और कौनसी नहीं दिखाई देनी चाहिए। इस Attribute में हम निम्‍न हम निम्‍न में से किसी मान को उपयोग में ले सकते हैं :

Value Purpose
none No inner borders (the default)
groups Displays inner borders between all table groups (groups are created by the thead>, <tbody>, <tfoot>, and <colgroup> elements)
rows Displays horizontal borders between each row
cols Displays vertical borders between each column
all Displays horizontal and vertical borders between each row and column

The width Attribute (Deprecated)

ये Attribute Table की Width को Specify करने का काम करता है। इस Attribute में हम जो मान Specify करते हैं, वह मान Pixels की संख्‍या अथवा Percentage के रूप में हो सकती है। इस Attribute को हम निम्‍नानुसार उपयोग में ले सकते हैं :

width=”500”       OR          width=”90%”

The <tr> Element’s Attriutes

ये Element Table के हर Row को Contain करने का काम करता है। इस Element में जो कुछ भी लिखा जाता है, वह उसी Row में Appear होता है। इस Element के साथ पांच Attributes का प्रयोग किया जा सकता है, जिनमें से चार को Deprecate कर दिया गया है।

The align Attribute (Deprecated)

ये Attribute Row के सभी Cells के Contents की Position को Specify करने का काम करता है। इस Attribute को हम निम्‍नानुसार उपयोग में ले सकते हैं :

align=”left”            OR          align=”center”

इस Attribute में हम अपनी जरूरत के अनुसार निम्‍न में से किसी मान को उपयोग में ले सकते हैं:

Value Purpose
left Content is left-aligned.
right Content is right-aligned.
center Content is centered horizontally within the cell.
justify Text within the cell is justified to fill the cell.
char Cell contents are aligned horizontally around the first instance of a specific character (for example numbers could be aligned around the first instance of a decimal point).

By Default <td> Cell Left Aligned होता है, जबकि <th> Cell सामान्‍यतया Centered Aligned होता है।

The bgcolor Attribute (Deprecated)

ये Attribute Row के Background Color को Specify करने का काम करता है। इस Attribute में हम हमारे Required Color का नाम अथवा उस Color का Hexadecimal Code उपयोग में ले सकते हैं। जैसे :

bgcolor=”RRGGBB”        OR          bgcolor=”RED”

The char Attribute (Deprecated)

जब हम किसी एक Character के आधार पर Content को Align करना चाहते हैं, तब हम इस Attribute का प्रयोग करते हैं। उदाहरण के लिए निम्‍न Content में हम देख सकते हैं, कि दसमलव के Left व Right दोनों ही तरफ Characters की संख्‍या कम या ज्‍यादा हो रही है, लेकिन सभी मानों का Center दसमलव ही है:

123.32
121213.2135
12452145.45454545
12.3

इस तरह की जरूरत को पूरा करने के लिए हम इस Attribute को निम्‍नानुसार उपयोग में ले सकते हैं:

Char=”.”

The valign Attribute

ये Attribute Row के हर Cell के Content की Vertical Alignment को Specify करता है। इस Attribute में हम निम्‍न में से किसी मान को उपयोग में ले सकते है :

Value Purpose
top Aligns content with the top of the cell
middle (Vertically) aligns content in the center of a cell
bottom Aligns content with the bottom of the cell
baseline Aligns content so that the first line of text in each cell starts on the same horizontal line.

The colspan Attribute

इस Attribute का प्रयोग करके हम ये तय कर सकते हैं, कि हमारा Cell कितने Columns तक Span हो सकता है। जैसे :

colspan=”2”

The rowspan Attribute

इस Attribute का प्रयोग करके हम ये तय कर सकते हैं, कि हमारा Cell कितने Rows तक Span हो सकता है। जैसे :

rowspan=”2”

The height Attribute (Deprecated)

इस Attribute का प्रयोग करके हम हमारे Cell की Height को Pixels की संख्‍या अथवा Percentage के रूप में तय कर सकते हैं। जैसे :

height=”12”

The nowrap Attribute (Deprecated)

जब हम चाहते हैं कि Cell में चाहे जितना बडा Content लिखा जाए, सारा Content एक ही Row में दिखाई देना चाहिए और हमारा Content उसी Column के अगले Row में Wrap नहीं होना चाहिए, तब हम <td> Element के साथ इस Attribute का प्रयोग करते हैं। इस Attribute को निम्‍नासार प्रयोग किया जाता है:

Nowrap=”nowrap”

The valign Attribute

इस Attribute में हम top, middle, bottom अथवा baseline मान Specify करके ये तय कर देते हैं, कि हमारा Content Vertically किस स्‍थान पर दिखाई देगा।

The width Attribute

इस Attribute में हम Pixels की संख्‍या अथवा Percentage के रूप में ये तय कर देते हैं, कि हमारे Cell की Width कितनी होगी।

Tables को Head, Body व Foot के रूप में तीन हिस्‍सों में विभाजित किया जा सकता है। Head/Foot MS-Word Document के Header/Footer के समान ही होते हैं, जिनके Contents सभी Web Pages के लिए समान होते हैं, जबकि Body के Contents हर Web Page के लिए Change होते रहते हैं। हालांकि इस सुविधा को केवल Natscape Navigator 6 व उसके बाद के Version ही Support करते हैं। Header Create करने के लिए <thead> Element, Footer Create करने के लिए <tfoot> Element व Body Create करने के लिए हमें <tbody> Element को उपयोग में लेना होता है। एक Table में हम कई <tbody> Elements का प्रयोग कर सकते हैं। इस प्रकार की Table क एक उदाहरण हम निम्‍नानुसार Create कर सकते हैं:

<table>

<thead>
<tr>
	<td colspan="4">This is the head of the table</td>
</tr>
</thead>

<tfoot>
<tr>
	<td colspan="4">This is the foot of the table</td>
</tr>
</tfoot>

<tbody>
	<tr>
		<td>Cell 1</td>
		<td>Cell 2</td>
		<td>Cell 3</td>
		<td>Cell 4</td>
	</tr>
<tr>
...more rows here containing four cells...
</tr>
</tbody>

<tbody>
<tr>
	<td>Cell 1</td>
	<td>Cell 2</td>
	<td>Cell 3</td>
	<td>Cell 4</td>
</tr>
<tr>
...more rows here containing four cells...
</tr>
</tbody>
</table>
Table Element and Attributes - XHTML in Hindi

इस Table पर CSS का प्रयोग करके हम इसे अपनी जरूरत के अनुसार Display कर सकते हैं।

The <caption> Element

यदि हम किसी Table के साथ किसी तरह का Caption Set करना चाहें, तो ये काम हम निम्‍नानुसार caption Element का प्रयोग करके कर सकते है। सामान्‍यतया Caption Table के उपर दिखाई देता है।

<table>
	<caption>Spanning columns using the colspan attribute</caption>
</table>

The <colgroup> Element

जब हम समान प्रकार की Information को Hold करने वाले कई Adjacent Columns को एक साथ Handle करना चाहते हैं, तब हम <colgroup> Element का प्रयोग कर सकते हैं। जब हम इस Element का प्रयोग करके Columns का एक Group बना लेते हैं, तब उन सभी Columns पर किसी Formatting को Apply करने के लिए हमें, अलग-अलग Styles बनाने की जरूरत नहीं होती है, बल्कि हम एक ही Style को उन सभी Group Columns पर Apply कर सकते हैं।

उदाहरण के लिए निम्‍न उदाहरण में कुल 12 Columns हैं। पहले आठ Columns पहले Column Group में हैं, जबकि अगले चार में से दो Columns दूसरे Column Group व अन्तिम दो Columns तीसरे Column Group में हैं।

<html>
 <body>
 <table border="1">
 <colgroup span="8" width="75" class="mainColumns" />
 <colgroup span="2" width="50" class="subTotalColumns" />
 <colgroup span="2" width="80" class="totalColumns" />
 <tr>
 <td>Cell 01</td>
 <td>Cell 02</td>
 <td>Cell 03</td>
 <td>Cell 04</td>
 <td>Cell 05</td>
 <td>Cell 06</td>
 <td>Cell 07</td>
 <td>Cell 08</td>
 <td>Cell 09</td>
 <td>Cell 10</td>
 <td>Cell 11</td>
 <td>Cell 12</td>
 </tr>
 </table>
</body>
</html>

इस Web Page में हम देख सकते हैं कि पहले 8 Columns की Width 75 Pixels है, जो कि पहले 8 Columns के Group पर Apply होता है। इसी तरह से अगले दो 2 Columns की Width 50 Pixels है, व अन्तिम 8 Columns की Width 85 Pixels है। इसी तरह से हम हमारी जरूरत के आधार पर Columns का Group बना सकते हैं और उन पर एक साथ किसी Formatting को Apply कर सकते हैं। इस उदाहरण में span Attribute इस बात को Indicate करता है कि हम कितने Columns का Group बनाना चाहते हैं।

HTML5 with CSS3 in Hindiये Article इस वेबसाईट पर Selling हेतु उपलब्‍ध EBook HTML5 with CSS3 in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी। 

HTML5 with CSS3 in Hindi | Page: 481 | Format: PDF

BUY NOW GET DEMO REVIEWS

Filed Under: HTML-XHTML in Hindi