HTML Table || HTML

HTML

Table in Html is create using <table> Tag. Table is the collection of rows and collection. Data in Html Table can be Text, Images and Links.

Table in Html consists of many number of rows as <tr>. Inside each row contains cell as <td>. The Structure of Table is as Following:

<table>
<tr>
      <td></td>
</tr>
</table>

Example #1:

 <table border=1>
  <tr>
    <th>Roll Number</th>
    <th>Name</th> 
    <th>Grade</th>
  </tr>
  <tr>
    <td>12</td>
    <td>John</td> 
    <td>A+</td>
  </tr>
</table>

Output:

 

Colspan:

Colspan is use to make cell with more than one column.

<table border=1>
        <tr>
          <th>Roll Number</th>
          <th>Name</th> 
          <th>Grade</th>
          <th colspan="2">Interest</th>
        </tr>
        <tr>
          <td>12</td>
          <td>John</td> 
          <td>A+</td>
          <th>Math</th>
          <th>Computer</th>
        </tr>
      </table>

Output:

Rowspan:

Rowspan is use to make a cell with multiple rows.

 <table border=1>
        <tr>
          <th>Roll Number</th>
          <td>1</td>     
        </tr>
        <tr>
          <th rowspan="4">Subject</th>
          <td>Maths</td>
          <td>Science</td>
        </tr>
        <tr>
        <td>Physis</td>
        <td>Chemistry</td>
        </tr>
</table>

 

Output:

     

Links in HTML :

Link is create in Html using <a> Tag. It has attribute href which contain of url of that link.On clicking that link will let us to some website.

  <table border=1>
        <tr>
          <th>Google</th>
          <td><a href="www.google.com">Google</a></td> 
          
        </tr>
        <tr>
                <th>Facebook</th>
                <td><a href="www.facebook.com">Facebook</a></td> 
        </tr>
        <tr>
                <th>Twitter</th>
                <td><a href="www.google.com">Twitter</a></td> 
        </tr>
 </table>

Output:

   

Images in Html :

Image is display in html using <img> Tag. Html Image has “src” as attribute which is path of the Image

<table border=1>
        <tr>
          <th>Google</th>
          <td><img src="google.jpg" width="50px"></td> 
          
        </tr>
        <tr>
                <th>Facebook</th>
                <td><img src="facebookk.png" width="50px"></td> 
        </tr>
        <tr>
                <th>Twitter</th>
                <td><img src="twitter.png" width="50px"></td> 
        </tr>
 </table>

 

 

Output:

Cellpadding in Html :

Cellpadding is attribute of <table> which apply padding on each cell of the table.

Syntax:

<table cellpadding=”pixels”>

Example #2:

<table border=1>
        <tr>
          <th>Name</th>
          <td>Marks</th> 
          
        </tr>
        <tr>
          <td>John</td>
          <td>100</td> 
        </tr>
        <tr>
        <td>Mark</td>
        <td>132</td> 
        </tr>
        <tr>
        <td>Alita</td>
        <td>321</td> 
        </tr>
                      
      </table>  
 
<table border=1 cellpadding="10px">
        <tr>
          <th>Name</th>
          <td>Marks</th> 
          
        </tr>
        <tr>
          <td>John</td>
          <td>100</td> 
        </tr>
        <tr>
        <td>Mark</td>
        <td>132</td> 
        </tr>
        <tr>
        <td>Alita</td>
        <td>321</td> 
        </tr>
                      
      </table>

 

Output:

 

  Note: There are many Compilers you can use to run  the HTML.CSS,JAVASCRIPT and PHP codes like Brackets, visual studio and Atom . The best and recommended editor is Visual Studio if you have a System with Sufficient requirements.

 

For more Examples Related CSS,html and Java Script Visit on Coding Academics

For Web,Java and Assembly language related Semester Projects please Visit on Programming Zone.    

Leave a Reply

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