html table design using css

html table design using css

html table

Hi Friends today we are going to learn about html table.in this lesson we will learn how to create html table ,table border,table cellspaing,colspan and rowspan..at the last we will learn how to design html table using css..
HTML Table: 
how to create html table ..

<table>
   <tr>
      <th>Name</th>
   <th>Skill</th>
   </tr>
   <tr>
      <td>Joya Sengupta</td>
   <td>Javascript,php,css</td>
   </tr>
   
   <tr>
      <td>Minaxshi</td>
   <td>PHP,Laravel</td>
   </tr>
</table>

Basic HTML Table ..After run this code you will get result look like below..

html table design using css

html table border:
Now we will add border to our html table...

<table border="2px">
   <tr>
      <th>Name</th>
   <th>Skill</th>
   </tr>
   <tr>
      <td>Joya Sengupta</td>
   <td>Javascript,php,css</td>
   </tr>
   
   <tr>
      <td>Minaxshi</td>
   <td>PHP,Laravel</td>
   </tr>
</table>

Your Result will be look like below:

html table design using css

Now it's looking ugly ...now we use table cellspacing to delete space within cells..
table cellspacing:

<table border="2px" cellspacing="0">
   <tr>
      <th>Name</th>
   <th>Skill</th>
   </tr>
   <tr>
      <td>Joya Sengupta</td>
   <td>Javascript,php,css</td>
   </tr>
   
   <tr>
      <td>Minaxshi</td>
   <td>PHP,Laravel</td>
   </tr>
</table>

Your Result:

html table

Now it's look fine..

Table colspan and rowspan:
 HTML Table colspan Example:

<table border="2px" cellspacing="0" cellpadding="2">
   <tr>
      <th colspan="2">Name</th>
   <th colspan="2">Skill</th>
   </tr>
   <tr>
      <td>David</td>
   <td>Richard</td>
   <td>PHP</td>
   <td>Laravel</td>
   </tr>
   <tr>
      <td>Prakash</td>
   <td>Priya</td>
   <td>Java</td>
   <td>Python</td>
   </tr>
</table>

Result:

html table

HTML Table rowspan Example:
HTML Table rowspan

<table border="1px" cellspacing="0" cellpadding="2">
   <tr>
      <th>Name</th>
   <td>Prakash Roy</td>
   </tr>
   <tr>
     <th rowspan="2">Email</th>
   <td>Prakash@gmail.com</td>
   </tr>
   <tr>
      <td>Prakash@yahoo.com</td>
   </tr>
</table>

Result:

html rowspan

html table design using css:
HTML Table Design Example 1:
CSS Code HTML Table design:

html table design using css

 table{
 border-collapse:collapse;
 width:30%;
 }
 th,td{
   border:1px solid green;
 }
 th{
   font-size:18px;
   background:black;
   color:white;
   padding:6px;
 }
 td{
   padding:6px;
  
   font-style:italic;
 }
 tr:nth-child(odd){
     background:#009933;
  color:indigo;
  }
 tr:nth-child(even){
     background:#3399ff;
  color:white;
  } 
tr:hover{
  background:#ff0000;
  color:white;
  cursor:wait;
}

Full Codes:

<style>
 table{
 border-collapse:collapse;
 width:30%;
 }
 th,td{
   border:1px solid green;
 }
 th{
   font-size:18px;
   background:black;
   color:white;
   padding:6px;
 }
 td{
   padding:6px;
  
   font-style:italic;
 }
 tr:nth-child(odd){
     background:#009933;
  color:indigo;
  }
 tr:nth-child(even){
     background:#3399ff;
  color:white;
  } 
tr:hover{
  background:#ff0000;
  color:white;
  cursor:wait;
}  
</style>
<table>
  <tr>
     <th>Company</th>
  <th>Founder</th>
  </tr>
  <tr>
   <td>Google Inc</td>
   <td>Larray Page</td>
 </tr>
 <tr>
   <td>Microsoft Inc</td>
   <td>Bill Gates</td>
 </tr>
 <tr>
   <td>Alibaba Inc</td>
   <td>Jack Maa</td>
 </tr>

</table>

HTML CSS table design Result:

html table design using css

HTML Table Design Example 2:

html table design using css

HTML Table Design :

<style>
input[type=text]{
  padding:4px;
  border-radius:4px;
  width:50px;
 }
 input[type=submit]{
  padding:5px;
  border-radius:4px;
  background:black;
  color:white;
  cursor:pointer;
 }
 table {
    border-collapse: collapse;
    width: 40%;
}

th, td {

    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
    background-color: #4CAF50;
    color: white;
}
</style>
<table border="1" cellspacing="0">
  <tr>
     <th>Name</th>
  <th>Price</th>
  <th>Quantity</th>
  <th>Action</th>
  </tr>
 <tr>
    <td>ASUS VivoBook</td>
    <td>$ 500</td>
    <td><input type="text" name="quantity" value="1"/></td>
    <td><input type="submit" name="add_to_cart" value="Add To Cart"/></td>
  </tr> 
  <tr>
    <td>Nokia 1020</td>
    <td>$ 600</td>
    <td><input type="text" name="quantity" value="1"/></td>
    <td><input type="submit" name="add_to_cart" value="Add To Cart"/></td>
  </tr> 
</table>

That's it Friends how to create a html table and design table using css..Keep visiting ..Thank You..