Information represented in tables is easy understandable, compact. That's why tables are used very often in HTML documents. HTML table command begins with the <TABLE> tag and ends with the </TABLE> closing tag. Table is made up of rows (<TR>...</TR>) and cells (<TD>...</TD>). Command <CAPTION>...</CAPTION> is used for table header and command <TH>...</TH> - for table column headers. Simple table HTML code would be:

<TABLE>
<CAPTION> Table name </CAPTION>
<TR> < !-- Column names -->
<TH> First column </TH>
<TH> Second column </TH>
</TR>
<TR> < !-- First row -->
<TD> Data </TD>
<TD> Data </TD>
</TR>
</TABLE>

The result:
  

Table name

First column	Second column
Data	Data

Probably not very impressive but all commands have additional optional attributes that can change a table a lot. 

<TABLE> command attributes:

ALIGN="LEFT|CENTER|RIGHT" - "orientates" a table on a page.

WIDTH="pixels|procentage" - specifies the table width.

BORDER - specifies the table border width in pixels.

CELLSPACING="pixels" - specifies the space between cells.

CELLPADDING="pixels" - specifies the distance between the cell text and the cell border.

BGCOLOR="color_code" - specifies table background color.

BACKGROUND="link to image file" - another way to change the table background.

<TABLE CELLSPACING=10 BORDER=4 CELLPADDING=5 ALIGN="RIGHT" WIDTH="70%" BGCOLOR="#C0C0C0">
<TR> < !-- Column names -->
<TH> First column </TH> <TH> Second column </TH>
</TR>
<TR> < !-- First row -->
<TD> Data </TD>
<TD> Data </TD>
</TR>
</TABLE>

The result:  

First column	Second column
Data	Data

<TR> command attributes:

ALIGN="LEFT|CENTER|RIGHT" - specifies the horizontal cell contents orientation of the row (to the left/right border or in the middle).

VALIGN="TOP|MIDDLE|BOTTOM|BASELINE" - specifies the vertical cell contents orientation of the row (to the top, bottom etc.).

BGCOLOR="color_code" - specifies the row background color.

<TABLE ALIGN="RIGHT" BORDER=1>
<TR BGCOLOR="#C0C0C0">
<TH> First column </TH> <TH> Second column </TH>
</TR>
<TR BGCOLOR="#FFFFFF" ALIGN="Center">
<TD> Data </TD>
<TD> Data </TD>
<TR VALIGN="Middle"><TD> Data <BR> Second row </TD> <TD> Data </TD>
</TR>
</TABLE>

The result:  

First column	Second column
Data	Data
Data Second row	Data

<TD>, <TH> command attributes:

ALIGN="LEFT|CENTER|RIGHT" - as rows.

VALIGN="TOP|MIDDLE|BOTTOM|BASELINE" - as rows.

WIDTH="pixels|procentage" - specifies the cell width in comparison with the whole table width. Note: if you change one cell width, all column cell widths will change accordingly.

HEIGHT="pixels|procentage" - specifies the cell height. If you change one cell height, the whole row height will change accordingly.

 

NOWRAP - the same effect would be if you put cell text between <NOBR> tags.

 

COLSPAN - this attribute specifies how many columns the cell will span.

 

ROWSPAN - this attribute specifies how many rows the cell will span.

 

BGCOLOR="color_code" - specifies the cell background color.

 

 

<TABLE BORDER=1 ALIGN="RIGHT" WIDTH="70%">
<TR BGCOLOR="#C0C0C0"><TH COLSPAN=2> First column </TH>
<TH ROWSPAN=2> Second column </TH></TR>
<TR BGCOLOR="#C0C0C0"><TH BGCOLOR="#808080"> One column part </TH>
<TH> Other column part </TH></TR>
<TR BGCOLOR="#FFFFFF" ALIGN="Center"><TD> Lots lots lots lots lots of data </TD>
<TD NOWRAP> Lots lots lots lots lots of data </TD>
<TD VALIGN="Bottom"> Other data </TD></TR>
<TR VALIGN="Middle"> <TD ALIGN="Right" ROWSPAN=2> Data <BR> Second row </TD>
<TD ROWSPAN=2> Data </TD><TD> First row </TD></TR>
<TR><TD ALIGN="Right"> Second row </TD></TR>
</TABLE>

The result:

  

First column		Second column
One column part	Other column part
Lots lots lots lots lots of data	Lots lots lots lots lots of data	Other data
Data Second row	Data	First row
		Second row

So, now you can create a web page with tables. Well, lets move on to the next section HTML images.