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

/ Home / Web Design / Web Design in 7 Days Tutorial

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

7-1 Table background color We can use background colors for tables in new browsers. You can specify background color options inside <TABLE> tag.

Example 7-1:

<HTML>
<HEAD>
<TITLE>Example 7-1</TITLE>
</HEAD>
<BODY>
<TABLE width="300" BGCOLOR="#66CCFF"> <TR>
<TD width="50%">A</TD>
<TD width="50%">B</TD>
</TR>
<TR>
<TD width="50%">C</TD>
<TD width="50%">D</TD>
</TR>
</TABLE>
</BODY>
</HTML>

In above example entire table will change to new color even table borders. You can also determine background color for each row of your table. If you want to do this, you must use BGCOLOR option inside <TR> tag of the desired row. This second method will only change colors of cells in specified row. Example 7-2:

<HTML>
<HEAD>
<TITLE>Example 7-2</TITLE> </HEAD>
<BODY>
<TABLE width="300" BORDER=1> <TR BGCOLOR="#66CCFF"> <TD width="50%">A</TD> <TD width="50%">B</TD> </TR>
<TR BGCOLOR="#CCFFFF"> <TD width="50%">C</TD> <TD width="50%">D</TD> </TR>
</TABLE>
</BODY>
</HTML>

You can even change color of individual cells by using BGCOLOR option in <TD> </TD> cell tags. You can mix all above options to create your desired table.

In next example we will change color of first row to "#336699". Then we will change color of two cells in second row to "#66CCFF" and "#CCFFFF" respectively.

Example 7-3:

<HTML>
<HEAD>
<TITLE>Example 7-3</TITLE>
</HEAD>
<BODY>
<TABLE width="300" BORDER=1>
<TR BGCOLOR="#336699">
<TD width="50%">A</TD>
<TD width="50%">B</TD>
</TR>
<TR>
<TD width="50%" BGCOLOR="#66CCFF">C</TD> <TD width="50%" BGCOLOR="#CCFFFF">D</TD> </TR>
</TABLE>
</BODY>
</HTML>

7-2 Column Span

Sometimes you need to join two cells in a row to each other. For example in a 2*3 table we may want to join two cells with each other . In this way we will have two cells in first row and three cells in second row. Enter this html code in a file and browse it in your browser to see what is column span.

Example 7-4:

<HTML>
<HEAD>
<TITLE>Example 7-4</TITLE> </HEAD>
<BODY>
<TABLE BORDER=1>
<TR>
<TD COLSPAN=2>A</TD> <TD>B</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Just be careful that when you have for example 2 cells in first row and first one uses column span parameter COLSPAN=2 it means that it is equal to two cells. Therefore you must have three cells in next row (three <TR> tags) or you may use COLSPAN to create cells that when you add them, it will be equal to previous row or 3 in this example.

7-3 Row Span

This time we want to join two cells in a column (from different rows). This is the same as previous section with the difference that we will join cells from different rows rather than cells in different columns. This time we must use ROWSPAN instead of COLSPAN.

Example 7-5:

<HTML>
<HEAD>
<TITLE>Example 7-5</TITLE> </HEAD>
<BODY>
<TABLE BORDER="1" WIDTH="200"> <TR>
<TD ROWSPAN="2">A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> </TR>
</TABLE>
</BODY>
</HTML>

Again you must be careful that when you have for example a cell in first column that you have joined two cells to create it using the option ROWSPAN=2 then your table must have two rows and you must take this in mind in next parts of your table. In above example we only entered two cells in second row (started from second <TR> ) as first cell of first row has occupied first cell of this row too and we have only two cells left of 3 cells. Enter this example and browse it to see the results.

You may want to mix these tags to create your custom tables however this is a complicated task and you must work hard to gain needed experience with these tables.

7-4 Nested Tables

Yes we can nest tables in each other. If you are going to design complicated web pages you will always do this. For example you need a table with border size of 3 in a specific part of a web page. To fix position of that table in your desired place you will need a table with border size of 0. In this case first table can be seen as its border size is 2 but second one will not be seen as you used it just for positioning of first table.

Anyway, writing a nested table code is easy. Example 7-6:

<HTML>
<HEAD>
<TITLE>Example 7-6</TITLE> </HEAD>
<BODY>
<TABLE border="0" width="750"> <TR>
<TD width="25%"> </TD> <TD width="25%"> </TD> <TD width="25%">
<TABLE border="2" width="100%"> <TR>
<TD width="50%">1-</TD>
<TD width="50%">HTML</TD> </TR>
<TR>
<TD width="50%">2-</TD>
<TD width="50%">C Prog.</TD> </TR>
<TR>
<TD width="50%">3-</TD>
<TD width="50%">JScript</TD> </TR>
</TABLE>
</TD>
<TD width="25%"> </TD> </TR>
</TABLE> </BODY> </HTML>

In this example we have a 1*4 table. We want to hold our main table inside this table in its third column so that our main table will be shown in right side of the center of the screen. Main table has a border size of 1 while first table is hidden.

7-5 You know tables now

Now you have learned table basics. You see what you learned about tables was not too complicated however writing a complicated tables is not very easy. You must work for a little to be able to use them effectively. Tables are one of the most powerful features of html design so you must be able to use their power correctly.

In next lesson we will start studying on Frames. Until then, you can use your free time to work on tables.

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*2 table (2 rows). Join its first row cells into one cell (3 cells). Second row has 3 cells yet. Enter a heading in upper cell (First row) and enter three words in three cells in second row.

yet. Enter a heading in upper cell (First row) and enter three words in three cells in second row.
Rewrite above example so that first row cells have a specific color and each cell in second row has a separate color.

has a separate color.
Create a table with 3 columns and 1 row. Now nest a 2*2 table in center of the screen using previous table so that first table is invisible but second one has a border size of 3 . ============================================================

© 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 Cover