Rediff Homepages

Line
Your Homepage
Line

Step 8 : Creating Tables

Do you need a table for two? Well here's how we serve it up. You can use tables in your HTML document to create multiple row and column tables. They can be used to create marksheets, timetables etc. You can place text or images or any other information within the cells of the tables. Tables are also very handy for creating complex layouts.


Creating A Basic 1 row X 2 column Table

First we specify the table with the <TABLE></TABLE> tags. We also specify the border size of the table. By default the BORDER size ie. no border.

<BODY >
<TABLE BORDER=1>
<TABLE>
</BODY>

Next we specify a row with <TR>..</TR> tags.

<BODY>
<TABLE BORDER=1>
<TR>
</TR>
<TABLE>
</BODY>

Now lets put in some columns with the <TD> tag. It is also called the Table Data tag.

<BODY>
<TABLE BORDER=1>
<TR>
<TD></TD><TD></TD>
</TR>
<TABLE>
</BODY>

The text comes within the <TD></TD> tags.

<BODY>
<TABLE BORDER=1>
<TR>
<TD>Cell 1</TD><TD>Cell 2</TD>
</TR>
<TABLE>
</BODY>
And the complete product looks like...

Cell 1Cell 2

The reason for this step by step explanation is that tables are a bit tricky and you have to be careful while specifying rows and columns. Lets take a look at a more complex example.

<BODY>
Marks
<TABLE BORDER=1>
<TR>
<TD>English</TD><TD>78</TD>
</TR>
<TR>
<TD>Maths</TD><TD>55</TD>
</TR>
<TR>
<TD>Science</TD><TD>67</TD>
</TR>
<TABLE>
</BODY>

Marks
English78
Maths55
Science67

Top


Specifying Table Attributes

As you can see from the above examples the tables created are simple and a bit restricted. You can however customize the size and the look of your table. Lets take a look at the table attributes one by one.

BORDER : As we saw in the above example you can specify the size of the border in pixels. Here x it the number of pixels.

<TABLE BORDER=x>

For Border=0
Cell 1Cell 2

For Border=1
Cell 1Cell 2

For Border=5
Cell 1Cell 2


WIDTH : This attribute sets the width of the table in pixels or in percentage of the screen.

<TABLE WIDTH=150>
or
<TABLE WIDTH=50%>

The tables appear as...

For WIDTH=150
Cell 1Cell 2

For WIDTH=50%
Cell 1Cell 2


BGCOLOR : This attribute sets the background color of the table.

<TABLE BGCOLOR="RED">
or <TABLE BGCOLOR="GREEN">

For BGCOLOR="RED"
Cell 1Cell 2

For BGCOLOR="GREEN"
Cell 1Cell 2


CELLSPACING : This attribute sets the amount of space in pixels between the table frame and the individual cells.

<TABLE CELLSPACING=2 >

For CELLSPACING="0"
Cell 1Cell 2

For CELLSPACING="4"
Cell 1Cell 2

For CELLSPACING="10"
Cell 1Cell 2


CELLPADDING : This attribute sets the amount of space in pixels between the sides of a cell and its content.

<TABLE CELLPADDING=2 >

For CELLPADDING="0"
Cell 1Cell 2

For CELLPADDING="4"
Cell 1Cell 2

For CELLPADDING="10"
Cell 1Cell 2


ALIGN : This attribute sets the table alignment. It can have three values ie. left, center or right.

<TABLE ALIGN="CENTER" >

For ALIGN="LEFT"
Cell 1Cell 2

For ALIGN="CENTER"
Cell 1Cell 2

For ALIGN="RIGHT"
Cell 1Cell 2

Top



Specifying Cell Attributes

We specify the cell attributes within the <TD> tag. Here it is important to note that changing the attribute of a cell will have an indirect effect on the entire table.

<TD BGCOLOR="RED" WIDTH=20>

Lets take a quick look at the cell attributes.

BGCOLOR : This attribute changes the background color of the individual cell.

Cell 1Cell 2Cell 2

WIDTH : This attribute changes the width in pixels of the individual cell.

Width 100Width 150Width 300

Top

Case Study : Ram Chandran's Homepage
Tables are ideal for marksheets, timetables and resumes. Check out Ram's Resume.
To view the code of the example file use the view source option of your browser.

< Creating Lists | Index | Fillout Forms >
Line

   Broadband | Chat | Contest | Movies | E-cards | Weather | Travel | | Romance | Astrology | Shopping
Money | Instant Messenger
| Auctions | Auto | Education | Jobs | TechJobs | Women | Technology

rediff.com
Disclaimer
© 2000 rediff.com India Limited. All Rights Reserved.