किसी भी Data को Structured Form मे दरसाने के लिये आप Tables का उपयोग करते है. अपने वेब पेज मे Tables को शामिल करके आप उसे ओर भी Structured ओर Attractive बना सकते है. HTML मे Tables Create करने के लिये आप <table> Tag का उपयोग करते है. इस Tag का एक Sub Tag होता है जिसे <tr> Table Row Tag कहते है <tr> Tag का भी एक Sub Tag होता है जिसे <td> Table Data Tag कहते है.
किसी भी अन्य Tables की तरह HTML सारणी एक या कई Rows और Rows से एक या कई Cells से बनते है. Table Cells मे Actual Information हो सकती है यह Text, Image, HTML Element और या HTML Table भी ही हो सकती है. Data को Structured रूप मे अच्छे से प्रदर्शित करने के लिए Table का उपयोग करते है आप अपनी Website मे Table को शामिल करके उसको और भी आकर्षक बना सकते है.
कुछ आम Table Tags की List आप नीचे देख सकते है.
<table> Tag का उपयोग Table को परिभाषित करने के लिए किया जाता है.
<td> Tag का उपयोग Table Data को परिभाषित करने के लिए किया जाता है.
<tr> Tag का उपयोग Table Row को परिभाषित करने के लिए किया जाता है.
<th> Tag का उपयोग Table Heading को परिभाषित करने के लिए किया जाता है.
<caption> Tag का उपयोग Table Caption को परिभाषित करने के लिए किया जाता है.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table </title>
</head>
<body>
<table style="width:100%" border="2px">
<tr>
<th>Name</th>
<th colspan="2">cell phone</th>
</tr>
<tr>
<td>Saharaukh</td>
<td>66644973</td>
<td>23452397</td>
</tr>
<tr>
<td>Salman</td>
<td>66644973</td>
<td>23452397</td>
</tr>
<tr>
<td>Amir</td>
<td>66644973</td>
<td>23452397</td>
</tr>
<tr>
<td>Akshay</td>
<td>66644973</td>
<td>23452397</td>
</tr>
<tr>
<td>Amit</td>
<td>66644973</td>
<td>23452397</td>
</tr>
</table>
</body>
</html>
Table Border Attribute का उपयोग करते हुए Table और Table Cells की Outside Boundaries के लिए Grids/Borders को Set किया जा सकता है.
हम इस Attribute के लिए एक Numerical Value दे सकते है और Borders की Thickness को Specifies कर सकते है Value "0" निर्धारित करने के लिए कोई Borders नही Specifies करता है.
<!DOCTYPE html>
<html>
<head>
<title>Table Border Example</title>
</head>
<body>
<table border="2">
<tr >
<td>cell one</td>
<td>cell two</td>
<td>cell one</td>
<td>cell two</td>
</tr>
<tr>
<td>cell three</td>
<td>cell four</td>
<td>cell three</td>
<td>cell four</td>
</tr>
<tr >
<td>cell one</td>
<td>cell two</td>
<td>cell one</td>
<td>cell two</td>
</tr>
<tr>
<td>cell three</td>
<td>cell four</td>
<td>cell three</td>
<td>cell four</td>
</tr>
<tr >
<td>cell one</td>
<td>cell two</td>
<td>cell one</td>
<td>cell two</td>
</tr>
<tr>
<td>cell three</td>
<td>cell four</td>
<td>cell three</td>
<td>cell four</td>
</tr>
</table>
</body>
</html>
Table Heading <th> ... </ th> Tag का उपयोग करके Table मे Columns के लिए Heading को Set किया जा सकता है. इसके लिए Columns के लिए Heading Cells को Define किया जा सकता है.
Heading Cell Table मे अन्य Cells के समान होता है और इसको उसी तरह Manipulation किया जा सकता है. Heading Tag के बीच का Text Bold मे Display होता है और Table Cells के भीतर Centered होता है.
<!DOCTYPE html>
<html>
<head>
<title>Table Heading Example</title>
</head>
<body>
<table>
<tr>
<th>Column One</th>
<th>Column two</th>
<th>Column three</th>
<th>Column four</th>
</tr>
<tr>
<td>cell one</td>
<td>cell two</td>
<td>cell three</td>
<td>cell four</td>
</tr>
<tr>
<td>cell one</td>
<td>cell two</td>
<td>cell three</td>
<td>cell four</td>
</tr>
<tr>
<td>cell one</td>
<td>cell two</td>
<td>cell three</td>
<td>cell four</td>
</tr>
<tr>
<td>cell one</td>
<td>cell two</td>
<td>cell three</td>
<td>cell four</td>
</tr>
<tr>
<td>cell one</td>
<td>cell two</td>
<td>cell three</td>
<td>cell four</td>
</tr>
<tr>
<td>cell one</td>
<td>cell two</td>
<td>cell three</td>
<td>cell four</td>
</tr>
</table>
</body>
</html>
Colspan Attribute Columns की संख्या को Define करता है जो Cell को Horizontally रूप से और या Merge होना चाहिए.
अगर आप सिंगल Cell में Row मे दो या अधिक Cell को Merge करना चाहते है तो आप Colspan के उपयोग से कर सकते है.
Colspan (Column Span) को Horizontally रूप से Merged किया गया जो Cell के Left से Right है Colspan की Default Value 1 है.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>