Tables : Lesson 1

Lets start with a simple table. Look at the output first and I shall explain the code.

Interest Rates
Account Type Rate Length
Young Saver 2% 1 year
Smart 3% 2 years
Long Haul 4.5% 4 years

Code for the above table is below. Please note down that I am giving only the code which is to produce table not the complete html page which include <html> and <body> tags. This table tag <table> is off-course within <body> tag.

 
<table border = "1">
<caption>
 Interest Rates
</caption>
  <tr> 
      <th> Account Type</th>
      <th>Rate</th>
      <th>Length</th>
  </tr>
  <tr>
      <td>Young Saver</td>
      <td>2%</td>
      <td>1 year</td>
  </tr>
  <tr>
      <td>Smart</td>
      <td>3%</td>
      <td>2 years</td>
  </tr>
  <tr>
      <td>Long Haul</td>
      <td>4.5%</td>
      <td>4 years</td>
  </tr>
</table>

Lets start with <table> tag. As every tag has starting and ending tag. border is set to "1". It can be "0" or higher number. With "0" you won't see border lines. Higher numbers will produce thick border.

<caption> is like a title of the table.

<tr> is for each row and for each row <td> will put column(s) on that row. In next lesson you will learn that number of columns can be different in rows. But this example shows same number of columns for each row.

<th> is for the heading. It just bolds the text by default.

<td> is the data for each row.

It wasn't that difficult. Was it?

Same table with border="0"

Interest Rates
Account Type Rate Length
Young Saver 2% 1 year
Smart 3% 2 years
Long Haul 4.5% 4 years

With border="2"

Interest Rates
Account Type Rate Length
Young Saver 2% 1 year
Smart 3% 2 years
Long Haul 4.5% 4 years

With border="3"

Interest Rates
Account Type Rate Length
Young Saver 2% 1 year
Smart 3% 2 years
Long Haul 4.5% 4 years

... with border="5"

Interest Rates
Account Type Rate Length
Young Saver 2% 1 year
Smart 3% 2 years
Long Haul 4.5% 4 years

Have you noticed that border number changes the outside border of  the table only. Inner rows and column border doesn't change but remain same.

 Tables  1  2  3  4  5  prev  next