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.

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

The 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>

Here, 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".

You can try the above code out using your text editor for better understanding and feel free to drop your questions. Now having known that lets move on to the next phase.

You can also read: Html Images

Table Heading
Table heading can be defind using <th> tag. This tag willl 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 attribute called  cellpadding and cellspacing which you will use to adjust the white space in your table cells. The cellspacing attributs defines 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
You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you is to use rowspan if you want to merge two or more rows.

You can also read: 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 using 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 whole table or just one cell. You can also set border color using 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: Html Basic Tags2

Table Height and Width
You can set a table height and width using height and width attributes. You can specify table height or width in terms of pixels or in terms of 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 we gonna stop here for today. We will talk about the conclusion of HTML tables in our next tutorial, bye for now.
Share:

0 comments:

Post a Comment