Saturday, July 15, 2017

Html Tables


Hello guys, morning and welcome to this new tutorial section. In this tutorial am gonna be talking about HTML tables, half of it will be discussed now and the conclusion will be in my next tutorial.

Html tables allows web developers to arrange data like text, images, links, other tables, etc. Into rows and columns of cells.

Html tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. Here is an example below.

Example


<!DOCTYPE html>
<html>

     <head>
            <title>HTML Tables</title>
     </head>

     <body>
            <table border="3">
                  <tr>
                       <td>Row 1, Column 1</td>
                       <td>Row 1, Column 2</td>
                  </tr>

                  <tr>
                       <td>Row 2, Column 1</td>
                       <td>Row 2, Column 2</td>
                  </tr>
            </table>
     </body>

</html>

In the above code, the border is an attribute of <table> tag and it is used to put a border accross all the cells. If you do not need border, then you can use border="0".

Feel free to try the above code out using your text editor for a better understanding. You can also drop your questions via the comment box below. Now having known that lets move on to the next phase.

You can also read our tutorial post on: Html Images

Table Heading

Table heading can be defind using <th> tag. This tag will be put to replace <td> tag, which is used to represent actual data cell. Normally you will put your top row as table heading as shown below

Example


<!DOCTYPE html>
<html>

     <head>
            <title>HTML Tables Header</title>
     </head>

     <body>
            <table border="3">
                  <tr>
                       <th>Name</th>
                       <th>Matric Number</th>
                  </tr>
                  <tr>
                       <td>Nkpara Kennedy</td>
                       <td>1602062080</td>
                  </tr>  
                  <tr>
                       <td>Bamidele</td>
                       <td>1602062060</td>
                  </tr>
            </table>
     </body>

</html>

Try to practice using your text editor.

Cellpadding and Cellspacing Attribute

There are two attributes called the cellpadding and cellspacing which you will make use of in adjusting the white space in your table cells. The cellspacing attribute is used to define the width of the border, while cellpadding represents the distance between cell borders and the content within a cell.

Example


<!DOCTYPE html>
<html>

     <head>
            <title>HTML Tables Cellpadding</title>
     </head>

     <body>
            <table border="3" cellpadding="6" cellspacing="8">  
                  <tr>
                       <th>Name</th>
                       <th>Matric Number</th>
                  </tr>
                  <tr>
                       <td>Nkpara Kennedy</td>
                       <td>1602062080</td>
                  </tr>  
                  <tr>
                       <td>Bamidele</td>
                       <td>1602062060</td>
                  </tr>
            </table>
     </body>

</html>

Try to practice using your text editor.

Colspan and Rowspan Attribute

The colspan attribute can be used if you want to merge two or more columns into a single column. The rowspan is used in a similar way to merge two or more rows.

You can also read our tutorial post on: Html Document Structure

Example


<!DOCTYPE html>
<html>

     <head>
            <title>HTML Tables Colspan/Rowspan</title>
     </head>

     <body>
            <table border="3">
                  <tr>
                       <th>Column 1</th>
                       <th>Column 2</th>
                       <th>Column 3</th> 
                  </tr>
                  <tr>
                       <td rowspan="2">Row 1 Cell 1</td>
                       <td>Row 1 Cell 2</td>
                       <td>Row 1 Cell 3</td>
                  </tr>  
                  <tr>
                       <td>Row 2 Cell 2</td>
                       <td>Row 2 Cell 3</td>
                  </tr>
                  <tr>
                       <td colspan="3">Row 3 Cell 1</td>
                  </tr> 
            </table>
     </body>

</html>

Try to practice using your text editor.

Tables Backgrounds

You can set table background by making use one of the following two ways:
1. bgcolor attribute - You can set background color for a whole table or for just one cell.
2. background attribute - You can also set background image for a whole table or just one cell. You can also set border color using the bordercolor attribute.

Example


<!DOCTYPE html>
<html>

     <head>
            <title>HTML Tables Background</title>
     </head>

     <body>
            <table border="3" bordercolor="blue" bgcolor="red">   
                  <tr>
                       <th>Column 1</th>
                       <th>Column 2</th>
                       <th>Column 3</th> 
                  </tr>
                  <tr>
                       <td rowspan="2">Row 1 Cell 1</td>
                       <td>Row 1 Cell 2</td>
                       <td>Row 1 Cell 3</td>
                  </tr>
                  <tr>
                       <td>Row 2 Cell 2</td>
                       <td>Row 2 Cell 3</td>
                  </tr>
                  <tr>
                       <td colspan="3">Row 3 Cell 1</td>
                  </tr> 
            </table>
     </body>

</html>

Here is an example of background attribute

Example


<!DOCTYPE html>
<html>

     <head>
            <title>HTML Tables Background</title>
     </head>

     <body>
            <table border="3" bordercolor="blue" background="/images/test.png"> 
                  <tr>
                       <th>Column 1</th>
                       <th>Column 2</th>
                       <th>Column 3</th> 
                  </tr>
                  <tr>
                       <td rowspan="2">Row 1 Cell 1</td>
                       <td>Row 1 Cell 2</td>
                       <td>Row 1 Cell 3</td>
                  </tr>
                  <tr>
                       <td>Row 2 Cell 2</td>
                       <td>Row 2 Cell 3</td>
                  </tr>
                  <tr>
                       <td colspan="3">Row 3 Cell 1</td>
                  </tr> 
            </table>
     </body>

</html>

You can try the above code out using your text editor and feel free to drop your questions.

You can also read our tutorial post on: Html Basic Tags2

Table Height and Width
You can set the table height and width by making use of the height and width attributes. The table height or width can be specified in terms of pixels or percentage of available screen area.

Example

<!DOCTYPE html>
<html>

     <head>
            <title>HTML Tables Height and Width</title>
     </head>

     <body>
            <table border="3" width="500"  height="200">           
                  <tr>
                       <td>Row 1, Column 1</td>
                       <td>Row 1, Column 2</td>
                  </tr>
                  <tr>
                       <td>Row 2, Column 1</td>
                       <td>Row 2, Column 2</td>
                  </tr>
            </table>
     </body>

</html>

Alright guys! this is where we are going to be wrapping it up for this tutorial guide. We will discuss about the rest of the Html table in our next tutorial, bye for now.
Share:

0 comments:

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.