manual Three

TechKnow : Website Designing Course

a product of KnowNet ^®

MODULE 3 : Creating Tables

This module will teach you all about how to create TABLES and their use in designing of webpages and creation of Menu Bars.

Write to us for the email administration of this course/ for feedback at knownet@knownetweaver.org

TABLES

<TABLE> <TR> <TD>

Tables are very useful in designing a webpage. They are used for

dividing a webpage into various sections/ columns
to make menu bars.

The best part of designing Table is that it is very Simple and all you need to do is VISUALISE!

Let us have a look at the sample TABLE below.

1 2 3

4 5 6

7 8 9

The table is made up of three Rows (horizontal divisions) and three Columns (vertical divisions). So in all, there are nine Cells and each cell has been assigned a number from 1 to 9 that are to be placed in the cells.

To construct this table using HTML codes then all we need to do is to visualise its construction row-by-row. It means:

We will start with the construction of the first row and then create the 3 cells in the first row which are numbered 1, 2 and 3.
Then we will create the second Row and create the next three cells which are numbered 4, 5 and 6.
Finally we will create the third Row and the three cells 7, 8 and 9.

If you can visualise this then you have already become an expert in making Tables!

Let us now put our Visualisations into HTML. Time to open up a new file on your word editor, say Word Pad.

Create the HEAD part of the file on your own and leave the BODY part blank. Now we visualise the creation of the table and translate it into HTML by writing the Starting code of Table Creation - <TABLE>. As always, the starting code for Table Creation will also have an End code </TABLE> to mark the end of the Table. All other codes relating to creation of the Table would be written between these two codes.

Now we visualise the creation of the first Row of the Table. So we write <TR> which means "Table Row" to mark the Beginning of the first Row and the code </TR> would demarcate the End of the first row. The codes for the three Cells to be made in the first Row would now be written between the codes <TR> and </TR>.

Now we visualise the creation of the first cell within that row - we do this in HTML by writing <TD> or "Table Data". The first cell contains the number "1" and then it closes to lead to the beginning of the second cell. We will show this in HTML by writing 1 after <TD> followed by </TD> to mark the End of the first cell.

This would be followed by <TD> to mark the beginning of the second cell. The second cell contains the number "2" and then it closes marked by </TD> to lead to the third cell. The beginning of the third cell is marked by <TD> again followed by number "3" contained in it and then closes by the code </TD>. The closing of the third Cell is also followed by the closing of the First Row marked by </TR>.

Your new file will now look something like this:

<HTML>
<HEAD>
<TITLE>Creation of a Table</TITLE>
<META name="description" content ="Designing of webpage containing a TABLE">
<META name="keywords" content ="Table, Learning, KnowNet">
</HEAD>

<BODY>
<TABLE>                                  --------- marks the starting of the TABLE.
<TR>                                          --------- marks the starting of the first ROW.
<TD>1</TD>                             --------- marks the beginning of first CELL in first ROW containing number 1.
<TD>2</TD>                             --------- marks the beginning of second CELL in first ROW containing number 2.
<TD>3</TD>                             --------- marks the beginning of third CELL in first ROW containing number 3.
</TR>                                         --------- marks the end of the first ROW.
</TABLE>                                  --------- marks the end of the TABLE.
</HTML>

In a similar manner, let us create the Second and the Third Row and the three Cells in each of them.

<HTML>
<HEAD>
<TITLE>Creation of a Table< /TITLE>
<META name="description" content ="Designing of webpage containing a TABLE">
<META name="keywords" content ="Table, Learning, KnowNet">
</HEAD>
<BODY>
<TABLE>
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>
<TR>                                  --------- marks the beginning of the Second ROW.
<TD>4</TD>                     --------- marks the beginning of first cell in the Second ROW containing number 4.
<TD>5</TD>                     --------- marks the beginning of second cell in the Second Row containing number 5.
<TD>6</TD>                     --------- marks the beginning of third cell in the Second Row containing number 6.
</TR>                                  --------- marks the end of the Second ROW.
<TR>                                   --------- marks the beginning of the Third ROW
<TD>7</TD>                      --------- marks the beginning of first cell in the Third Row containing number 7.
<TD>8</TD>                      --------- marks the beginning of second cell in the Third Row containing number 8.
<TD>9</TD>                      --------- marks the beginning of third cell in the Third Row containing number 9.
</TR>                                  --------- marks the end of the Third ROW.
</TABLE>                          --------- marks the end of the TABLE.
</BODY>
</HTML>

Let us now save this file with the name "table.html" and view it in any browser package. Your file will now look like:

1 2 3

4 5 6

7 8 9

The table you have created now resembles the sample table shown earlier except that there are no BORDER lines visible in that table. This is because we have not specified the thickness of the TABLE BORDERS while writing the HTML codes and the default option is a Borderless Table. To do so we insert the command BORDER =1 within the <TABLE> code.

The HTML section marking the beginning of the TABLE would now look like:

<TABLE BORDER =1> --------- to give a BORDER of 1 to the Table created

View the file "table.html" once again and this time it will absolutely resemble the sample file shown at the start of the Module.

You may want to change the thickness of the TABLE BORDER by replacing the command BORDER=1 by BORDER=2, BORDER = 3 etc.

The <TABLE> code for the creation of TABLES is a very powerful command and one can change a lot of table properties by adding some more commands in the <TABLE> bracket. Now let us say we want to change the BACKGROUND COLOR of the TABLE to RED to look like:

1 2 3

4 5 6

7 8 9

Doing this is VERY SIMPLE! All you have to do is insert the command BGCOLOR=RED in the <TABLE> code. Your starting command of the TABLE will now look like:

<TABLE BORDER= 1 BGCOLOR =RED> -------- to give a background color of Red to the Table created

Now, to change the background color to Blue, all you have to do is replace the command BGCOLOR= RED with BGCOLOR= BLUE. Simple isn't it?

You could also replace the command BGCOLOR =RED with BGCOLOR=FF0000 as FF0000 is the Hexadecimal equivalent of the color RED.

How about making a TABLE which is more COLORFUL? Let us say, we want All the Rows to be of different colours. The first row should be GREEN, the second row should be RED, and the third row should be BLUE. Doing this will be as easy as before!

All we have to do is, remove the BGCOLOR command from the starting of the TABLE code, i.e <TABLE> and insert them in the starting of the ROW command, i.e in <TR> for each of the ROWS.

The "table.html" file will now look like:

<HTML>
<HEAD>
<TITLE>Creation of a Table< /TITLE>
<META name="description" content ="Designing of webpage containing a TABLE">
<META name="keywords" content ="Table, Learning, KnowNet">
</HEAD>
<BODY>
<TABLE BORDER =1>
<TR BGCOLOR=GREEN> --------- marks the beginning of the ROW with background color GREEN.
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>
<TR BGCOLOR= RED> --------- marks the beginning of the ROW with background color RED.
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
<TR BGCOLOR=BLUE> --------- marks the beginning of the ROW with background color BLUE.
<TD>7</TD>
<TD>8</TD>
<TD>9</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Save the file "table.html" and view it in the browser. I am sure it would be looking like :

1 2 3

4 5 6

7 8 9

We can make the table even more colorful by making each Cell to be of a different Background Color. And to do this, all you have to do is remove the BGCOLOR command from the starting of each ROW code, i.e <TR> and insert it in starting of each Table Data/ Cell code, i.e <TD>. Try this on your own and let me see if you can create the following kind of table:

1 2 3

4 5 6

7 8 9

I will now tell you another very simple to use but useful command used with TABLE codes and it is called the WIDTH command. The WIDTH command helps you to define the "width" of the table and also the width of each individual columns (the Vertical Divisions). The command is inserted within the <TABLE> code, just like the BORDER command.

One could either define the WIDTH of the Table in Actual Size or as a percent of the Screen Size on which the TABLE is being viewed.

For example, when we use the WIDTH Command as: <TABLE BORDER = 1 WIDTH =50%>, then the TABLE will be cover 50% of the width of the available screen width and would expand and contract with the size of the Monitor to occupy only 50% of the screen width, like the TABLE below.

1 2 3

4 5 6

7 8 9

We could have also mentioned the WIDTH of the TABLE in terms of a number, say 500.

The WIDTH command would now be used as: <TABLE BORDER = 1 WIDTH =500> The Table so created is now of a fixed size of 500 and will not expand or contract with changing monitor size, like the TABLE below:

1 2 3

4 5 6

7 8 9

You will have to work out different values of WIDTH to see when the table width becomes equal to your screen width. It comes to around 750 for my Monitor Size but will wary for your monitor size.

I will now use "Actual Size" type width command to create a table which has unequal width of columns, say 100, 200 and 300 and it would look like:

1 2 3

4 5 6

7 8 9

All I have done is that I have removed the WIDTH command from the <TABLE> code and insert them in the starting command of all the TABLE DATAs, ie. <TD> of only the First Row.

The width given to different <TD> of the First Row becomes the default WIDTH of the entire COLUMN.

The HTML codes for this kind of Table would be :

<HTML>
<HEAD>
<TITLE>Creation of a Table< /TITLE>
<META name="description" content ="Designing of webpage containing a TABLE">
<META name="keywords" content ="Table, Learning, KnowNet">
</HEAD>
<BODY>
<TABLE BORDER=1>
<TR>
<TD WIDTH=100>1</TD>            --------- Creating a Column of Width 100
<TD WIDTH=200>2</TD>            --------- Creating a Column of Width 200
<TD WIDTH=300>3</TD>            --------- Creating a Column of Width 300
</TR>
<TR>
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
<TR>
<TD>7</TD>
<TD>8</TD>
<TD>9</TD>
</TR>
</TABLE>

</BODY>
</HTML>

Let us now revise the commands we have learned in the Section so far.

<TABLE> and </TABLE> ----- to mark the start and end of the Table.

<TR> and </TR> ----- to mark the start and end of the Table Row.

<TD> and <TD> ----- to mark the start and end of the Cell or Table Data.

<TABLE BORDER = 1> ----- to create a Table with Border width 1.

<TABLE BGCOLOR=Color> ----- to create a Table with a particular background color.

<TR BGCOLOR=Color> ----- to create a Table with a ROW having a particular background color.

<TD BGCOLOR=Color> ----- to create a Table with a CELL having a particular background color.

<TABLE WIDTH = 500> ----- to create a Table of actual WIDTH of 500 units.

<TABLE WIDTH=50%> ----- to create a Table having WIDTH equal to 50% of the Screen Size.

<TD WIDTH =200> ----- to create a Table with a particular column having WIDTH of 200 units.

<TD WIDTH = 30%> ----- to create Table with a particular column having WIDTH equal to 30% of the Screen Size.

Before going ahead, I will tell you two more simple things:

How to ALIGN the TABLE to Left, Right or to the Center of the webpage.
How to ALIGN the CONTENTS within a TABLE to Left, Right or Center.

The entire Table could be aligned to be displayed on the LEFT, RIGHT or CENTER of a webpage. The default alignment is LEFT ALIGNED. We will have to use an earlier used command to change the alignment of the TABLE.

To Align a Table to the CENTER of the webpage, we enclose the entire TABLE command between
<P ALIGN=CENTER> and </P>. The HTML format would be of the type:

<P ALIGN= CENTER> ---------- To CENTER ALIGN the table below.
<TABLE BORDER =1 WIDTH =500>
..........
</TABLE>
</P> ---------- To end the CENTER ALIGNMENT of the above.

The TABLE would now appear as :

1	2	3
4	5	6
7	8	9

Similarly, to Align the Table to the RIGHT, we enclose the entire TABLE Commands between <P ALIGN=RIGHT> and </P>. The HTML format would be of the type:

<P ALIGN=RIGHT> -------- To RIGHT ALIGN the table below.
<TABLE Border= 1 Width= 500>
.........
</TABLE>
</P> --------- To end the RIGHT ALIGNMENT of the above table.

The TABLE would now appear as:

1	2	3
4	5	6
7	8	9

Now we will learn how to change the Alignment of the CONTENTS within the TABLE. The Default Alignment is again LEFT Alignment.

To create a Table in which ALL the contents are CENTER Aligned, we use the command ALIGN=CENTER in the starting Code of each Cell/ Table Data, i.e <TD>. The HTML format would be of the type:

<TABLE BORDER=1 WIDTH =500>
<TR>
<TD ALIGN =CENTER> </TD>     -------- To CENTER ALIGN the content within the CELL 1 of First Row.

<TD ALIGN =CENTER> </TD>      -------- To CENTER ALIGN the content within the CELL 2 of First Row.

<TD ALIGN =CENTER> </TD>       -------- To CENTER ALIGN the content within the CELL 3 of First Row.

</TR>
..........
..........
</TABLE>

The TABLE would now appear as :

1 2 3

4 5 6

7 8 9

To make the contents of the Table RIGHT Aligned, replace the command ALIGN=CENTER by the command ALIGN =RIGHT in the starting Code of each Cell/ Table Data, i.e <TD>. The HTML format would be of the type:

<TABLE BORDER=1 WIDTH =500>
<TR>
<TD ALIGN =RIGHT> </TD>                 -------- To RIGHT ALIGN the content within the CELL 1 of First Row.
<TD ALIGN =RIGHT> </TD>                 -------- To RIGHT ALIGN the content within the CELL 2 of First Row.
<TD ALIGN =RIGHT> </TD>                -------- To RIGHT ALIGN the content within the CELL 3 of First Row.
</TR>
..........
..........
</TABLE>

The TABLE would now appear as :

1 2 3

4 5 6

7 8 9

Any Problems, so far? If so, why not write to us at knownet@knownetweaver.org. I am sure we will be able to help you!

Now I will teach you on how to divide a webpage and create Menu Bars using the TABLE Command. And this will make you an Expert in designing webpages!

Do you remember the webpage of the organisation "GYAN" we created in the Module TWO? We will now make the page look even better and useful by adding menu bars and dividing it into different sections to look as following:

gyan1

The above webpage now has a Menu Bar on the Left Hand side, to help users to link to different webpages of "GYAN" such as to - Project Details, Case Studies, Upcoming Events and Home Page.

Can you visualise the above shown webpage of "GYAN" to be having the following Skeletal Format?

The entire web page comprises of nothing but two TABLES stacked vertically.

The TABLE on the top has only ONE ROW and ONE CELL/ TABLE DATA.
The TABLE below it has ONE ROW and TWO CELL/ TABLE DATA of different WIDTH.

If you are able to visualise this, then things become very simple because all you have to do now is create these two types of TABLES and fill in the Content of the webpage in them.

The HTML format for designing this skeletal format would be as following:

<TABLE BORDER=1 WIDTH =750>          ------ Marks the creation of FIRST TABLE.
<TR>
<TD ALIGN=CENTER>
</TD>
</TR>
</TABLE>                                                          ------ Marks the end of FIRST TABLE.

<TABLE>                                                           ------ Marks the creation of SECOND TABLE.
<TR>
<TD ALIGN=LEFT>
</TD>
<TD ALIGN=LEFT>
</TD>
</TR>
</TABLE>                                                             ----- Marks the end of SECOND TABLE.

Once the Skeletal format is created, see the improvised webpage of "GYAN" once again and try to insert the content in the CELLS/ TABLE DATA of the two TABLES. Then construct the HEAD portion of the webpage and save the complete HTML file as "newgyan.html".

The HTML format of your file "newgyan.html" would look like:

<HTML>
<HEAD>
<TITLE>Creation of a Table< /TITLE>
<META name="description" content ="Designing of webpage containing a TABLE">
<META name="keywords" content ="Table, Learning, KnowNet">
</HEAD>
<BODY>
<TABLE BORDER =1 WIDTH= 750>     ------------- Beginning of the FIRST TABLE
<TR>
<TD>
<FONT COLOR = "BLUE"><FONT SIZE=6><FONT FACE ="ARIAL"><P align="CENTER"> <B>GYAN</B></P> </FONT></FONT></FONT>   --------------- Insertion of text "GYAN" in the CELL
</TD>
</TR>
</TABLE>                                                      ----------------- End of the FIRST TABLE

<TABLE BORDER= 1 WIDTH =750>      ------------ Beginning of the SECOND TABLE

<TR>
<TD WIDTH=250>     ------------ Beginning of the FIRST CELL of the FIRST ROW of COLUMN WIDTH= 250

<P>Project Details
<P>Case Studies
                                                                        ------------ Creation of Menu Bar in the First cell of Second Table.
<P>Upcoming Events
<P>Home

</TD>                                                            ------------ End of the FIRST CELL of the FIRST ROW.

<TD WIDTH=500>                     --------- marks the beginning of second cell in the FIRST Row of COLUMN SIZE 500, followed by addition of the relevant text as shown in the improvised webpage of "GYAN".

<FONT COLOR="RED"><FONT SIZE ="4"><FONT FACE ="ARIAL BLACK"><P
Align ="RIGHT"><I>Local Self Governance through Knowledge Sharing </I></P>
</FONT></FONT></FONT>
<FONT COLOR="GREEN"><FONT SIZE ="3"><FONT FACE ="Helvetica">
<P Align="JUSTIFY">The overall mission of GYAN is to use the sword of
knowledge-sharing to empower people by building capacities in them to understand
local governance structures and helping them play an active and informed role in
decision-making. The aim of empowering people is to shape their lives and create
equal opportunities to everyone to improve their quality of lives. </P>
</FONT></FONT></FONT>
</TD>                                  --------- marks the end of the SECOND CELL of the FIRST ROW.
</TR>                                  --------- marks the end of the FIRST ROW.

</TABLE>                          --------- marks the end of the SECOND TABLE.
</BODY>
</HTML>

View the file "newgyan.html" in a web browser package and see whether it fully resembles the improvised webpage of "GYAN". If it does not, then send us the HTML code of the file you have created at knownet@knownetweaver.org and we can help you in sorting out the problem.

End of Module 3

Go to Module 4

Go back to Module 2
Go back to Module 1

Do let us know of your feedback at knownet@knownetweaver.org

TechKnow is designed by Vikas Nath.

Sign Guestbook View Guestbook