Table tags


You can define tables to format your page by means of the <TABLE> tag. Each table contains rows and cells. You can define rows by means of the <TR> tag and cells by means of the <TD> tag.

  1. Defining a table
  2. Defining a row
  3. Defining a cell
  4. Defining table's title

Defining a TABLE

<TABLE BORDER="number" CELLSPACING="number" CELLPADDING="number" WIDTH="%" BGCOLOR="#nnnnnn">

The BORDER parameter define the table's border:

this is a table: 1 row, 1 cell, BORDER=1...

And this is the HTML page's source:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TR><TD>this is a table: 1 row, 1 cell, BORDER="1"...</TD></TR>
</TABLE>
</BODY>
</HTML>

this is a table: 1 row, 1 cell, BORDER=5...

And this is the HTML page's source:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="5">
<TR><TD>this is a table: 1 row, 1 cell, BORDER="1"...</TD></TR>
</TABLE>
</BODY>
</HTML>

this is a table: 1 row, 1 cell, BORDER=0!

And this is the HTML page's source:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="0">
<TR><TD>this is a table: 1 row, 1 cell, BORDER=0!</TD></TR>
</TABLE>
</BODY>
</HTML>

Yes, you can use a zero value! That is helpful to improve your page's without an apparent use of tables...

Now look at this table:

row 1: cell 1 row 1: cell 2
row 2: cell 3 row 2: cell 4

As you can see, cells are separated each other by a certain space: you can define the space between cells as you like.

And this is the HTML page's source:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="1" CELLSPACING="10">
<TR><TD>row 1: cell 1</TD><TD>row 1: cell 2</TD></TR>
<TR><TD>row 2: cell 3</TD><TD>row 2: cell 4</TD></TR>
</TABLE>
</BODY>
</HTML>

How could you make
this without tables?

Look at the above table...How could you build something like that without using tables?

And this is the HTML page's source:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="0" CELLSPACING="40">
<TR><TD>How could</TD><TD>you make</TD></TR>
<TR><TD>this without</TD><TD>tables?</TD></TR>
</TABLE>
</BODY>
</HTML>

Look at this table:

1 2
3 4

And this is the HTML page's source:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="1" CELLPADDING="40">
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
</BODY>
</HTML>

Now we use both CELLPADDING and CELLSPACING to force CELLSPACING="0"...
Look at this table:

1 2
3 4

And this is the HTML page's source:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="40">
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
</BODY>
</HTML>

Changing CELLSPACING:

How could you make
this without tables?

The same table changing CELLPADDING:

How could you make
this without tables?

 

Look at this table:

1 2
3 4

And this is the HTML page's source:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="1" WIDTH="100%">
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
</BODY>
</HTML>

Where WIDTH is the percentage of page filled by the table. Look:

1 2
3 4

And this is the HTML page's source:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="1" WIDTH="50%">
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
</BODY>
</HTML>

And finally, you can change your table's colors by using the BGCOLOR parameter:

cell 1 cell 2
cell 3 cell 4

And this is the HTML page's source:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="1" BGCOLOR="#000080">
<TR><TD>cell 1</TD><TD>cell 2<TD/></TR>
<TR><TD>cell 3</TD><TD>cell 4</TD></TR>
</TABLE>
</BODY>
</HTML>

Defining a ROW

<TR ALIGN="horizontal alignment" VALIGN="vertical alignment">

ALIGN may be:

  1. LEFT
  2. CENTER
  3. RIGHT

VALIGN may be:

  1. TOP
  2. MIDDLE
  3. BOTTOM
How to align the text of page by varying ALIGN and VALIGN:
1 ALIGN="LEFT"
2 ALIGN="CENTER"
3 ALIGN="RIGHT"

4
 VALIGN="TOP"

5
 VALIGN="MIDDLE"

6
 VALIGN="BOTTOM"

7
 ALIGN="LEFT" VALIGN="TOP"

8
 ALIGN="CENTER" VALIGN="TOP"

9
 ALIGN="RIGHT" VALIGN="TOP"

10
 ALIGN="LEFT" VALIGN="MIDDLE"

11
 ALIGN="CENTER" VALIGN="MIDDLE"

12
 ALIGN="RIGHT" VALIGN="MIDDLE"

13
 ALIGN="LEFT" VALIGN="BOTTOM"

14
 ALIGN="CENTER" VALIGN="BOTTOM"

15
 ALIGN="RIGHT" VALIGN="BOTTOM"

Well, you can try all combinations...

Defining a CELL

<TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM ROWSPAN="number" COLSPAN="number" WIDTH="number or % of table" BGCOLOR="#nnnnnn" NOWRAP>

ALIGN and VALIGN: see defining a ROW

You can define how many rows or columns the cell must span. In order to define that, you have to use the ROWSPAN and COLSPAN parameters. ROWSPAN means how many rows the cell must span and COLSPAN means how many columns the cell must span:

r1 c1 r1 c2 r1 c3 r1 c4
r2 c1
r3 c1 r3 c2
r4 c1 r4 c2 r4 c3

In the sample above, the first row (r1) has 4 cells:

  1. cell1 (c1), which span 1 row
  2. cell2 (c2), which span 2 rows
  3. cell3 (c3), which span 3 rows
  4. cell4 (c4), which span 4 rows

The second row has 1 cell, the third has 2 cells, the fourth has 3 cells!!

And this is the HTML page's source:

</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TD>r1 c1</TD><TD ROWSPAN="2">r1 c2<TD ROWSPAN="3">r1 c3</TD><TD ROWSPAN="4">r1 c4</TD>
</TR><TD>r2 c1</TD>
<TR>
<TD>r3 c1</TD><TD>r3 c2</TD>
</TR>
<TR>
<TD>r4 c1</TD><TD>r4 c2</TD><TD>r4 c3</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Now look here:

r1 c1 r1 c2 r1 c3 r1 c4
r2 c1 r2 c2 r2 c3
r3 c1 r3 c2
r4 c1

In the sample above, the first row (r1) has 4 cells.

The second row has 3 cells:

  1. cell1 (c1), which span 2 columns
  2. cell2 (c2)
  3. cell3 (c3)

The third row has 2 cells:

  1. cell1 (c1), which span 3 columns
  2. cell2 (c2)

The fourth row has 1 cell:

  1. cell1 (c1), which span 4 columns

And this is the HTML page's source:

</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TD>r1 c1</TD><TD>r1 c2<TD>r1 c3</TD><TD>r1 c4</TD>
</TR>
<TR>
<TD COLSPAN="2">r2 c1</TD><TD>r2 c2<TD>r2 c3</TD>
</TR>
<TR>
<TD COLSPAN="3">r3 c1</TD><TD>r3 c2</TD>
</TR>
<TR>
<TD COLSPAN="4">r4 c1</TD>
</TR>
</TABLE>
</BODY>
</HTML>

You can define the cell's WIDTH. You can specify either 'pixels' or 'percentage of table'. So you ca use WIDTH="number" or WIDTH="%".

c1 c2 c3
c4 c5 c6
c7 c8 c9

In the previous sample, c5 is defined so: WIDTH="10".

And this is the HTML page's source:

</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TD>c1</TD><TD>c2<TD>c3</TD></TD>
</TR>
<TR>
<TD>c4</TD><TD WIDTH="10">c5<TD>c6</TD></TD>
</TR>
<TR>
<TD>c7</TD><TD>c8<TD>c9</TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>

Now look here:

c1 c2 c3
c4 c5 c6
c7 c8 c9
Here c5 is defined so: WIDTH="10%". That's means: 10% of table.

And this is the HTML page's source:

</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TD>c1</TD><TD>c2<TD>c3</TD></TD>
</TR>
<TR>
<TD>c4</TD><TD WIDTH="10%">c5<TD>c6</TD></TD>
</TR>
<TR>
<TD>c7</TD><TD>c8<TD>c9</TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>

Now let's see colors:

. . .
. . .
. . .

Here I'm using the BGCOLOR parameter.

And this is the HTML page's source:

</HEAD>
<TABLE BORDER="1" WIDTH="100%">
<TR>
<TD BGCOLOR="#ffffff">.</TD><TD BGCOLOR="#ff0000">.</TD><TD BGCOLOR="#0000ff">.</TD>
</TR>
<TR>
<TD BGCOLOR="#00ff00">.</TD><TD></TD><TD BGCOLOR="#ffff00">.</TD>
</TR>
<TR>
<TD BGCOLOR="#808080">.</TD><TD BGCOLOR="#00ffff">.</TD><TD BGCOLOR="#ffffff">.</TD>
</TR>
</TABLE>
</BODY>
</HTML>

You can change text colors too!

And this is the HTML page's source:

</HEAD>
<TABLE BORDER="1" WIDTH="100%">
<TR>
<TD BGCOLOR="#00ffff"><FONT COLOR="#0000ff">You can change</FONT></TD>
<TD BGCOLOR="#00ffff"><FONT COLOR="#0000ff">text colors too!</FONT></TD></TR>
</TR>
</TABLE>
</BODY>
</HTML>

Defining table's title

You can put titles to your table by using the <CAPTION> tag:

<CAPTION ALIGN=TOP|BOTTOM>

Title
     

And this is the HTML page's source:

</HEAD>
<BODY>
<TABLE BORDER="1" WIDTH="100%">
<CAPTION ALIGN="TOP">Title</CAPTION>
<TR>
<TD>.</TD><TD>.</TD><TD>.</TD>
</TR>
</TABLE>
</BODY>
</HTML>

     
Title

And this is the HTML page's source:

</HEAD>
<BODY>
<TABLE BORDER="1" WIDTH="100%">
<CAPTION ALIGN="BOTTOM">Title</CAPTION>
<TR>
<TD>.</TD><TD>.</TD><TD>.</TD>
</TR>
</TABLE>
</BODY>
</HTML>


Index           Home  Back  Forward       About  Contact us!

Copyright (c) 1998-2006 Wowarea