html tables

Tables

HTML Basic Tables

.

Tables are a good way of formatting data on a web site. For example, we use tables to show how to write HTML code and what it will look like on a web page.

Let's begin with a simple table.

<TABLE>
<TR>
<TD> Hello </TD>
<TD> Goodbye </TD>
</TR>

<TR>
<TD> 1964 </TD>
<TD> 2008 </TD>
</TR>
</TABLE>

The resulting table looks like this.

HelloGoodbye
19642008


There are four tags that are used to make a table:

<TABLE> which indicates you are going to make a table.

<TR> denotes Table Row and defines a row in the table. To end the row we must use </TR>

</TD> denotes Table Data which is put in front of the data that you want in each table cell and is closed by </TD>

</TABLE> ends the table.

From a basic table you can add different commands to create more defined tables.

<TABLE BORDER="1" CELLPADDING="2" CELLSPACING="1">
<TR>
<TD ALIGN="CENTER"> Man. Utd. </TD>
<TD ALIGN="CENTER"> Chelsea </TD>
<TD ALIGN="CENTER"> Arsenal </TD>
</TR>

<TR>
<TD ALIGN="CENTER"> Everton </TD>
<TD ALIGN="CENTER"> Aston Villa </TD>
<TD ALIGN="CENTER"> Liverpool </TD>
</TR>
</TABLE>

Man. UtdChelseaArsenal
EvertonAston VillaLiverpool

Inside of the <TABLE> tag we added the following three commands to enhance the table;

BORDER which tells the browser how wide the border of the table will be. If you were to use BORDER="0" there would be no border around the table. The larger the number the wider the border.

CELLPADDING indicates the amount of space or padding between the border of the table and the contents inside each cell.

CELLSPACING denotes the amount of space that you want between each cell.

To get the data to be centered within each cell we used the ALIGN attribute within the TD.

There are three ways to align data in a cell by using ALIGN="CENTER", ALIGN="RIGHT" and ALIGN="LEFT".

The ALIGN attribute can be used with the <TABLE> <TR> and <TD> tags.

.

Home | About | Contact Us | Sitemap

HTML tables