Web Page Design in 7 Days by Siamak Sarmady - HTML preview

/ Home / Web Design / Web Page Design in 7 Days

PLEASE NOTE: This is an HTML preview only and some elements such as links or page numbers may be incorrect.
Download the book in PDF, ePub, Kindle for a complete version.

Web page design course

Course support : You can ask your course questions in Learnem support forums .

Please support us by visiting our support forums and asking your questions and answering questions of others.

Registration: You can also register for paid web design email course. If you register you will benefit from strong one to one student support, personal tutor, more facilities, discount for other courses, access to students area and many more. Course fee for web page design email course is $15 only. Paid students will receive 13 advanced lessons in addition to 7 general lessons. You can register for paid course at:

Course Registration Here

5-1 Tables Table is a matrix like object that holds other objects such as text, images, buttons and etc.

Even if you don't see them they are present in all professional web pages. Hidden tables hold graphic images and text in their places in these pages.

5-2 Drawing a table

To draw a table we will use <TABLE> tag. We will need two other related tags to make table rows and columns. These are <TR> and <TD> tags.

<TR> tag is used to create a row in table. Data that will fit in a row will be enclosed in <TR> </TR> tags.

Following example produces a table with two rows. We will need <TD> tag to create columns in each row.

<TABLE>
<TR>
<TD>First Row</TD> </TR>
<TR>
<TD>Second Row</TD> </TR>
</TABLE>
If you browse this code in a browser you may surprise. You will not see any table but two lines of code. In fact table is there but you cannot see it.

<TABLE> Tag will not make table borders. You must use a parameter to add borders to the table. You can specify a border width for a table by adding a border parameter to <TABLE> tag.

<TABLE BORDER=1> <TR>
<TD>First Row</TD> </TR>
<TR>
<TD>Second Row</TD> </TR>
</TABLE>

As you may guess default border size is 0. When we do not specify sizes for a table it will be in a size that it needs to be able to fit text or any other object that it will hold.

5-3 Specifying table sizes You can specify width for a table both in percents of page width and in pixels.

Example 5-1:

<HTML>
<HEAD>
<TITLE>Example 5-1</TITLE> </HEAD>
<BODY>
<TABLE WIDTH=50% BORDER=1> <TR>
<TD>Cell Row1 Col1</TD>
<TD>Cell Row1 Col2</TD>
</TR>
<TR>
<TD>Cell Row2 Col1</TD>
<TD>Cell Row2 Col2</TD>
</TR>
</TABLE>
</BODY>
</HTML>

If you want you can determine table width in pixels.

You can specify table height too. In this way you can determine height and width of table. Width and height of table will be divided between cells in rows and columns so if table width is 100 and there are 2 columns then width of each cell will be 50.

Just pay attention to this important point that if you put a lot of text in a cell of a table it will be expanded to fit the text in it.

5-4 Text alignment in table cells

By default text entered in a cell will appear at the left side of the cell. You can add either of these options to <TD> tag to specify horizontal alignment of text.

<TD ALIGN=CENTER> or

As we saw, left alignment is default for cells. You can also determine vertical alignment of text in a cell by adding VALIGN option to <TD> tag.

There are three values for VALIGN option : TOP, BOTTOM and MIDDLE. MIDDLE is default value if you do not use this parameter.

Example 5-2:

<HTML>
<HEAD>
<TITLE>Example 5-2</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=50% HEIGHT=100 BORDER=3>
<TR>
<TD ALIGN=LEFT VALIGN=TOP>TOP LEFT</TD>
<TD ALIGN=RIGHT VALIGN=TOP>TOP RIGHT</TD> </TR>
<TR>
<TD ALIGN=LEFT VALIGN=BOTTOM>BOTTOM LEFT</TD> <TD ALIGN=RIGHT VALIGN=BOTTOM>BOTTOM RIGHT</TD> </TR>
</TABLE>
</BODY>
</HTML>

5-5 Images in table cells You will soon need to insert images in table cells. As we told later tables will be used to hold images in their places.

You can insert an image in a table cell by inserting <IMG> tag between <TD></TD> tags of a certain cell.

Example 5-3

<HTML>
<HEAD>
<TITLE>Example 5-3</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=4>
<TR>
<TD><IMG SRC="image53.gif"></TD> </TR>
</TABLE>
</BODY>
</HTML>

5-6 End In this lesson you learned creating tables. Tables are one of important objects in web pages. In next lesson you will learn more about tables.

And finally a question: Have you started designing web pages?

Now is a great time to start. You learn and you use what you learn immediately. This will guarantee that you learn everything you studied in this course. So start now !! Notice: You can find examples of this lessons in our website. There you must go to resources section and then click on "Web email course example page."

Exercises:

Attention:
Do not use any html editing program like MS FrontPage . You must work on the codes yourself.

Course support:
Paid students must send exercises to their tutor. Tutor will return corrected exercise to the student. Others can ask their questions in Support forums in our web site.

in our web site.

Create a 3*3 table. Insert a bold heading in top center cell. Then insert a title in left center and bottom cells.

Then insert small texts in two right side center and bottom cells. We are trying to format text in web pages using tables.

web pages using tables.

Create a 2*2 table. Insert an image file (small sized) in each cell of table. Adjust cell alignment of each cell

so that images gather at the center of the table sticking to each other. Adjust table width to 50% of web page width and 200 pixels for its height.

============================================================

© 2000,2001 Siamak Sarmady and Learnem Group . All rights reserved. This text is written to be used as text material for "Web Page design Email Course". Any kind of reproduction, redistribution in any form without written permission of the writer is strictly prohibited. This special version is prepared in PDF form. You can redistribute this file without any changes either in contents or in file format. It can not be redistributed in printed form or any other media without permission of the writer.

Back Next

Back Next Lesson 6