Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Simple Zebra Table by using Css3

    • 0
    • 1
    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 433
    Comment on it

    Hello Readers,
    Here is the Example of Simple Zebra Table.

    Here is the HTML

    <table>
              <tr>
                <th>Name</th>
                <th>Date of Birth</th>
                <th>Age</th>
                <th>Gender</th>
                <th>Contact Number</th>
                <th>Address</th>
              </tr>
              <tr>
                <td>Louren</td>
                <td>18-08-1990</td>
                <td>25</td>
                <td>Female</td>
                <td>9876543210</td>
                <td>U.K</td>
              </tr>
              <tr>
                <td>Rogger</td>
                <td>18-08-1991</td>
                <td>24</td>
                <td>Male</td>
                <td>9876543210</td>
                <td>U.S</td>
              </tr>
            </table>
    


    Here is Css

    table {
      border: 1px solid #d1d1d1;
      width: 100%;
    }
    table tr th{
      text-align: left;
      background: #ddd;
    }
    table tr th, table tr td {
      padding: 5px;
    }
    
    table tr:nth-child(odd) { background:#ddd; }
    table tr:nth-child(even) { background:#fff; }
    

    Hope this article is helpful for you.. :)

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: