CSS Tables In Hindi – Styling Tables In CSS In Hindi

CSS

CSS Tables In Hindi – Data Ko Tabular Form Me Dikhane Ke Liye Html Tables Ko Use Kiya Jata Hai , Par Ham Jante Hai Ki Html Tables Se Sirf Table Create Ki Ja Skti Hai ,Use Attractive Dikhane Ke Liye Css Proprties Ka Use Krna Hoga ,Jisse Ki User Data Ko Asani Se Read Kar Ske Aur Tables Se Attract Ho Ske |

Yadi Aapne  HTML Full Course  And CSS Full Course And Python Full Course And PHP Full Course Nhi Read Kiya Hai To Aap Vah Bhi Read Kar Sakte Hai |

Tables In CSS In Hindi

Sabse Phle Ham Ek Table Bnate Hai Jisme CSS Properties Ka Bhi Use Kiya Gya Ho, Aur Fir Un Properties Ko Smjhenge ,To Ab Ek Html Table Create Krte Hai Aur Use CSS Proprties Ki Help Se Style Bhi De Dete Hai |

Html Tables Read Kre – Html Tables

Example : Student Details Ke Liye Ek Table Create Krte Hai Jisme Name, Roll No, Age Tin Column Lete Hai, Aur Kuchh CSS Properties Use Krke Use Style Dete Hai |

<!DOCTYPE html>
<html>
<head>
<style>
h2{
	text-align: center;
}
#student {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#student td, #student th {
  border: 1px solid #ddd;
  padding: 8px;
}


#student tr:hover {background-color: #ddd;}

#student th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: blue;
  color: white;
}
</style>
</head>
<body>
<h2>Master Programing CSS Tables Tutorial</h2>  
<table id="student">
  <tr>
    <th>Name</th>
    <th>Roll No</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Aman</td>
    <td>1</td>
    <td>16</td>
  </tr>
  <tr>
    <td>Ankit</td>
    <td>2</td>
    <td>17</td>
  </tr>
  <tr>
    <td>Armaan</td>
    <td>3</td>
    <td>18</td>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>4</td>
    <td>15</td>
  </tr>
  <tr>
    <td>Ravi</td>
    <td>5</td>
    <td>17</td>
  </tr>
  <tr>
    <td>Raju</td>
    <td>6</td>
    <td>18</td>
  </tr>
  
</table>
</body>
</html>

Output :

Upr Diye Gye Example Me Hamne Dekha Ki CSS Properties Use Krke Ek Simple Table Ko Bahut Attractive Bnaya Ja Skta Hai ,Is Tutorial Me Ham In Properties Ko Samjhenge |

Table Borders In CSS In Hindi

Ek Table Me Border Dene Se Table Bahut Attractive Lagti Hai ,Table Ko Border Dene Ke Liye CSS Ki border property Ka Use Kiya Jata Hai |

Example : Ek Table Create Krte Hai Jisme Do Column Firstname Aur Lastname Lete Hai Aur Border Property Usr Krte Hai

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h2>CSS Border Property</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
  </tr>
  <tr>
    <td>Ratan</td>
    <td>Tata</td>
  </tr>
</table>

</body>
</html>

Output :

Upr Diye Gye Example Me Hmne Dekha Ki Border Kis Prkar Dikhayi Dete Hai , Table Me <table> ,<th>,<td> Tino Tag Par Border Property Use Ki Gyi Hao lsliye Ek Border Puri Table Par , Ek <th> ,Aur Ek Border <td> Par Dikh Rha Hai |

Full-Width Table In CSS In Hindi

Upr Jo Example Me Table Create Ki Thi Vo Hme Screen Par Small Size Me Dikhti Hai, Aur Ydi Hm Ek Aaisi Table Bnana Chahe Jo Screen Par Full Size Me Ya Puri Screen Ki Puri Width Le ,To Iske Liye Hme <table> Tag Ki Width 100% Set Krni Hogi |

Example : Chlo Pichhle Example Me Hi Table Ki Width 100% Set Krke Dekhte Hai |

<!DOCTYPE html>
<html>
<head>
<style>
table {
	width : 100%;
}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h2>CSS Table Width 100%</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
  </tr>
  <tr>
    <td>Ratan</td>
    <td>Tata</td>
  </tr>
</table>

</body>
</html>

Output :

Jaisa Ki Hamne Pichhle Do Example Me Dekha Ki Hme Table Me Double Border Dikh Rhe Hai , Aisa Isliye Ho Rha Hai Ki <table>, <th>, <td> Tino Separate Border Rkh Rhe Hai | To Chaliye Is Problem Ko Kese Solve Kar Skte Hai Uska Solution Dekhte Hai |

Collapse Table Borders In CSS In Hindi

Double Border Ki Problem Ko Solve Krne Ke Liye border-collapse Property Ka Use Kiya Jata Hai ,Jo Ki Table Borders Ko Ek Single Border Me Collapse Kr Deta Hai |

Example : To Chliye Pichhle Example Me Hi border-collapse property Use Krke Dekhte Hai |

<!DOCTYPE html>
<html>
<head>
<style>
table {
	width : 100%;
    border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h2>CSS Table Border Collapse</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
  </tr>
  <tr>
    <td>Ratan</td>
    <td>Tata</td>
  </tr>
</table>

</body>
</html>

Output :

To Hmne Dekha Ki border-collapse Property Ki Help Se Border Ko Collapse Kiya Jata Hai , Dekha Ab Hmari Table Phle Se Behtar Aur Attractive Dikh Rhi Hai |

Ab Agr Hme Table Par Hi Border Chahiye , Aur <th> aur <td> Par Border Nhi Chahiye To Ham Kevel <table> Tag Par Hi border Property Add Krenge |

Example – Pichhle Example Me Hi Kuchh Changes Krke , Only <table> Par border Property Set Krte Hai |

<!DOCTYPE html>
<html>
<head>
<style>
table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid black;
}
</style>
</head>
<body>

<h2>Table Single Border</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
  </tr>
  <tr>
    <td>Ratan</td>
    <td>Tata</td>
  </tr>
</table>

</body>
</html>

Output :

CSS Table Size In Hindi

Ek Web Page Me Table Ko Perfect Size Dena Bahur Jaruri Hai ,Perfect Size Dene Se Web Page Bahut Hi Organized And Attractive Lagta Hai , To Ab Ham Sikhenge Ki Ek Table Ki Different-Different Size Kis Prkar Di Ja Skti Hai |

Table Width and Height In CSS In Hindi

Table Ko Attractive Bnane Ke Liye Hme Table Ya Table Heading <th> Ya Table Data <td> Ko Ek Suitable Height Aur Width Dena Hota Hai , Jo Ki Ham height Aur width Properties Ki Help Se Asani Se De Skte Hai |

Example : <table> Ki width 100% Aur <th> Ki height 60 px Set Krte Hai |

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  height: 60px;
}
</style>
</head>
<body>

<h2>width and height Properties</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
  </tr>
  <tr>
    <td>Ratan</td>
    <td>Tata</td>
  </tr>
</table>

</body>
</html>

Output :

To Hmne Dekha Ki <th> Ki Height 60 px Set Krne Se , <th> Ki Height <td> Ki Height se Jyada Ho Jati Hai ,Aur Table Ab Aur Bhi Achhi Dikh Rhi Hai ,To Is Tarike Se Ham Kisi Bhi Table Tag ki Height And Width Set Kar Skte Hai |

CSS Table Alignment In Hindi

Ham Dekh Rhe The Ki Upr Diye Gye Examples Me <th>Tag Wala ContentCenter Me Dikh Rha Tha Aur <td> Tag Wala Contet Table Me Left Side Me Dikh Rha Hai ,Jisse Ki Table Bahut Ajib Si Dikh Rhi Hai , To Is Probelm Ko Solve Krne Ke Liye Alignment Property Ka Use Kiya Jata Hai |

Horizontal Alignment In CSS In Hindi

Text Ko Horizontally Align Krne Ke Liye text-align Property Ka Use Kiya Jata Hai , text-align property Ki Help Se Ham <th> And <td> Tag Ke Conten Ko Left , Right Ya Center Align Kar Skte Hai |

By Default Horizontally <th> Ka Content Center Aligned Aur <td> Ka Content Left Aligned Hota Hai |

Example : Is Example Me Ham <td> Ke Content Ko Center Aligned Krenge , Iske Liye Hme <td> Ke Style text-align : center; Set Krna Hoga |

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  text-align: center;
}
</style>
</head>
<body>

<h2>Text-align Property</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
  </tr>
  <tr>
    <td>Ratan</td>
    <td>Tata</td>
  </tr>
</table>

</body>
</html>

Output :

To Hmne Dekha Ki <td> Me text-align : center; Add Krne Se <td> Ka Conent Bhi Center Me A Gya Jisse Hmari Table Aur Bhi Shandaar Dikhne Lgi Hai |

Vertical Alignment In CSS In Hindi

Text Ko Vertucally Align Krne Ke Liye vertical-align Property Ka Use Kiya Jata Hai , Jiski Help Se Ham <th> Aur <td> Ke Content Ko Top ,Bottom Ya Middle Me Set Kr Skte Hai |

By Default <th> Aur <td> Dono Ka Content Vertically middle-aligned Hota Hai |

Example : Is Example Me Ham <td> Ke Content Ko Bottom Aligned Krenge Iske Liye <td> Ki Style Me vertical-align: bottom; Set Krna Hoga |

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  height: 50px;
  vertical-align: bottom;
}
</style>
</head>
<body>

<h2>Vertical-align Property</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
  </tr>
  <tr>
    <td>Ratan</td>
    <td>Tata</td>
  </tr>
</table>
</body>
</html>

Output :

CSS Table Style In Hindi

Table Border, Table Size, Table Alignment Etc. Ke Alawa ,Table Me Different-Different Style Add Krke Table Ko Aur Bhi Attractive Bnaya Ja Skta Hai |

Table Padding In CSS In Hindi

Table Ke Border Aur Content Ke Bich Space Ko Control Krne Ke Liye padding Property Ka Use Kiya Jata Hai , Border Aur Content Ke Bich Ek Accha Space Dene Se Table Bahut Hi Attractive Dikhti Hai , Ye Space Dene Ke Liye <th> Aur <td> Ke Style Me padding Add Ki Jati Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {  
  border: 1px solid #ddd;
  text-align: left;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 20px;
}
</style>
</head>
<body>

<h2>Padding Property</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
  </tr>
  <tr>
    <td>Ratan</td>
    <td>Tata</td>
  </tr>
</table>

</body>
</html>

Output :

Horizontal Dividers In CSS In Hindi

Table Ki Rows Me Divider Add Krne Ke Liye <th> Aur <td> Me border-bottom Property Ka Use Kiya Jata Hai ,Divider Add Krne Se Table Bahut Hi Attractive Dikhti Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>

<h2>Bordered Table Dividers</h2>


<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
  </tr>
  <tr>
    <td>Ratan</td>
    <td>Tata</td>
  </tr>
</table>

</body>
</html>

Output :

Hoverable Table In CSS In Hindi

Web Pages Me Ajkl Jo Table Sbse Jyada Use Ki Jati Hai Vo Hai Hoverable Table ,Hoverable Matlb Jb Ham Mouse Table Ki Kisi Row Pr Lekr Jate Hai To Us Row Ki Style Me Kuchh Change Hota Hai , Aisi Tables Bahut Jyada Use Ki Jati Hai , Table Ki Row ( <tr> ) Me :hover Selector Ki Help Se Style Di Jati Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

tr:hover {background-color:green;}
</style>
</head>
<body>

<h2>Hoverable Table</h2>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
  </tr>
  <tr>
    <td>Ratan</td>
    <td>Tata</td>
  </tr>
</table>

</body>
</html>

Striped Tables In CSS In Hindi

Striped Tables nth-child() Selector Ka Use Kiya Jata Hai , Selector Ki Help Se Rows Ko Select Krke Un Par Css Properties Apply Kar Skte Hai |

Example : Chlo Ham nth-child() Selector Ki Help Se Table Ki Even Row Ko Select Kr Ke Unke Background Color Ko Hotpink Set Krte Hai |

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {background-color: hotpink}
</style>
</head>
<body>

<h2>Striped Table</h2>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
  </tr>
  <tr>
    <td>Ratan</td>
    <td>Tata</td>
  </tr>
</table>

</body>
</html>

Output :

Table Color In CSS In Hindi

Jaisa Ki Name Se Pata Chl Rha Hai Ki Ham Table Ko Color Bhi De Skte Hai , Ek Shi Color Dekar Table Ko Bahut Achha Bnaya Ja Skta Hai |

Example : <th> Ke Background Color Ko blue Set Kr Ke Dekhte Hai |

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}


th {
  background-color: blue;
  color: white;
}
</style>
</head>
<body>

<h2>Colored Table</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
  </tr>
  <tr>
    <td>Ratan</td>
    <td>Tata</td>
  </tr>
</table>

</body>
</html>

Output :

Responsive Table In CSS In Hindi

Jab Small Screen Me Table Ko Dekhenge To Table Proper Dikhegi Nhi , Table Ko Proper Aur Complete Dekhane Ke Liye Ham Use Responsive Banate Hai , Ek Responsive Table Horizontal Scroll Bar Dikhayegi Agr Screen Small Hui to |

Example : Jab Screen Small Hogi To Table Ke Niche Ek Scoll Bar Dikhayi Dega |

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {background-color: cyan;}
</style>
</head>
<body>

<h2>Responsive Table</h2>

<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
    <tr>
      <td>Bill</td>
      <td>Gates</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Elon</td>
      <td>Musk</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Ratan</td>
      <td>Tata</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
    </tr>
  </table>
</div>

</body>
</html>

Output :

Leave a Reply

Your email address will not be published. Required fields are marked *