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...
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
| English | 78 |
| Maths | 55 |
| Science | 67 |
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
For Border=1
For Border=5
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
For WIDTH=50%
BGCOLOR : This attribute sets the background color of the table.
<TABLE BGCOLOR="RED">
or
<TABLE BGCOLOR="GREEN">
For BGCOLOR="RED"
For BGCOLOR="GREEN"
CELLSPACING : This attribute sets the amount of space in pixels between the table frame and the individual cells.
<TABLE CELLSPACING=2 >
For CELLSPACING="0"
For CELLSPACING="4"
For CELLSPACING="10"
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"
For CELLPADDING="4"
For CELLPADDING="10"
ALIGN : This attribute sets the table alignment. It can have three values ie. left, center or right.
<TABLE ALIGN="CENTER" >
For ALIGN="LEFT"
For ALIGN="CENTER"
For ALIGN="RIGHT"
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.
WIDTH : This attribute changes the width in pixels of the individual cell.
| Width 100 | Width 150 | Width 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.
|
10 Mb free for life!
