इस ब्लॉग पोस्ट में हम How to fix table header and footer in HTML? के बारे में बात करेंगे। इसके साथ साथ इससे सम्बंधित और अन्य सवालों का भी जवाब देंगे।
How to fix table header and footer in HTML?
आइये इसको एक एक करके समझने का प्रयास करते है।
How do I fix my header in HTML?
<!DOCTYPE html>
<html>
<head>
<title>फिक्स्ड हेडर वाली टेबल</title>
<style>
/* टेबल की स्टाइल */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border: 1px solid #ddd;
}
/* फिक्स्ड हेडर */
thead th {
position: sticky; /* हेडर को फिक्स्ड करने के लिए */
top: 0; /* पेज के शीर्ष पर फिक्स */
background-color: #f2f2f2; /* बैकग्राउंड रंग */
z-index: 1; /* हेडर को आगे लाने के लिए */
}
/* टेबल बॉडी में स्क्रॉलिंग */
tbody {
display: block;
max-height: 200px; /* टेबल की अधिकतम ऊंचाई */
overflow-y: auto; /* वर्टिकल स्क्रॉलिंग */
}
/* कॉलम का आकार सही करने के लिए */
thead, tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>क्रमांक</th>
<th>नाम</th>
<th>आयु</th>
<th>शहर</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>रवि</td>
<td>25</td>
<td>दिल्ली</td>
</tr>
<tr>
<td>2</td>
<td>सीमा</td>
<td>30</td>
<td>मुंबई</td>
</tr>
<!-- अधिक पंक्तियाँ जोड़ें -->
</tbody>
</table>
</body>
</html>
How do I fix my footer in HTML?
<!DOCTYPE html>
<html>
<head>
<title>फिक्स्ड टेबल फ़ुटर</title>
<style>
/* टेबल की स्टाइल */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border: 1px solid #ddd;
}
/* टेबल बॉडी में स्क्रॉलिंग */
tbody {
display: block;
max-height: 200px; /* टेबल की अधिकतम ऊंचाई */
overflow-y: auto; /* वर्टिकल स्क्रॉलिंग */
}
/* कॉलम का आकार सही करने के लिए */
thead, tbody tr, tfoot {
display: table;
width: 100%;
table-layout: fixed;
}
/* फिक्स्ड टेबल फ़ुटर */
tfoot {
display: table;
width: 100%;
position: sticky; /* फ़ुटर को फिक्स्ड करने के लिए */
bottom: 0; /* पेज के सबसे नीचे फिक्स */
background-color: #f2f2f2; /* बैकग्राउंड रंग */
z-index: 1; /* फ़ुटर को आगे लाने के लिए */
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>क्रमांक</th>
<th>नाम</th>
<th>आयु</th>
<th>शहर</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>रवि</td>
<td>25</td>
<td>दिल्ली</td>
</tr>
<tr>
<td>2</td>
<td>सीमा</td>
<td>30</td>
<td>मुंबई</td>
</tr>
<!-- अधिक पंक्तियाँ जोड़ें ताकि स्क्रॉल हो सके -->
</tbody>
<tfoot>
<tr>
<td colspan="4" style="text-align: center;">© 2024 मेरी वेबसाइट | सभी अधिकार सुरक्षित</td>
</tr>
</tfoot>
</table>
</body>
</html>
How to make table header sticky in HTML?
<!DOCTYPE html>
<html>
<head>
<title>Sticky Table Header Example</title>
<style>
/* टेबल की स्टाइल */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border: 1px solid #ddd;
}
/* स्टिकी हेडर */
thead th {
position: sticky; /* हेडर को स्टिकी बनाने के लिए */
top: 0; /* पेज के शीर्ष पर चिपकाने के लिए */
background-color: #f2f2f2; /* बैकग्राउंड रंग */
z-index: 1; /* हेडर को आगे लाने के लिए */
}
/* टेबल बॉडी में स्क्रॉलिंग */
tbody {
display: block;
max-height: 200px; /* टेबल बॉडी की अधिकतम ऊंचाई */
overflow-y: auto; /* वर्टिकल स्क्रॉलिंग */
}
/* कॉलम का आकार सही करने के लिए */
thead, tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>क्रमांक</th>
<th>नाम</th>
<th>आयु</th>
<th>शहर</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>रवि</td>
<td>25</td>
<td>दिल्ली</td>
</tr>
<tr>
<td>2</td>
<td>सीमा</td>
<td>30</td>
<td>मुंबई</td>
</tr>
<!-- अधिक पंक्तियाँ जोड़ें ताकि स्क्रॉल हो सके -->
</tbody>
</table>
</body>
</html>
How do I align text in a table header in HTML?
<!DOCTYPE html>
<html>
<head>
<title>Align Text in Table Header</title>
<style>
/* टेबल की स्टाइल */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
border: 1px solid #ddd;
}
/* हेडर में टेक्स्ट को संरेखित करना */
.left-align {
text-align: left; /* बाईं ओर संरेखण */
}
.center-align {
text-align: center; /* केंद्र में संरेखण */
}
.right-align {
text-align: right; /* दाईं ओर संरेखण */
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th class="left-align">क्रमांक</th>
<th class="center-align">नाम</th>
<th class="right-align">आयु</th>
<th class="center-align">शहर</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>रवि</td>
<td>25</td>
<td>दिल्ली</td>
</tr>
<tr>
<td>2</td>
<td>सीमा</td>
<td>30</td>
<td>मुंबई</td>
</tr>
<!-- अधिक पंक्तियाँ जोड़ें -->
</tbody>
</table>
</body>
</html>
हम आशा करते है की आपको आपके सवाल How to fix table header and footer in HTML? का जवाब मिल गया होगा।
सबसे ज्यादा पढ़े जाने वाला blog post 👇🏻
- How to define subscripted text? explain in hindi
- How to fix table header and footer in HTML?
- How to define a title for the document in html with example in hindi
- How to underline text in html using css
- How to define an unordered list in HTML?
Free Notes Pdf Download करने के लिए निचे दिए गए बटन को क्लिक करे 🔥🚀
