Table of Contents
What is HTML Table?
HTML Table एक HTML Logical Element है जिसका उपयोग Data को Table के रूप में Display करने के लिए किया जाता है। एक HTML Table में Data को Row और Column में Structuring किया जाता है। यह Web Pages पर जानकारी को Attractive और Organized Manner से Display करने का एक प्रमुख तरीका है।
- HTML Table Tag का उपयोग Data को Tabular From (Row * Column) में Display करने के लिए किया जाता है। एक Row में कई Columns हो सकते हैं।
- हम <tr>, <td>, और <th> Element की मदद से <Table> Element का उपयोग करके Data को Tabular Form में Display करने के लिए एक Table बना सकते हैं।
- प्रत्येक Table में, Table Row <tr> Tag द्वारा Define की जाती है, Table Header <th> Tag द्वारा Define की जाती है, और Table Data <td> Tag द्वारा Define किया जाता है।
Horizontal Header
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Table</title>
</head>
<body>
<h1>Horizontal Header</h1>
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
<tr>
<td>Rohul</td>
<td>rohul@test.com</td>
<td>87665456</td>
</tr>
<tr>
<td>Rohit</td>
<td>rohit@test.com</td>
<td>569489035</td>
</tr>
</table>
</html>
Vertical Header
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Table</title>
</head>
<body>
<h1>Vertical Header</h1>
<table>
<tr>
<th>Name</th>
<td>Rohul</td>
<td>Rohit</td>
</tr>
<tr>
<th>Email</th>
<td>rohul@test.com</td>
<td>rohit@test.com</td>
</tr>
<tr>
<th>Phone</th>
<td>87665456</td>
<td>569489035</td>
</tr>
</table>
</html>
Table Border with CSS
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Table</title>
<style>
table,th,td{
border: 1px solid;
border-collapse: collapse;
}
</style>
</head>
<body>
<h1>Example of Table Border</h1>
<table>
<tr>
<th>Name</th>
<td>Rohul</td>
<td>Rohit</td>
</tr>
<tr>
<th>Email</th>
<td>rohul@test.com</td>
<td>rohit@test.com</td>
</tr>
<tr>
<th>Phone</th>
<td>87665456</td>
<td>569489035</td>
</tr>
</table>
</html>
HTML Table Colspan & Rowspan
- Multiple Column पर Cell Span बनाने के लिए, Colspan Attribute का उपयोग करते है।
- Multiple Row पर Cell Span बनाने के लिए, Rowspan Attribute का उपयोग करते है।
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Table</title>
<style>
table,th,td{
border: 1px solid;
border-collapse: collapse;
}
</style>
</head>
<body>
<h1>Example Table Colspan & Rowspan</h1>
<table>
<tr>
<th>Name</th>
<td>Rohul</td>
<td>Rohit</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td colspan="2">89545554634</td>
</tr>
<tr>
<td>87665456</td>
<td>569489035</td>
</tr>
</table>
</html>
Trending Today
Facebook
Pinterest
LinkedIn
WhatsApp
