attributes of tabl

Attributes of Table

HTML, Table के कुछ Attributes provide करता हे जिससे की हम टेबल के फॉर्मेट को और भी इफेक्टिव बना सके जिससे उस table फॉर्मेट अच्छा दिखाई दे ,table tag के बहुत सरे Attributes होते हे,
आइये हम सबको step by step cover करते हे !

Some Attributes of Table Tag:-

Border

Width & Hight

Cellspacing

Cellpadding

Rowspan

colspan
Background colour (bgcolor)

1. Border Tag:-
जब हम Table Tag का use करके है ,तो हमें Table की border show नहीं होती ,क्युकी by default border 0px होती है,

हमें उसे अपने according adjust करना होता है जैसा की मेने Table Tag वाले पोस्ट मे border =1px किया है !

आइये 1 बार और इसके उधारण से समझते है !

<html>

<head>

<title>table in HTML</title>

</head>

<body>

<table border=1px>

<tr>first row</tr>

<tr>second row</tr>

<tr>third row</tr>

</table>

</body>

</html>

Below is an example of very simple

2.Table Width and Height :-
जब हम Table बनाते है तो उसकी Width default रहती है but हम ऐसे अपने according कम और ज्यादा adjust कर सकते है !
हम Table की width और height set करने के लिए हम width and height attributes का उपयोग करते है ,

Not :-"हम जो भी width और height देंगे वो जितने भी column होंगे उन सभी में equal distribute होजायेगी और सभी column उसी width और height के अकॉर्डिंग होंगे ,
और अगर आपको spacial किसी column या फिर Row की width and height सेट करना ह तो भी कर सकते है !"

आइये अब हम ऐसे उद्धरण से समझते हे की पूरी table या फिर किसी spacial column याफिर Row की width and height कैसे Set की जाये--

<html>
   <head>table width/hight Att</head>
   <body>
   <table border=1 width="300px" height="200px" >
   <tr>
   <th>Name</th>
     <th>Add</th>
     <th>Email Add.</th>
   </tr>
   <tr>
     <td>Vivek Vishwakarma</td>
     <td>Ujjain</td>
     <td>vikkyvivek714@gmail.com</td>
   </tr>
   <tr>
     <td>Pawan Panchal</td>
     <td>Nagda</td>
     <td>panchalpawan785@gmail.com</td>
   </tr>
   <tr>
     <td>Bhupendra Kaschap</td>
     <td>Ujjain</td>
     <td>stu147coll@gmail.com</td>
   </tr>
   </table>
</body>
</html>

Very simple program's output on Below

3. Cell spacing :-
cell spacing 2 cells के बिच का space होता हे ,

by default cellspacing=0 होता हे , उस टाइम दोनों cells के बिच कोई भी space नहीं रहती है ,

और हम इसे बड़ा कर cells के बिच में कुछ space बना सकते हे !

  <html>
   <head>table width/hight Att</head>
   <body>
   <table border="1" cellspacing="5px" width=400px>
<tr>
<th colspan="3">Language's use</th>
</tr>
<tr>
<td rowspan=2>1</td>
<td rowspan=2>PHP</td>
<td>en.wikipedia.org</td>
</tr>
<tr>
<td>9gag.com</td>
</tr>
<tr>
<td rowspan=2>2</td>
<td rowspan=2>Python</td>
<td>Yahoo.com</td>
</tr>
<tr>
<td>Youtub.com</td>
</tr>
<tr>
<td>3</td>
<td>C#</td>
<td>amazon.com</td>
</tr>
</table>
</body>
</html>

Output of This program's

4. Cell padding :-
cell padding यह cell के डाटा और border बिच की दुरी होती है , जोकि सेल में लिखे डाटा को बॉर्डर से दूर दिखती हे,by default cellpadding=1 होती हे ,
इसे हम अपने according adjust कर सकते है जिससे की हमारा data borderसे ज्यादा पास में नहीं रहे और content effective दिखाई दे !

<html>
   <head>table width/hight Att</head>
   <body>
   <table border="1" cellpadding="10" width=400px>
<tr>
<th colspan="3">Language's use</th>
</tr>
<tr>
<td rowspan=2>1</td>
<td rowspan=2>PHP</td>
<td>en.wikipedia.org</td>
</tr>
<tr>
<td>9gag.com</td>
</tr>
<tr>
<td rowspan=2>2</td>
<td rowspan=2>Python</td>
<td>Yahoo.com</td>
</tr>
<tr>
<td>Youtub.com</td>
</tr>
<tr>
<td>3</td>
<td>C#</td>
<td>amazon.com</td>
</tr>
</table>
</body>
</html>

Output of This

5. Row span:-

यह attribute 2 या 2 से ज्यादा row को marge (मिलादेता /जोड़ देता ) है ,जिससे की वह दोनों row combined हो जाती है !ऐसा करने के लिए हमें पहले (frist)वाली row में इस attribute को use करना होता है और जितनी भी row marge करना होती है उतना no. लिख दिया जाता हे

"जैसे की हमें 3 Row marge करना हे तो हम पहले वाले row में row span = 3 लिख देंगे "

<html>
   <head>Table Rowspan</head>
   <body>
   <table border="1" width=400px>
<tr>
<th colspan="3">Language's use</th>
</tr>
<tr>
<td rowspan=2>1</td>
<td rowspan=2>PHP</td>
<td>en.wikipedia.org</td>
</tr>
<tr>
<td>9gag.com</td>
</tr>
<tr>
<td rowspan=2>2</td>
<td rowspan=2>Python</td>
<td>Yahoo.com</td>
</tr>
<tr>
<td>Youtub.com</td>
</tr>
<tr>
<td>3</td>
<td>C#</td>
<td>amazon.com</td>
</tr>
</table>
</body>
</html>

Output of This code

6. colspan:-

जैसे हमने ऊपर देखा Row span वैसाही col span होता हे , ये column को marg करता हे , इस attribute को भी हम वैसे ही use करते है !

<html>
   <head>TabAcolsp</head>
   <body>
   <table border=1px colspan="5px" >
       <caption>Accessories</caption>
   <tr>
     <th>Item's</th>
   <th>discount</th>
     <th>Price</th></tr>
   <tr>
     <td>Keybord (hp)</td>
     <td>2%</td>
     <td>599</td>
   </tr>
   <tr>
     <td>Mouse (hp)</td>
     <td>9%</td>
     <td>299</td>
   </tr>
   <tr>
     <td>USB Hub(dell)</td>
     <td>15%</td>
     <td>1099</td>
   </tr>
   <tr>
     <th>Tax</th>
     <td colspan="2">7%</td> </tr>
   <tr>
     <th colspan="2">Total</th>
        <td>653.64</td>
     </tr>
      </table>
</body>
</html>

Output of This code

7. Background colour (bgcolor):-

table के background colour को बदलने के लिए bgcolor attribute दिया गया हे ! लेकिन यह HTML 5 में से हटा दिया गया हे !

bgcolor की बजाए HTML 5 में style Attribute का उपयोग करना चाहिए , पर वो हम css में पढेंगे ,

पर अभी हम table के background कलर को change करने के लिए bgcolor attribute का use करेंगे हम इस attributes से all row & column का कलर separate भी कर सकते है !

<html>
   <head>table width/hight Att</head>
   <body>
<table border="1" cellpadding=5 bgcolor=yellow >
<tr>
<th colspan="3" bgcolor=white >Language's use</th>
</tr>
   <tr>
     <td>Keybord (hp)</td>
     <td>2%</td>
     <td>599</td>
   </tr>
   <tr>
     <td>Mouse (hp)</td>
     <td>9%</td>
     <td>299</td>
   </tr>
   <tr>
     <td>USB Hub(dell)</td>
     <td>15%</td>
     <td>1099</td>
   </tr>
   <tr>
      <th>Tax</th>
     <td colspan="2">7%</td> </tr>
   <tr>
     <th colspan="2">Total</th>
        <td>653.64</td>
     </tr>
      </table>
</body>
</html>

W4

Search This Blog