Learn HTML Onlinetutorials for beginners

HTML tables can be used to display tabular data.  If you wanted to display data in the format of a spreadsheet, tables would probably be your best bet.  When you have data that you want to display in rows and columns, tables are the way to go.  You do not have to use tables just for the sake of displaying your spreadsheet data in rows and columns.  You can use Tables as creatively as you want. In this example, we are not going to use a table to display spreadsheet data.  Instead, we are going to use a table to create a calendar.

Copy and paste, or type the following code:

Save this file as tables.htm

Understanding The Code

We have some ground to cover.  We will just take it one step at a time.

We open the code with following line:

What we have here is the opening of a <table> tag.  In the table tag, we declared that this table should have the following attributes:  a 1pixel purple border , the width of the table is 350 pixels, cellspacing of 2 pixels, and cellpadding of 5pixels.

Cellspacing is the amount of pixels between <td> tags.  Cellpadding is the amount of pixels within a <td> tag.

We then open a <tr> tag.  This declares a row within the table.

Here we declare that the background color of this row will be a pinkish color.  We also want the content within this row to be aligned in the center.

Within in the <tr> tag is the <td> tag or tags.  This is the data that will be displayed in the cell.

In this example the letter S is the content.  In the example S stands for Sunday.

Final Word

You have just learned the basics of an HTML table.  With the knowledge that you now posses, you can look at the rest of the calendar example and know what is going on.

Earlier I said that you can use tables as creatively as you want.  There is one exception to the rule.  If you can, try not to use tables for your web layout.  You are much better off using div tags.  A lot of websites on the Internet still use tables for their layouts.  You can use Tables for your layout if you prefer.  I recommend that you learn to use div tags for your layouts.

If you don’t understand what all this layout stuff with tables and div tags are, don’t worry we will go over it in a future tutorial.  For now just experiment with the example we worked on.