HTML COURSE FOR EASY LEARNING

lesson-2

lesson-3

lesson-4

This course is developed for the online community who are willing to learn online in the leisure periods, the web designing course,and this is the first step in learning the web designing. Every one can easily learn this by sitting before their personal computers and practice themselves.ok wish you good luck.

LESSON-5 MAKING TABLES

The tables are the most important part of a webpage. Almost all webpages use the table layouts for presenting the data.Offcourse there may be a very less websites without table formation. Tables are inevitable for making webpages.So this chapter is very important. So you must first decide what should be the content of the web page and how it is to be displayed. For example You are with a data which is to be shown in tables. Then you must give instructions to the browser to display the data in a table format for this purpose you must use various html table tags which include (<table> <tr> <td> <th> )
(1)In the first lesson you might have understood how to display paragraphs in a webpage. Here You will study how to display the data in tables and paragraphs.
(2)A table is a format with one or more columns and with one or more rows. The space between rows and columns is called as a cell. Each cell can be displayed in a different style with different content and with different size.
(3)You can write the html code in a notepad and save it with a name of your choice but with an extension of .htm or .html(ex:-mypage.html,mywebpage.html,raman.html ...) Unless you save with such extension the code written by you cannot become a webpage.
(4) The html code is written with various types of tags and attributes. The < and > are used to display tags. Tag is an html language term for expressing a certain part of webpage for example to express tables we use <table > </table> tags. The first one is called opening tag and the second one is called closing tag of a Table. The closing tag contains a "/" . Every html document is written between two main html tags <html> </html> tags.

Note: Tags in html are NOT case sensitive. For example... <table> and <tABLE> both mean the same thing and are interpreted as being the same. Suggestion: In newer html standards, it is -highly suggested- that you keep all tags lowercase, that is, it is better to use <table> than <tABLE> even though both work.

Note: Extra spaces and line breaks (blank lines) will be ignored when the html is interpreted... so add them if you wish to do so but with one exception of <pre>tag(this tag recognises line breaks and spaces)

STUDY THIS htmlCODE FOR MAKING A SIMPLE TABLE

This is code of a simple table

This is the outcome of the code

<html><head> </head> <table> <tr> <td> this is first cell </td> <td> this is second cell </td> </tr> <tr> <td> this is third cell </td> <td> this is fourth cell </td></tr> </table></html>

this is first cell	this is second cell
this is third cell	this is fourth cell

In the above webpage example you study the html code in the left part and to test yourself you write the same code in a notepad in your system and save it as myfirsttable.html in mydocuments or in some othe folder of your system and go to that folder and you will find the webpage icon with name myfirsttable You open it by clicking and your internet explorer or firforx browser will display that webpage which will be same as shown on the rightside of the above chart.
In the above table no speacial attributes of table tags are used this only a model for a simple table. The table is defined with two main <table> </table> tags and the rows in the table are defined with <tr> </tr> tags the cells in a row are defined with two <td> </td> tags and the column headings are defined with <th> </th> tags. Here only one attribute of table border="1" is used without this tag the table border will not be visible.

THE TABLES WITH VARIOUS ATTRIBUTES

A table with border="0" and cellspacing="3"(the cell spacing attribute decides the space between cells in the table)

<table width="200"cellspacing="3"><tr><td width="100">first cell</td><td width="100">second cell</td><tr><td>third cell</td><td>fourth cell</td></tr></table>

first cell	second cell
third cell	fourth cell

A table with border="1" and cellspacing="3"

<table width="200"cellspacing="3"border="1"><tr><td width="100">first cell</td><td width="100">second cell</td><tr><td>third cell</td><td>fourth cell</td></tr></table>

first cell	second cell
third cell	fourth cell

A table with border="1" and cellpadding="1"(cellpadding decides the space between the content in the cell and the wall of the cell)

<table width="200" border="1'cellpadding="1"><tr><td width="100">first cell</td><td width="100">second cell</td><tr><td>third cell</td><td>fourth cell</td></tr></table>

first cell	second cell
third cell	fourth cell

A table with border="1" and cellspacing="2"cellpadding="2"

<table width="200"border="1"cellpadding="1"cellspacing="1"><tr><td width="100">first cell</td><td width="100">second cell</td><tr><td>third cell</td><td>fourth cell</td></tr></table>

first cell	second cell
third cell	fourth cell

A table with border="3" and cellspacing="5"cellpadding="5" (the border size indicates the thickness of table border)

<table width="200"border="3"cellpadding="5"cellspacing="5"><tr><td width="100">first cell</td><td width="100">second cell</td><tr><td>third cell</td><td>fourth cell</td></tr></table>

first cell	second cell
third cell	fourth cell

A table with border="0" and cellspacing="1" the align attribute with table tag decides the place of table and with <td> tag decides the place of content in the cell

<table width="100%"cellspacing="1" align="right"><tr><td width="50%"align="center">first cell</td><td width="50%" align="right">second cell</td><tr><td align="left">third cell</td><td align="center">fourth cell</td></tr></table>

first cell	second cell
third cell	fourth cell

A table with border="3"bordercolor="red" (the border color indicates the color of the table border)

<table width="200"border="3"bordercolor="red"><tr><td width="100">first cell</td><td width="100">second cell</td><tr><td>third cell</td><td>fourth cell</td></tr></table>

first cell	second cell
third cell	fourth cell

A table with border="3"bgcolor="yellow" (the bgcolor indicates the background color of the table)

<table width="200"border="3"bgcolor="yellow"><tr><td width="100">first cell</td><td width="100">second cell</td><tr><td>third cell</td><td>fourth cell</td></tr></table>

first cell	second cell
third cell	fourth cell

A table with border="3"bgcolor="yellow" with <td>tag (the bgcolor indicates the background color a cell)

<table width="200"border="3"><tr><td width="100">first cell</td><td width="100"bgcolor="yellow">second cell</td><tr><td>third cell</td><td>fourth cell</td></tr></table>

firstcell	secondcell
third cell	fourth cell

end of lesson-5

Hosted by www.Geocities.ws

LESSON-5 MAKING TABLES

STUDY THIS htmlCODE FOR MAKING A SIMPLE TABLE

THE TABLES WITH VARIOUS ATTRIBUTES