Tables

In HTML we can define table by using <table>.

In the table we can define table heading by using <th> tag.

In the table we can define table row's by using <tr> tag.

We use <td> tag to add data inside the each row of a table.

  
  <table>
  <tr>
    <th>st_name</th>
    <th>st_id</th>
    <th>st_marks</th>
  </tr>
  <tr>
    <td>jhon</td>
    <td>101</td>
    <td>500</td>
  </tr>
  <tr>
    <td>rocky</td>
    <td>201</td>
    <td>600</td>
  </tr>
  <tr>
    <td>bravo</td>
    <td>301</td>
    <td>800</td>
  </tr>
</table>

Table with border

We can set border of the table by using css border property.

  
  <html>
<head>
  <title> </title>
  <style>
    table,th,td{
          border:2px solid black;
    
        }
    
  </style>
</head>
<body>

  <h1>Table with border</h1>
  <table>
    <tr>
      <th>st_name</th>
      <th>st_id</th>
      <th>st_marks</th>
    </tr>
    <tr>
      <td>jhon</td>
      <td>101</td>
      <td>500</td>
    </tr>
    <tr>
      <td>rocky</td>
      <td>201</td>
      <td>600</td>
    </tr>
    <tr>
      <td>bravo</td>
      <td>301</td>
      <td>800</td>
    </tr>
  </table>

</body>

</body>
</html>

Addition Cell Padding in HTML Table

We can add cell padding inside the HTML table by using padding property of the css.We can add padding bwtween table cell's according to our requirement and make table more beatuifull.

  
  <html>
<head>
  <title> </title>
  <style>
    table,th,td{
          border:5px solid black;
    
        }
    
        th,td{
          padding:20px;
        }
    
  </style>
</head>
<body>

  <h1>Table with border</h1>
  <table>
    <tr>
      <th>st_name</th>
      <th>st_id</th>
      <th>st_marks</th>
    </tr>
    <tr>
      <td>jhon</td>
      <td>101</td>
      <td>500</td>
    </tr>
    <tr>
      <td>rocky</td>
      <td>201</td>
      <td>600</td>
    </tr>
    <tr>
      <td>bravo</td>
      <td>301</td>
      <td>800</td>
    </tr>
  </table>

</body>

</body>
</html>

Border Spacing In HTML Tables

We can add border spacing between table cells. We use border-spacing property to add border spacing.

  
  <html>
<head>
  <title> </title>
  <style>
    table,th,td{
          border:2px solid black;
    
        }
    
        table{
          border-spacing:10px;
        }
    
  </style>
</head>
<body>

  <h1>Table with border</h1>
  <table>
    <tr>
      <th>st_name</th>
      <th>st_id</th>
      <th>st_marks</th>
    </tr>
    <tr>
      <td>jhon</td>
      <td>101</td>
      <td>500</td>
    </tr>
    <tr>
      <td>rocky</td>
      <td>201</td>
      <td>600</td>
    </tr>
    <tr>
      <td>bravo</td>
      <td>301</td>
      <td>800</td>
    </tr>
  </table>

</body>

</body>
</html>

Col Span In HTML Table

To make HTML table cell span as a more then one column we use colspan property of CSS.

  
  <html>
<head>
  <title> </title>
  <style>
    table,th,td{
          border:2px solid black;
    
        }
    
        th, td {
      padding: 10px;
      text-align: left; 
    
    
    
  </style>
</head>
<body>

  <h1>Table with border</h1>
  <table>
    <tr>
      <th>st_name</th>
      <th>st_id</th>
      <th>st_marks</th>
    </tr>
    <tr>
      <td colspan="2">jhon</td>
      <td>101</td>
      <td>500</td>
    </tr>


  </table>

</body>

</body>
</html>

Row Span In HTML tables.

We can add row span in HTML table and make a cell into more then one row's. We use rowspan attribute to add row spacing between cells.

  
  <html>
<head>
  <title> </title>
  <style>
    table,th,td{
          border:2px solid black;
    
        }
    
        th, td {
      padding: 10px;
      text-align: left; 
    
    
    
  </style>
</head>
<body>

  <h1>Table with border</h1>
  <table>
    <tr>
      <th rowspan="2">st_marks</th>
      <th>st_name</th>
      <th>st_id</th>
      <th>st_marks</th>
    </tr>
    <tr>
      <td>jhon</td>
      <td>101</td>
      <td>500</td>
    </tr>


  </table>

</body>

</body>
</html>

Table With Styling

  
  <html>
<head>


  <style>
    <style>
      .myTable{
        width:50%; 
        margin: auto;
    
        border-collapse:collapse; 
      }
    
    
      .myTable tr  td{ 
        padding:15px; border:#4e95f4 1px solid;
        font-size:20px;
        text-align: left;
      }
      /* provide some minimal visual accomodation for IE8 and below */
      .myTable tr{
        background: #b8d1f3;
      }
      /*  Define the background color for all the ODD background rows  */
      .myTable tr:nth-child(odd){ 
        background: #b8d1f3;
      }
      /*  Define the background color for all the EVEN background rows  */
      .myTable tr:nth-child(even){
        background: #dae5f4;
      }
    
      .myTable th{
        font-size:20px;
        padding:15px;
      }
    
    
    
  </style>



</head>
<body>

  <table class="myTable">
    <tr>
      <th>st_name</th>
      <th>st_id</th>
      <th>st_marks</th>
    </tr>
    <tr>
      <td>jhon</td>
      <td>101</td>
      <td>500</td>
    </tr>
    <tr>
      <td>rocky</td>
      <td>201</td>
      <td>600</td>
    </tr>
    <tr>
      <td>bravo</td>
      <td>301</td>
      <td>800</td>
    </tr>

  </table>

</body>

How to create table in html