How to Add Tables in HTML

HTML Tables are used to make an arrangement of data in tabular format to add images, links, preformatted text, etc in a meaning full manner by the help of rows and columns to display the content of HTML document on the webpage. HTML Tables are created  using <table> tags. Let us understand HTML Tables in detail.

Syntax of HTML Table

The <table> tag are used to define HTML Tables and to represent the HTML document information.

The <tr> tag are used to define rows inside the  HTML Tables, and the <th> tag are used to define the header of the HTML Tables which are generally bold and centered.

The <td> tag is used to define the data and also to create the column inside the <tr> tags which are generally aligned in the left side of the row.

The <caption> tag is used to define the content of the table caption. The <tbody> tag is used to define the content of the table body.

Features of HTML Tables

  • The HTML Table tag supports Global and Event Attributes.
  • The HTML Table use <td> elements   to attach images , list and  text etc.
  • The HTML Table use variety of Attributes to structure the rows and columns.
  • The HTML Table use rowspan to merge two or more rows and colspan to merge two or more column in a single cell of the table.

Basic Example of HTML Table

Use of row and column  in a tabular form representing data and value :

<!DOCTYPE html>
<html>
<body>
<h2>Example of HTML TABLE</h2>
<table style="width:75%">
  <tr>
    <th>Website</th>
    <th>Topic</th> 
    <th>Sub-topic</th>
  </tr>
  
  <tr>
    <td>wikipedia</td>
    <td>programming</td>
    <td>history of programing</td>
  </tr>
  
  <tr>
    <td>Codebun</td>
    <td>HTML</td>
    <td>Use of editor in html</td>
  </tr>
 
</table>

</body>
</html>

output: 

 

Use of Table tag in HTML

1.  Border in HTML Table: It is used by applying CSS property in HTML elements.  you can change the spacing of the border by changing its value.

 

Example:

<!DOCTYPE html>
<html>

   <head>
      <title>Border in HTML Tables</title>
   </head>
  
   <body>
      <table border = "1
      ">
         <tr>
            <td>LANGUAGE-  python</td>
            <td>LANGUAGE-  c programming</td>
         </tr>
         
         <tr>
            <td>LANGUAGE-  JAVA</td>
            <td>LANGUAGE-  C++</td>
         </tr>
      </table>
      
   </body>
</html>

Output:

 

2. Cell padding in HTML Table: It is used by applying HTML Attributes or CSS property to give space between the border and the content of the cell.

 

Example: 

<html>

   <head>
      <title>HTML Table Cellpadding</title>
   </head>
  
   <body>
      <table border = "1" cellpadding = "20">
         <tr>
            <th>Name</th>
            <th>Roll no.</th>
         </tr>
          <tr>
            <td>Krishna</td>
            <td>011</td>
         </tr>
         <tr>
            <td>Shahbaz</td>
            <td>017</td>
         </tr>
         <tr>
            <td>Aman</td>
            <td>016</td>
         </tr>
      </table>
   </body>
  
</html>

output: 

3. Captions in HTML Table: It is used as a title or heading on the top of the table by using the <caption> tag in the HTML document.

 

Example: 

<!DOCTYPE html>
<html>
<head>
    <title>HTML Table</title>
    <style>
        table {
            width: 500px;
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid black;
        }
        th, td {
            padding: 10px;
        }
    </style>
</head>
<body>
    <h2>Example of Caption in HTML Table</h2>
    <table>
        <caption>GENIUS RECORDS</caption>
        <tr>
            <th>No.</th>
            <th> Name</th>
            <th>IQ</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Alan Turing</td>
            <td>185</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Srinivasa Ramanujan</td>
            <td>185</td>
        </tr>
    </table>
</body>
</html

output: