<घंटा/>
हम CSS का उपयोग करके तालिकाओं के लिए शैलियों को परिभाषित कर सकते हैं।
और उसके तत्वों को स्टाइल करने के लिए निम्नलिखित गुणों का उपयोग किया जाता है - सीमा
CSS बॉर्डर प्रॉपर्टी का इस्तेमाल बॉर्डर-चौड़ाई, बॉर्डर-स्टाइल और बॉर्डर-कलर को परिभाषित करने के लिए किया जाता है।
सीमा-पतन
इस गुण का उपयोग यह निर्दिष्ट करने के लिए किया जाता है कि क्या
तत्वों की एक साझा या अलग सीमा होनी चाहिए।
कैप्शन
कैप्शन-साइड प्रॉपर्टी का उपयोग टेबल कैप्शन बॉक्स को लंबवत स्थिति में करने के लिए किया जाता है।
खाली-कोशिकाएं
इस गुण का उपयोग किसी तालिका के रिक्त कक्षों के प्रदर्शन को निर्दिष्ट करने के लिए किया जाता है।
टेबल-लेआउट किसी तालिका की पंक्तियों, स्तंभों और कक्षों को बिछाने के लिए ब्राउज़र द्वारा उपयोग किए जाने वाले एल्गोरिदम को परिभाषित करना।
उदाहरण
निम्नलिखित उदाहरण तालिकाओं की शैली को स्पष्ट करते हैं -
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Bookman Old Style', serif;
}
th {
letter-spacing: 1.9px;
}
#one {
border-right: thick solid blue;
}
td {
text-align: center;
}
</style>
</head>
<body>
<h2>Employee List</h2>
<div>
<table>
<tr>
<th id="one">Employee</th>
<th>Department</th>
</tr>
<tr>
<td>John </td>
<td>Marketing</td>
</tr>
<tr>
<td>Brad</td>
<td>Finance</td>
</tr>
<tr>
<td>Tim </td>
<td>IT</td>
</tr>
<tr>
<td>Steve</td>
<td>Operations</td>
</tr>
</table>
</div>
</body>
</html> आउटपुट
यह निम्न आउटपुट देता है -
उदाहरण <!DOCTYPE html>
<html>
<head>
<style>
table {
float: left;
empty-cells: hide;
box-shadow: inset 0 0 4px orange;
}
tr {
box-shadow: inset 0 0 10px greenyellow;
}
td {
font-style: italic;
box-shadow: inset 0 0 8px red;
}
table,td {
margin: 6px;
padding: 6px;
border: 1px solid black;
}
table
</style>
</head>
<body>
<table>
<caption>Demo Table</caption>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
<tr>
<td>demo</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>demo</td>
</tr>
<tr>
<td></td>
<td>demo</td>
<td></td>
</tr>
</table>
</body>
</html> आउटपुट
यह निम्न आउटपुट देता है -
CSS
सीएसएस के साथ तुलना तालिका कैसे बनाएं?
CSS के साथ एक रिस्पॉन्सिव टेबल बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
border-collapse: collapse;
&nb
कैसे सीएसएस के साथ एक उत्तरदायी तालिका बनाने के लिए?
CSS के साथ एक रिस्पॉन्सिव टेबल बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
font-family: 'Segoe UI',
CSS में स्क्रॉल पर फिक्स्ड हैडर के साथ HTML टेबल्स
पोस्टियन:स्टिकी और टॉप:0 सेट करके, हम HTML टेबल में स्क्रॉल पर एक फिक्स्ड हेडर बना सकते हैं। उदाहरण निम्नलिखित उदाहरण हमें इस बात का अंदाजा देते हैं कि इसे कैसे लागू किया जाए - <!DOCTYPE html>
<html>
<head>
<style>
div {
color: white;
display: flex;
