एचटीएमएल <टेबल> टैग
उदाहरण
एक साधारण HTML तालिका, जिसमें दो कॉलम और दो पंक्तियाँ हैं:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
<table>टैग एक HTML तालिका को परिभाषित करता है ।
एक HTML तालिका में एक <table>तत्व और एक या अधिक <tr> ,
<th> , और <td> तत्व होते हैं।
<tr> तत्व तालिका पंक्ति को परिभाषित करता है, <th> तत्व तालिका शीर्षलेख को परिभाषित करता है, और <td> तत्व तालिका कक्ष को परिभाषित करता है।
एक HTML तालिका में <caption> , < colgroup> , < thead> , <tfoot> , और <tbody> तत्व भी शामिल हो सकते हैं।
ब्राउज़र समर्थन
| Element | |||||
|---|---|---|---|---|---|
| <table> | Yes | Yes | Yes | Yes | Yes |
वैश्विक गुण
<table>टैग HTML में वैश्विक विशेषताओं का भी समर्थन करता है ।
घटना गुण
<table>टैग HTML में ईवेंट विशेषताओं का भी समर्थन करता है ।
और ज्यादा उदाहरण
उदाहरण
किसी तालिका में ढही हुई सीमाओं को कैसे जोड़ें (सीएसएस के साथ):
<html>
<head>
<style>
table, th, td {
border: 1px solid
black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
उदाहरण
तालिका को राइट-एलाइन कैसे करें (सीएसएस के साथ):
<table style="float:right">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
उदाहरण
तालिका को केंद्र-संरेखित कैसे करें (सीएसएस के साथ):
<html>
<head>
<style>
table, th, td {
border: 1px solid
black;
}
table.center {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<table
class="center">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
उदाहरण
किसी तालिका में पृष्ठभूमि-रंग कैसे जोड़ें (सीएसएस के साथ):
<table style="background-color:#00FF00">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
उदाहरण
तालिका में पैडिंग कैसे जोड़ें (सीएसएस के साथ):
<html>
<head>
<style>
table, th, td {
border: 1px solid
black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
उदाहरण
टेबल चौड़ाई कैसे सेट करें (सीएसएस के साथ):
<table style="width:400px">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
उदाहरण
टेबल हेडर कैसे बनाएं:
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
<tr>
<td>John Doe</td>
<td>[email protected]</td>
<td>123-45-678</td>
</tr>
</table>
उदाहरण
कैप्शन के साथ टेबल कैसे बनाएं:
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
उदाहरण
एक से अधिक पंक्तियों या एक कॉलम में फैले टेबल सेल को कैसे परिभाषित करें:
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th colspan="2">Phone</th>
</tr>
<tr>
<td>John Doe</td>
<td>[email protected]</td>
<td>123-45-678</td>
<td>212-00-546</td>
</tr>
</table>
संबंधित पृष्ठ
एचटीएमएल ट्यूटोरियल: एचटीएमएल टेबल्स
HTML DOM संदर्भ: टेबल ऑब्जेक्ट
सीएसएस ट्यूटोरियल: स्टाइलिंग टेबल्स
डिफ़ॉल्ट सीएसएस सेटिंग्स
अधिकांश ब्राउज़र <table>निम्न डिफ़ॉल्ट मानों के साथ तत्व प्रदर्शित करेंगे:
उदाहरण
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}