webmastertools4u

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:

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