Tables


Table is a matrix like object that is use holding or tabulating other objects such as text, images, buttons or another item in a structure manner. Even if you don't see them they are present in many web pages, use as a layout. We will learn about table layout later, for now let’s start with the basics of table.

Creating a table
To create a table in HTML we will use <TABLE> tag. We will also need three other related tags to give the table rows and columns, which are <TR> table rows, <TH> table heading and <TD> table data tags
Note: <TH> and <TD> behave alike but the difference is that, <TH> as the name suggest; display the header text in bold font and align the text to the center.

In the screenshot below, we have a table containing record of employee; the table has three (3) columns and five (5) rows including the table header. Note that column is vertical while row is horizontal.



The HTML code for the table

<HTML>
<HEAD>
<TITLE> Bengallery Info. Tech. </TITLE>
</HEAD>
<BODY>

<B>EMPLOYEE RECORD</B>
<BR />

<TABLE>

<!-- Table Header -->
<TR>
     <TH>ID</TH>
     <TH>NAME</TH>
     <TH>POST</TH>
</TR>

 

<!-- Record 1 -->
<TR>
     <TD>001</TD>
     <TD>Femi Kunle</TD>
     <TD>Accountant</TD>
</TR>

<!-- Record 2 -->
<TR>
     <TD>002</TD>
     <TD>Chukwu James</TD>
     <TD>Enginneer</TD>
</TR>

<!-- Record 3 -->
<TR>
     <TD>003</TD>
     <TD>Akeem Yusuf</TD>
     <TD>Production</TD>
</TR>

<!-- Record 4 -->  
<TR>
     <TD>004</TD>
     <TD>Ejiro Blessing </TD>
     <TD>Marketer</TD>
</TR>

</TABLE>

</BODY>
</HTML>

As usual I indented and comment <!--  --> the code above to make it readable and self explaining. As you know comment is a non executable statement that the programmer uses to document or make the code to the reader by other programmer or anyone using the code.


Table border

Border gives your table an outline, making it more visible. To make a table to have a border, you simply border attribute. For example I use <TABLE BORDER=1> to set the border to 1, if you did this to the last Employee record table example.

...
<B>EMPLOYEE RECORD</B>
<BR />
<TABLE BORDER=1>

<!-- Table Header -->
<TR>
     <TH>ID</TH>
     <TH>NAME</TH>
     <TH>POST</TH>
...


The preview will now look like what we have below.



You set the border to 0 if you don’t want another border 1.

Table width
When we do not specify sizes for a table it will be stretched to fit the record, text or any other object that it hold. You can specify width for a table either in percent <TABLE WIDTH="50%"> or in pixels <TABLE WIDTH="300px">.
Continuing with our example, I set with to 50 percent (that is strength to 50% of the browser window).

...
<TABLE BORDER=1 WIDTH="50%">
<!-- Table Header -->
<TR>
     <TH>ID</TH>
     <TH>NAME</TH>  
...


And the preview


Table and Data alignment
To align a table to either of the three position, that is left, center or right (left is the default position), you use the align property of the table <TABLE ALIGN="CENTER">. The code segment below aligns the Employee sample table to the center.

...
<TABLE BORDER=1 WIDTH="50%" ALIGN="CENTER">
<!-- Table Header -->
<TR>
     <TH>ID</TH>
     <TH>NAME</TH>  
...


The preview



Likewise you can set align for Table rows <TR ALIGN=”RIGHT”> and Table data <TD ALIGN=”CENTER”>, for example to align “Chukwu James” record to center. I use the code below.

<!-- Record 2 -->
<TR ALIGN="CENTER">
     <TD>002</TD>
     <TD>Chukwu James</TD>
     <TD>Enginneer</TD>
</TR>


The preview


Similarly to align just a data in a cell <TD ALIGN=”position”>, for example I want to align the data “Accounting” to the right I use the code below

<!-- Record 1 -->
<TR>
     <TD>001</TD>
     <TD>Femi Kunle</TD>
     <TD ALIGN="CENTER">Accountant</TD>
</TR>


The preview


You can also alignment a text in a cell vertically, but to see the effect of this we must first increase the height of the row.


Row Height

To increase the height of a table row, I set the HEIGHT attribute of every cells of that row. See how I applied it to the heading of the Employee record table, below.

<TABLE BORDER=1 WIDTH="50%" ALIGN="CENTER">
...
<!-- Table Header -->
<TR>
     <TH height="100px">ID</TH>
     <TH height="100px">NAME</TH>
     <TH height="100px">POST</TH>
</TR>
...


 Note: You can set the height for <TD> just as we did for <TH>, se setting the height of the table heading to 100px should result to what we have below.

 

Now that we have set the height for the cell we will be able to see the effect of a vertical alignment when we apply it to the heading of the Employee sample table.

Note: just as you set height for a cell you can also set a height for an entire table, for example <TABLE BORDER=1 WIDTH="50%" height="400px">
or for a row, for example <TR height="100px">


Vertical alignment

To do this we add and set the VALIGN attribute of the <TH> or <TD> tag to either TOP, BOTTOM or MIDDLE. Note that the default position is the MIDDLE; in the example below I align the Name heading to the top.

<!-- Table Header -->
<TR>
     <TH height="100px">ID</TH>
     <TH height="100px" valign="top">NAME</TH>
     <TH height="100px">POST</TH>
</TR>


And the browser view will look like this.




Table background color

We can use background color for table as a whole, or its individual rows or cell.
To set background color for the entire table we add the BGCOLOR attribute to the <TABLE> tag, that is <TABLE BGCOLOR=”colour name e.g yellow or code”>, see example below

...
<TABLE BORDER=1 WIDTH="50%" ALIGN="CENTER" BGCOLOR="#CCCCCC">
<!-- Table Header -->
<TR>
     <TH>ID</TH>
     <TH>NAME</TH>
     <TH>POST</TH>
</TR>
<!-- Record 1 -->
<TR height="100px">
     <TD>001</TD>
     <TD>Femi Kunle</TD>
     <TD>Accountant</TD>
</TR>
<!-- Record 2 -->
<TR>
     <TD>002</TD>
     <TD>Chukwu James</TD>
     <TD>Enginneer</TD>
</TR>
</TABLE>

...
The example above will change the background of the table to grey. See the browser view below.



Similarly for individual rows or cells background colour we add the BGCOLOR attribute to the row <TR> tag or cell <TD> tag. That is <TR BGCOLOR=”colour name e.g yellow or code”> for row and <TD BGCOLOR=”colour name e.g yellow or code”> for cell.
In the example below, we add yellow background to first row (record 1), and lemon background to a cell with the text “Engineer” in the second row (record 2).

<!-- Record 1 -->
<TR BGCOLOR="yellow">
     <TD>001</TD>
     <TD>Femi Kunle</TD>
     <TD>Accountant</TD>
</TR>
<!-- Record 2 -->
<TR>
     <TD>002</TD>
     <TD>Chukwu James</TD>
     <TD BGCOLOR="#99FF00">Enginneer</TD>
</TR>


The browser view


Table columnspan and rowspan
Sometimes you need to merge two or more cells of columns or rows together, this is very common when you’re using table to layout or structure your web page.
For example in a 2 by 3 table we may want to merge the three cells of the first rows together using <TD COLSPAN=”3”> In this way we will have one (merged) cell in first row and three cells in second row. See the view below.


I will like us to create a new website “myweb” for this exercise and practice with all that we have learnt while using a table for the layout. Start by creating a folder name “myweb”; open the folder and create another folder inside it called “images”. The structure should look like the one below:
 


Copy any picture from your computer, paste it inside the “images” folder and rename the image file to “banner”; In my case I use the companies banner image.
 


Then create your homepage “index.htm”, inside the “myweb” folder.



Open the “index.htm” file and have the code below inside it.

 

Index.htm
<HTML>
<HEAD>
<TITLE>Welcome to BICL website</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH="50" BORDER=0 align="center">
<TR>
<TD COLSPAN=3>
<IMG SRC="images/banner.jpg">
</TD>
</TR>
<TR height="300px">
  <TD width="14%" VALIGN=TOP BGCOLOR="#FFFF99">
<b>MY LINK</b> <br />
Home <br />
Contact <br />
About Us</TD>
  <TD width="67%" VALIGN=TOP><b>WELCOME</b>
    <p> BICL is a leading IT company.
Our Goal is to empower people and organizations with technology.
And we aim to deliver to you a rich, quality and functional IT services, solutions and products, promptly at an affordable price.
  </TD>
  <TD width="19%" VALIGN=TOP bgcolor="#FFFF99">
<b>EMAILS</b> <br />
bicl@bengallery.net <br />
benjamin.onuorah@gmail.com
  </TD>
</TR>
<TR>
  <TD colspan="3" align="center" BGCOLOR="#FFFF99">
Copyright (2014) Bengallery Integrated Company Ltd.
All rights reserved.
  </TD>
</TR>
</TABLE>
</BODY>
</HTML>


And the browser view looks like what I have below.


The code may look a bit more complex, this is because I drew from previous exercise what we have learnt in previous chapters, I try to indent the code as usual to make it easy to understand, the table has three columns and three rows, I merge the top and bottom rows to make room for the header and footer of the webpage, where we have the banner.jpg and the footer where we have the copyright text, the middle row maintains its three columns containing “MY LINK” text (we will link this text in the next exercise) the “WELCOME” message in the center column and the “EMAILS” at the right column  respectively.

 

Next »


Creating webpage with HTML »

META Data »

Background colour »

HTML Versions »

Setting up a website »

Break Line, paragraph and alignment »

Special character, bold, italics, underline and marquee »

Text Formatting »

Listing items and Horizontal rule »

Images »

Tables »

Hyperlink »

Form »