HTML TUTORIAL

How To Insert Tables In Web Document Using HTML

HTML TABLES
Written by ikenna

In this article, we will be looking at how tables can be easily structured on web documents using HTML. In our previous article we looked at how to add and adjust images on a web document using HTML. if you haven’t gone through the previous course, kindly do so using the link below

PREVIOUS TUTORIAL: How To Add Images To HTML Web document

Introduction to HTML Tables

HTML tables are the traditional tables been structured on web documents using the help of HTML codes. To add a table to a web document, we use the table opening and closing tags (<table> & </table>) to tell the browser that contents present in between this tags are structured in a tabular form. Also we use the opening and closing table row tag (<tr> & </tr>) to add the rows and the closing and opening table cell tags (<td> & </td>) to add cells to the table.

Example shown below

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Web Document</title>
   </head>
	
   <body>
      <table border="3" >
         <tr>
            <td> first TABLE COLUMN IN ROW 1</td>
            <td> second TABLE COLUMN IN ROW 1</td>


         </tr>
         <tr>
               <td> first TABLE COLUMN IN ROW 2</td>
               <td> second TABLE COLUMN IN ROW 2</td>
   
   
            </tr>
         
      </table>
     
   </body>
	
</html>

RESULT ON WEB BROWSER

Using external Image on Web Document
first TABLE COLUMN IN ROW 1 second TABLE COLUMN IN ROW 1
first TABLE COLUMN IN ROW 2 second TABLE COLUMN IN ROW 2

From the above codes, you can observe clearly that we set the border value to 3. This value determines the size of the border thickness. If you don’t intend using a border, you can simply set the border value to 0. The lower the number results to thinner border width.

How to Add Heading to Tables

After structuring your table, your next step should be to give the table a head title. you can simply do this by placing the opening and closing table heading tags (<th> &</th>) in between the first table row tags or by following the steps shown below

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Web Document</title>
   </head>
	
   <body>
      <table border="3" >
            <tr>
                  <th> 1ST table heading</th>
                  <th> 2ND table heading</th>
      
      
               </tr>


         <tr>
            <td> 1ST COLUMN IN ROW 1</td>
            <td> 2ND COLUMN IN ROW 1</td>


         </tr>
         <tr>
               <td> 1ST COLUMN IN ROW 2</td>
               <td> 2ND COLUMN IN ROW 2</td>
   
   
            </tr>

      </table>
 
   </body>
	
</html>

Result on web browser

Using external Image on Web Document
1ST table heading 2ND table heading
1ST COLUMN IN ROW 1 2ND COLUMN IN ROW 1
1ST COLUMN IN ROW 2 2ND COLUMN IN ROW 2

How to add background colors to your table

To add background colors to a table, simply follow the code structure shown below as an example

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Web Document</title>
   </head>
	
   <body>
      <table border="3"  cellpadding ="5" cellspacing ="5" bgcolor="yellow" bordercolor="red" >
            <tr>
                  <th> 1st table heading</th>
                  <th> 2nd table heading</th>
                  <th> 3rd table heading</th>
      
      
            </tr>

            <tr> 
                  <td rowspan="3"> row span section  </td>
                  <td> 1st column first row</td>
                  <td> 2nd column  first row</td>
                  <td> 3rd column first row</td>
      
      
            </tr>
            <tr> 
                  <td> 3rd column  second row</td>
                  <td> 4th column second row</td>
      
      
            </tr>
            
            <tr>
                  <td colspan="2"> col span section  </td>
   
   
               </tr>
      </table>
   </body>
	
</html>

RESULT ON WEB BROWSER

Using external Image on Web Document
1st table heading 2nd table heading 3rd table heading
row span section 1st column first row 2nd column first row 3rd column first row
3rd column second row 4th column second row
col span section

Adding height and width to tables

Another important aspect of structuring tables, is adding the height and width to the table. Height and width are attributes and we can easily structure them inside the opening table tags. Example shown below

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Web Document</title>
   </head>
	
   <body>
      <table border="3"  bgcolor="yellow" bordercolor="red" height="5" width="5" >
            <tr>
                  <th> 1st table heading</th>
                  <th> 2nd table heading</th>
                  <th> 3rd table heading</th>
      
      
            </tr>

            <tr> 
                  <td rowspan="3"> row span section  </td>
                  <td> first column 1st row</td>
                  <td> 2nd column  1st row</td>
                  <td> 3rd column 1st row</td>
      
      
            </tr>
            <tr> 
                  <td> 3rd column  2nd row</td>
                  <td> 4th column 2nd row</td>
      
      
            </tr>
            
            
            <tr>
                  <td colspan="2"> col span section  </td>
   
   
               </tr>
      </table>
   </body>
	
</html>

RESULT ON WEB BROWSER

Using external Image on Web Document
1st table heading 2nd table heading 3rd table heading
row span section first column 1st row 2nd column 1st row 3rd column 1st row
3rd column 2nd row 4th column 2nd row
col span section

From the above example, we set the table height=”5″ and width=”5″

Adding Table Header, Body and Footer To HTML tables

Another important feature we can add to our tables is the header, body and footer sections. We can simply do this by using the table head tag (<thead> & </thead>) , table body tag (<tbody> & </tbody>) and the table footer tag (<tfoot> & </tfoot>) as shown in the example below

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Web document</title>
   </head>
	
   <body>
      <table border="3"  bgcolor="white" bordercolor="red"  >
         <caption>table caption</caption>
         <thead>
            <td colspan="3">table header</td>
         </thead>
         <tbody>
               <tr>
                     <th> 1st table heading</th>
                     <th> 2nd table heading</th>
                     <th> 3rd table heading</th>
         
         
               </tr>
   
               <tr> 
                     
                     <td> 1st column first row</td>
                     <td> 2nd column  first row</td>
                     <td> 3rd column first row</td>
         
         
               </tr>
               <tr> 
                     <td> 3rd column  second row</td>
                     <td> 4th column second row</td>
         
         
               </tr>

         </tbody>

            <thead>
                  <td colspan="3">table footer</td>
               </thead>
       
      </table>
     
   </body>
	
</html>

RESULT ON WEB BROWSER

Using external Image on Web document
table caption
table header
1st table heading 2nd table heading 3rd table heading
1st column first row 2nd column first row 3rd column first row
3rd column second row 4th column second row
table footer

Conclusion

The above article fully explains how to add tables to HTML web documents and we hope you fully understand them. If you have questions, kindly ask us using the comment section below

NEXT ARTICLE: INSERTING LIST IN HTML

About the author

ikenna

Leave a Comment