Introduction of CSS Tables in Hindi
इस tutorial मे CSS Tables in Hindi Property के बारे मे detail मे बताएँगे।
Data को tabular format मे दिखाने के लिए HTML Table का उपयोग किया जाता है। Table द्वारा present data को आप CSS की मदद से Style कर सकते है।
Table Border
Table को border देने के लिये border property का इस्तेमाल किया जाता है।
उदाहरण
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h3>css tables in hindi</h3>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>jon</td>
<td>Louise</td>
</tr>
<tr>
<td>curran</td>
<td>kevin</td>
</tr>
</table>
</body>
</html>Full-Width Table
Width Property की मदद से आप Table की width को set कर सकते है।
उदाहरण
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
table {
width: 100%;
}
</style>
</head>
<body>
<h3>css tables in hindi</h3>
<h3>Full-Width Table</h3>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>jon</td>
<td>Louise</td>
</tr>
<tr>
<td>curran</td>
<td>kevin</td>
</tr>
</table>
</body>
</html>Collapse Table Borders
border-collapse property की मदद से आप border को single border मे collapse कर सकते है।
उदाहरण
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
table {
width: 100%;
border-collapse: collapse;
}
</style>
</head>
<body>
<h3>css tables in hindi</h3>
<h3>Collapse Table Borders</h3>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>jon</td>
<td>Louise</td>
</tr>
<tr>
<td>curran</td>
<td>kevin</td>
</tr>
</table>
</body>
</html>Table Width and Height
width and Height property की मदद से आप Table की width and Height को set कर सकते है।
उदाहरण
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
table {
width: 100%;
border-collapse: collapse;
}
th {
height: 50px;
}
</style>
</head>
<body>
<h3>Table Width and Height</h3>
<h3>css tables in hindi</h3>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>jon</td>
<td>Louise</td>
</tr>
<tr>
<td>curran</td>
<td>kevin</td>
</tr>
</table>
</body>
</html>CSS Table Alignment
Horizontal Alignment
Horizontal Alignment के लिए text-align property का इस्तेमाल होता है।
text-align property का इस्तेमाल आप <th> or <td> के साथ कर सकते है।
<th> elements by defaults center-aligned होते है और <td> elements left-aligned होते है।
text-align property की मदद से आप content को left, right या center मे align कर सकते है।
उदाहरण
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
table {
width: 100%;
border-collapse: collapse;
}
td {
text-align: center;
}
}
</style>
</head>
<body>
<h3>Horizontal Alignment</h3>
<h3>css tables in hindi</h3>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>jon</td>
<td>Louise</td>
</tr>
<tr>
<td>curran</td>
<td>kevin</td>
</tr>
</table>
</body>
</html>Vertical Alignment
Vertical Alignment के लिए vertical-align property का इस्तेमाल होता है।
vertical-align property का इस्तेमाल आप <th> or <td> के साथ कर सकते है।
By default Table मे content vertically middle मे align होते है।
vertical-align property की मदद से आप content को top, bottom या center मे align कर सकते है।
उदाहरण
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
table {
width: 100%;
border-collapse: collapse;
}
td {
height: 50px;
vertical-align: top;
}
}
</style>
</head>
<body>
<h3>css tables in hindi</h3>
<h3>Vertical Alignment</h3>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>jon</td>
<td>Louise</td>
</tr>
<tr>
<td>curran</td>
<td>kevin</td>
</tr>
</table>
</body>
</html>Table Padding
Padding Property की मदद से <td> and <th> elements को padding दे सकते है।
उदाहरण
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
table {
width: 100%;
border-collapse: collapse;
}
td, th {
padding: 20px;
}
</style>
</head>
<body>
<h3>Table Padding</h3>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>jon</td>
<td>Louise</td>
</tr>
<tr>
<td>curran</td>
<td>kevin</td>
</tr>
</table>
</body>
</html>Horizontal Dividers
Horizontal Dividers के लिए <td> और <th> के साथ border-bottom property का इस्तेमाल होता है।
उदाहरण
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
td, th {
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<h3>Horizontal Dividers</h3>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>jon</td>
<td>Louise</td>
</tr>
<tr>
<td>curran</td>
<td>kevin</td>
</tr>
</table>
</body>
</html>Hoverable Table
Table के row पर mouse cursor लाने पर उस row को hover selector की मदद से highlight कर सकते है।
उदाहरण
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
td, th {
text-align: center;
border-bottom: 1px solid lightgreen;
}
tr:hover
{
background-color:grey;
}
</style>
</head>
<body>
<h3>Hoverable Table</h3>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>jon</td>
<td>Louise</td>
</tr>
<tr>
<td>curran</td>
<td>kevin</td>
</tr>
</table>
</body>
</html>Striped Tables
nth-child() selector और background-color की मदद से stripes table बनाया जाता है।
उदाहरण
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
td, th {
text-align: center;
border-bottom: 1px solid lightgreen;
}
tr:nth-child(even)
{
background-color:grey;
}
</style>
</head>
<body>
<h3>Striped Tables</h3>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>jon</td>
<td>Louise</td>
</tr>
<tr>
<td>curran</td>
<td>kevin</td>
</tr>
<tr>
<td>jon</td>
<td>Louise</td>
</tr>
<tr>
<td>curran</td>
<td>kevin</td>
</tr>
</table>
</body>
</html>Table Color
table को color देने के लिए आप background-color और color property का इस्तेमाल कर सकते है।
उदाहरण
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
td, th {
text-align: center;
}
tr:nth-child(even)
{
background-color:grey;
}
th {
background-color: green;
color: white;
}
</style>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>jon</td>
<td>Louise</td>
</tr>
<tr>
<td>curran</td>
<td>kevin</td>
</tr>
</table>
</body>
</html>Responsive Table
किसी भी table को responsive बनाने के लिए उस table को div element के अंदर रखते है और उसे overflow-x: auto; property देते है।
जब स्क्रीन की size small होती है तब table horizontal scroll bar show करती है जिसे हम पूरी table को देख सकते है।
उदाहरण
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
td, th {
text-align: center;
}
tr:nth-child(even)
{
background-color:grey;
}
th {
background-color: green;
color: white;
}
</style>
</head>
<body>
<h2>Add a border to a table:</h2>
<div style="overflow-x:auto;">
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>point</th>
<th>point</th>
<th>point</th>
<th>point</th>
<th>point</th>
<th>point</th>
<th>point</th>
<th>point</th>
<th>point</th>
<th>point</th>
<th>point</th>
<th>point</th>
</tr>
<tr>
<td>jon</td>
<td>Louise</td>
<td>40</td>
<td>40</td>
<td>40</td>
<td>40</td>
<td>40</td>
<td>40</td>
<td>40</td>
<td>40</td>
<td>40</td>
<td>40</td>
<td>40</td>
<td>40</td>
</tr>
<tr>
<td>curran</td>
<td>kevin</td>
<td>80</td>
<td>80</td>
<td>80</td>
<td>80</td>
<td>80</td>
<td>80</td>
<td>80</td>
<td>80</td>
<td>80</td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
</table>
</div>
</body>
</html>