HTML में Table (टेबल) का उपयोग डेटा को पंक्ति (Row) और स्तंभ (Column) के रूप में व्यवस्थित करने के लिए किया जाता है। जैसे — Student data, college data , hospital data , Employee data आदि |
HTML Table का Structure :
एक HTML Table मुख्य रूप से इन टैग्स से बनती है:
| Tag | उपयोग |
|---|---|
<table> | टेबल बनाने के लिए |
<tr> | Table Row (पंक्ति) बनाने के लिए |
<th> | Table Heading (शीर्षक) बनाने के लिए |
<td> | Table Data (डेटा) लिखने के लिए |
1. <table> Tag
<table> टैग का उपयोग HTML में टेबल बनाने के लिए किया जाता है।
Syntax:
<table>
Table Content
</table>2. <tr> Tag (Table Row)
<tr> का पूरा नाम Table Row है।
इसका उपयोग टेबल में एक नई Row बनाने के लिए किया जाता है।
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<table>
<tr>
<td>Rahul</td>
<td>25</td>
</tr>
</table>
</body>
</html>Output :
| Rahul | 25 |
3. <th> Tag (Table Heading)
<th> का उपयोग टेबल का Heading बनाने के लिए किया जाता है।
यह डिफॉल्ट रूप से Bold और Center में दिखाई देता है।
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</table>
</body>
</html>Output :
| Name | Age |
|---|
4. <td> Tag (Table Data)
<td> का पूरा नाम Table Data है।
इसका उपयोग टेबल में वास्तविक जानकारी लिखने के लिए किया जाता है।
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<table>
<tr>
<td>Rahul</td>
<td>HTML</td>
</tr>
</table>
</body>
</html>Output :
| Rahul | HTML |
HTML Table का Complete Program
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<h2>Student Details</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Course</th>
<th>Age</th>
</tr>
<tr>
<td>Rahul</td>
<td>HTML</td>
<td>20</td>
</tr>
<tr>
<td>Amit</td>
<td>CSS</td>
<td>22</td>
</tr>
</table>
</body>
</html>Output :
Student Details
| Name | Course | Age |
|---|---|---|
| Rahul | HTML | 20 |
| Amit | CSS | 22 |
HTML Table के Attributes
1. Border Attribute
Border Attribute का उपयोग टेबल में बॉर्डर लगाने के लिए उपयोग होता है।
Example:
<table border="1">2. Cell Padding
Cell padding का उपयोग Cell के अंदर की जगह बढ़ाने के लिए उपयोग होता है।
Example:
<table cellpadding="10">3. Cell Spacing
Cell Spacing का उपयोग दो Cells के बीच की दूरी बढ़ाने के लिए उपयोग होता है।
Example:
<table cellspacing="5">Table में Column को जोड़ना
1. colspan Attribute
colspan Attribute का उपयोग एक Cell को कई Columns में फैलाने के लिए उपयोग होता है।
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="3">Student Details</th>
</tr>
<tr>
<td>Rahul</td>
<td>HTML</td>
<td>CSS</td>
</tr>
</table>
</body>
</html>Output :
| Student Details | ||
|---|---|---|
| Rahul | HTML | CSS |
Table में Row को जोड़ना
2. rowspan Attribute
Rowspan attribute का उपयोग एक Cell को कई Rows में फैलाने के लिए उपयोग होता है।
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">Rahul</td>
<td>HTML</td>
</tr>
<tr>
<td>CSS</td>
</tr>
</table>
</body>
</html>Output :
| Rahul | HTML |
| CSS |
HTML Table Example (CSS के साथ)
<!DOCTYPE html>
<html>
<head>
<style>
table{
width:100%;
border-collapse:collapse;
}
th,td{
border:1px solid black;
padding:10px;
text-align:center;
}
th{
background-color:lightblue;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Course</th>
<th>Year</th>
</tr>
<tr>
<td>Rahul</td>
<td>Web Development</td>
<td>2026</td>
</tr>
</table>
</body>
</html>Output :
