TABLES - SECTION 1

    Tables are equally important in your HTML document, as it allows you to arrange your information in a better way. Here's the basic code :

<table border=5 width=50%>
<caption>An Example</caption>
<tr><th>No.<thTitle<th>Price
<tr><td>1<td>A Tale Of 2 Cities<td>RM 10
<tr><td>2<td>Jane Eyre<td>RM 5
</table>

    This is what you'll get :

An Example

No.	Title	Price
1	A Tale Of 2 Cities	RM 10
2	Jane Eyre	RM 5

    You should notice by now, how the tags works. The <table> tag, lets you adjust the settings for your table. If you do not want any borders just replace '5' with '0'. The 'width' signifies the length of your table. If you want the table to have a different background color or image just insert this line, you could also adjust its alignment :

<table border=5 width=50% align=center bgcolor="#0000FF">
<caption>An Example</caption>
<tr><th>No.<th>Title<th>Price
<tr><td>1<td>A Tale Of 2 Cities<td>RM 10
<tr><td>2<td>Jane Eyre<td>RM 5
</table>
or if you want a background image, replace the first line with : <table border=5 width=50% align=center background="socbac.jpg">

    Here's the results :

An Example

No.	Title	Price
1	A Tale Of 2 Cities	RM 10
2	Jane Eyre	RM 5

An Example

No.	Title	Price
1	A Tale Of 2 Cities	RM 10
2	Jane Eyre	RM 5

    As you can clearly see, text inside the <th> are in bold and aligned in the center compared to those in the <td> tag, which are normal in size and aligned to the left. You could also change the alignment for both the <th> and <td> tags, by inserting this line :

<th align=left> or
<td align=center>

    Next, we will take a look and both the colspan and rowspan tags. These tags allows you to expand both the columns and rows, like this :

<table border=1 width=80% align=center>
<tr><th rowspan=2>Time<th colspan=2> Sunday<th colspan=2>Monday
<tr><td>Morning<td>Afternoon <td>Morning<td>Afternoon
</table>

    This is what you will see in your browser :

Time	Sunday		Monday
	Morning	Afternoon	Morning	Afternoon

    That's all for this section, continue with Section 2. Click here to get to Lesson 7 : JAVA Applets.