fbpx
April 2, 2020
html tables

Tutorial 10# Understanding HTML Tables and How to Insert Them

In this article we will be discussing about HTML tables and how you can structure them in your web document. Imaging you have a structured data in a tabular form and you need to place them on your web page. HTML tables can be used to achieve this and with the help of java script we can also achieve having a more complex table.

READ PREVIOUS TUTORIAL ON : Tutorial 9# Understanding HTML Images and How to Insert Them

What are HTML Tables?

These are tables organized using HTML. They allow web authors organize and structure their data in a tabular form which can be viewed on the web browser.

Constructing an HTML Table

To construct an HTML table we make use of the HTML Table tags (<table> &</table>). We insert the table rows using the table row tags (<tr> &</tr>) and we insert the table cells using the table cell tags (<td> & </td>).

Example shown below

<!DOCTYPE html>
<html>

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


         </tr>
         <tr>
               <td> first COLUMN IN ROW 2</td>
               <td> second COLUMN IN ROW 2</td>
   
   
            </tr>
         

      </table>
      




   </body>
	
</html>

RESULT ON WEB BROWSER

html tables

Observing the codes we added border value and set it to “3”. you can choose to set it to zero which automatically removes the border. the lower the value the thinner the border. The higher the border value the thicker the border.

We also added the table column tags in between the table row tags. This means that we created a row and partitioned it into two columns.

Adding Heading to Tables

most tables come with headers or head titles to add a title to your table we insert an additional row as the first on the codes after the <table> tags then make use of <th> &</th> tags for table heading as shown below.

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Webpage</title>
   </head>
	
   <body>
      <table border="3" >
            <tr>
                  <th> first table heading</th>
                  <th> second table heading</th>
      
      
               </tr>


         <tr>
            <td> first COLUMN IN ROW 1</td>
            <td> second COLUMN IN ROW 1</td>


         </tr>
         <tr>
               <td> first COLUMN IN ROW 2</td>
               <td> second COLUMN IN ROW 2</td>
   
   
            </tr>
         

      </table>
      




   </body>
	
</html>

RESULT ON WEB BROWSER

Cell Padding and Cell Spacing

when styling tables, sometimes we need to have spaces between the cells of the tables and we can achieve that using cell padding and cell spacing.

cell padding involves padding the cells to create spaces between the cells and the table border while cell spacing involves creating spaces between cells and we can achieve both using the cellpadding and cellspacing attributes.

example shown below

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Webpage</title>
   </head>
	
   <body>
      <table border="3"  cellpadding ="5" cellspacing ="5" >
            <tr>
                  <th> first table heading</th>
                  <th> second table heading</th>
      
      
               </tr>


         <tr>
            <td> first COLUMN IN ROW 1</td>
            <td> second COLUMN IN ROW 1</td>


         </tr>
         <tr>
               <td> first COLUMN IN ROW 2</td>
               <td> second COLUMN IN ROW 2</td>
   
   
            </tr>
         

      </table>
      




   </body>
	
</html>

The cellspacing and cellpadding are added inside the table opening tag and are assigned values in numbers as shown above.

RESULT ON WEB BROWSER

html tables with spacing

RowSpan and ColSpan

Rowspan is used to add up two rows together while colspan is used to add up two columns together.

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Webpage</title>
   </head>
	
   <body>
      <table border="3"  cellpadding ="5" cellspacing ="5" >
            <tr>
                  <th> first table heading</th>
                  <th> second table heading</th>
                  <th> third table heading</th>
      
      
            </tr>

            <tr> 
                  <td rowspan="3"> row span section  </td>
                  <td> first column first row</td>
                  <td> second column  first row</td>
                  <td> third column first row</td>
      
      
            </tr>
            <tr> 
                  <td> third column  second row</td>
                  <td> fourth column second row</td>
      
      
            </tr>
            
            
            <tr>
                  <td colspan="2"> col span section  </td>
   
   
               </tr>

         

      </table>
      




   </body>
	
</html>

RESULT ON WEB BROWSER

row and column span html tables

Adding background colors to tables

To add a background color to a table, we add the background color attribute in between the table opening tag as shown below

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Webpage</title>
   </head>
	
   <body>
      <table border="3"  cellpadding ="5" cellspacing ="5" bgcolor="yellow" bordercolor="red" >
            <tr>
                  <th> first table heading</th>
                  <th> second table heading</th>
                  <th> third table heading</th>
      
      
            </tr>

            <tr> 
                  <td rowspan="3"> row span section  </td>
                  <td> first column first row</td>
                  <td> second column  first row</td>
                  <td> third column first row</td>
      
      
            </tr>
            <tr> 
                  <td> third column  second row</td>
                  <td> fourth column second row</td>
      
      
            </tr>
            
            
            <tr>
                  <td colspan="2"> col span section  </td>
   
   
               </tr>

         

      </table>
      




   </body>
	
</html>

RESULT ON WEB BROWSER

color to html tables

Adding height and width to tables

To add a suitable height and width to tables we include the height and width attribute to the opening tag of the HTML table as shown below

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Webpage</title>
   </head>
	
   <body>
      <table border="3"  bgcolor="yellow" bordercolor="red" height="5" width="5" >
            <tr>
                  <th> first table heading</th>
                  <th> second table heading</th>
                  <th> third table heading</th>
      
      
            </tr>

            <tr> 
                  <td rowspan="3"> row span section  </td>
                  <td> first column first row</td>
                  <td> second column  first row</td>
                  <td> third column first row</td>
      
      
            </tr>
            <tr> 
                  <td> third column  second row</td>
                  <td> fourth column second row</td>
      
      
            </tr>
            
            
            <tr>
                  <td colspan="2"> col span section  </td>
   
   
               </tr>

         

      </table>
      




   </body>
	
</html>

RESULT ON WEB BROWSER

adding height and width to html tables

Table Caption

To add a caption to a table we use a simple caption tag placed below the Table opening tag as shown below

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Webpage</title>
   </head>
	
   <body>
      <table border="3"  bgcolor="yellow" bordercolor="red" height="5" width="5" >
         <caption>table caption</caption>
            <tr>
                  <th> first table heading</th>
                  <th> second table heading</th>
                  <th> third table heading</th>
      
      
            </tr>

            <tr> 
                  <td rowspan="3"> row span section  </td>
                  <td> first column first row</td>
                  <td> second column  first row</td>
                  <td> third column first row</td>
      
      
            </tr>
            <tr> 
                  <td> third column  second row</td>
                  <td> fourth column second row</td>
      
      
            </tr>
            
            
            <tr>
                  <td colspan="2"> col span section  </td>
   
   
               </tr>

         

      </table>
      




   </body>
	
</html>

Adding Table Header, Body and Footer To HTML tables

HTML tables can also be divided into header, body and footer. sometimes you might want to include this in your tables but be aware that you will be needing the HTML rowspan and colspan in some cases and also the table head tag (<thead> & </thead>) , table body tag (<tbody> & </tbody>) and the table footer tag (<tfoot> & </tfoot>). example shown below

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Webpage</title>
   </head>
	
   <body>
      <table border="3"  bgcolor="yellow" bordercolor="red"  >
         <caption>table caption</caption>
         <thead>
            <td colspan="3">table header</td>
         </thead>
         <tbody>
               <tr>
                     <th> first table heading</th>
                     <th> second table heading</th>
                     <th> third table heading</th>
         
         
               </tr>
   
               <tr> 
                     
                     <td> first column first row</td>
                     <td> second column  first row</td>
                     <td> third column first row</td>
         
         
               </tr>
               <tr> 
                     <td> third column  second row</td>
                     <td> fourth column second row</td>
         
         
               </tr>

         </tbody>

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

      </table>
      




   </body>
	
</html>

RESULT ON WEB BROWSER

Conclusion

Now you understand the basics of HTML TABLES and you are really doing great. Lets move on to the next tutorial on   HTML LIST

Leave a Reply

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