HTML And CSS RESPONSIVE Table Blog Par Kaise Add Karte hai

HTML And CSS RESPONSIVE Table Blog par kaise Add karte hai . Iss Article me Responsive Table ki jankari Share karuga or Kuch Site bhi Batane ki Koshis karuga jaha Aap ek Better Table Create kar Sakte hai And  learn kar sakte hai . 

Image me jo Table Show ho rahi hai Wo real demo hai Table issi Tarah show hogi .

First kuch People's Aaise Bhi hoge Jo Responsive ka mean nahi jante hoge to Mai Unhe Batana Chahata hu ki Responsive hota hai
har device par fits Aana [web language me Responsive] for Example Desktop , Mobile , and Tab etc . 

Note - Mai jo Aaj Responsive Table ki Coding sharing karne ja raha ho Usse Pahele Yeh Batana Chatata hu Agar iss ka Use Agar Blogger Template par kare to Template Par Old Table ki Coding Remove kar dijiye Otherwise coding Work nahi kar payegi .

First Aapne Blogger par login kare . 

2 - Ab Template ke Options par Click kare . 

3 - Ab Edit HTML  ke Options par Click kare . 

4 - Ab Niche di Gayi  CSS Coding ko Aapne Template par  Add kare . 

/*

Responsive Table Mv km empire

*/

@media screen and (max-width: 400px) {

  table {font-size: 70%;}

}

@media screen and (max-width: 250px) {

  table {font-size: 50%;}

}

@media screen and (max-width: 150px) {

  table {font-size: 30%;}

}

table {

  width: 100%;

  border-collapse: collapse;

}

tr:nth-of-type(odd) {

  background: #eee;

}

th {

  background: #333;

  color: white;

  font-weight: bold;

}

td, th {

  padding: 2px;

  border: 1px solid #ccc;

  text-align: center;

}

.table a

{

display:block;

text-decoration:none;

}

NOTE - Jaha se Aap Old Table ki CSS coding  Remove karege wahi Add kar dijiye . 

HTMT STEP 

5 - Ab ek New post ya page Open kare . 

6 - Ab page html ke Option par Click kare . 

7 - niche diya gaya code copy kare Aapne page par paste kar dijiye 

<table><thead>

<tr>   <th>web name with page link</th><th>income MAY 2016</th><th>JUNE 2016</th>  </tr>

</thead>  <tbody>

<tr>   <td>first</td>   <td>Second</td>   <td>Third</td>  </tr>

<tr>   <td>first</td>   <td>Second</td>   <td>Third</td>  </tr>

<tr>   <td>first</td>   <td>Second</td>   <td>Third</td>  </tr>

<tr>   <td>first</td>   <td>Second</td>   <td>Third</td>  </tr>

<tr>   <td>first</td>   <td>Second</td>   <td>Third</td>  </tr>

<tr>   <td>first</td>   <td>Second</td>   <td>Third</td>  </tr>

<tr>   <td>first</td>   <td>Second</td>   <td>Third</td>  </tr>

<tr>   <td>first</td>   <td>Second</td>   <td>Third</td>  </tr>

<tr>   <td>first</td>   <td>Second</td>   <td>Third</td>  </tr>

<tr>   <td>first</td>   <td>Second</td>   <td>Third</td>  </tr>

</tbody> </table>

Now preveiw Check kare or phir Publish kar dijiye . 

Tip's Ab jab Aapko Table Add karne ho Only Html Code Add kare post par Because CSS Aapne Add kar di hai jo ki Template me ek hi Baar add karni hoti hai . 

Agar Aap Table Banana learn karna Chahate hai ya Other kuch W3School me bhi Learn kar sakte hai . Click here 

LAST WORD - Mai ek Baar or Batana Chahata hu jab Tak Aap Old Table ki CSS Coding Remove Nahi karte Responsive Table nahi Show hogi .