HTML Table Tag
HTML Table Tag
HTML Table को डिफाइन करने के लिए <table> Tag का इस्तेमाल किया जाता है | इन tables में rows और columns में data को represent किया जाता है | एक table में एक से ज्यादा rows होते है |
Table Row - एक single row को define करने के लिए <tr> tag का इस्तेमाल किया जाता है |
Table Heading - Row के हर table heading को define करने के लिए <th> tag का इस्तेमाल किया जाता है |
<th> tag का by default दिया हुआ text bold और align center (middle) होता है |
Table Data - Table row के हर data cell को define करने के लिए <td> tag का इस्तेमाल किया जाता है | data cells पर दिया जाने वाला data left align होता है |
इन data में text, images, links, list, table या HTML का कोई भी element हो सकता है |
Caption - <caption> tag से table के लिए caption दिया जाता है | caption का aligning by default; center (middle) होता है |
Table All Tags and Attributes:
|
TAGS |
ATTRIBUTES |
VALUE |
DESCRIPTION |
|
|
Table |
align |
Left Center Right |
इससे टेबल का अलाइन सेट किया जाता है l |
|
|
bgcolor |
Rgb(color1,color2,color3) Rgba(color1,color2,color3, opacity) Colorname
|
इससे टेबल में बैकग्राउंड कलर specify किया जाता है l |
|
|
|
border |
1 0 |
Border को दर्शाने के लिए 1 और Border को न दर्शाने के लिए 0 use किया जाता है l |
|
|
|
cellpadding |
PX |
ये border और data cell के बीच का अंतर होता है | cellpadding; by default '1' होता है l |
|
|
|
cellspacing |
PX |
ये दो cells के बीच का space होता है | अगर cellspacing; 0 होता है तो दो cells के बीच में कोई space नहीं होता है | cellspacing; by default '2' होता है | |
|
|
|
width |
PX or % |
इससे table के width को बदला जा सकता है | |
|
|
|
height |
PX or % |
इससे table के height को बदला जा सकता है | |
|
|
|
bordercolor |
color |
|
|
|
|
background |
url |
इससे टेबल में बैकग्राउंड specify किया जाता है l |
|
|
|
|
|
|
|
|
|
Caption |
align |
Left Right Top Bottom Center |
|
|
|
|
|
|
|
|
|
TR(Table Row) |
background |
url |
इससे टेबल रो में बैकग्राउंड specify किया जाता है l |
|
|
bordercolor |
colorname |
इससे टेबल रो के बॉर्डर कलर को specify किया जाता है l |
|
|
|
|
|
|
|
|
|
TH(Table Heading) |
colspan |
PX |
colspan ये attribute दो या दो से ज्यादा columns को merge करता है | |
|
|
|
|
|
|
|
|
TD(Table Data) |
rowspan |
PX |
rowspan ये attribute दो या दो से ज्यादा rows को merge करता है | |
|
|
||||
Example-
<table border="1" cellspacing="0" cellpadding="5"
width="500" height="400" bgcolor="red" >
<caption align=”top”>Registration</caption>
<tr>
<th colspan="2">Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td rowspan="2">Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td colspan="3">Row 1, Column 3</td>
</tr>
</table>
Table Header, Body, and Footer
किसी भी टेबल को तीन Portion में बांटा गया होता है – head, body और foot l
<thead> - एक अलग टेबल हेडर बनाने के लिए use किया जाता है ।
<tbody> -यह टेबल के मुख्य भाग को define करता है ।
<tfoot> - एक अलग टेबल फुटर बनाने के लिए इसका यूज़ किया जाता है ।
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<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>
</tbody>
</table>
</body>
</html>
Post a Comment