Html Tables and Html Table elements and attributes

HTML Tables

<TABLE>	Table (made up of rows)
<TR>	Row (made up of data cells)
<TH>	Heading Data Cell (Can contain paragraphs, images, lists, forms, tables)
<TD>	Data Cell (Can contain paragraphs, images, lists, forms, tables)

<TABLE> Attributes

BORDER

Determines the thickness of the table border

Example: <TABLE BORDER = “2”>

CELLPADING

Determines the distance between the border of a cell and the contents of the cell

Example: <TABLE CELLPADDING = “3”>

CELLSPACING

Determines the empty spacing between the borders of two adjacent cells

Example: <TABLE CELLSPACING = “1”>

<TABLE border = "1" >

<TR>

<TH>Indoor</TH>

<TH> </TH>

</TR>

<TR>

<TD>Squash</TD>

<TD>Cricket</TD>

</TR>

</TABLE>

Result

Indoor	Outdoor
Squash	Cricket

<TABLE>,<TR>,<TH>,<TD> Attributes

ALIGN

Possible values: Center, Left, Right

Example: <TH ALIGN = “center”>

BGCOLOR

Example: <TD BGCOLOR = “red”>

WIDTH

Example: <TR WIDTH = “40%”>

HEIGHT

Example: <TABLE HEIGHT = “200”>

<TR> Attributes

VALIGN

Determines the vertical alignment of the contents of all of the cells in a particular row

Possible values: Top, Middle, Bottom

Example: <TR VALIGN = “bottom”>

<TH> & <TD> Attributes

NOWRAP

Extend the width of a cell, if necessary, to fit the contents of the cell in a single line

Example: <TD NOWRAP>

COLSPAN

No. of rows the current cell should extend itself downward

Example: <TD COLSPAN = “2”>

ROWSPAN

The number of columns the current cell should extend itself

Example: <TD ROWSPAN = “5”>

VALIGN

Same as that for <TR>.

The use of caption in html table is as follows.

<TABLE border = "1" >

<CAPTION>

My favorite sports

</CAPTION>

<TR>

<TD>Squash</TD>

<TD>Cricket</TD>

</TR>

</TABLE>

Result

       My favorite sports

Squash

Cricket

Let's define some attributes to the table to define the width of the table, background color, cell spacing, space within cells and border size.   Each of these attributes will define what the table will look like in the browser.   Each of these attributes may also be

<table bgcolor="#800000">
</table>

Let's now define the width of the table by adding the width parameter to the example. Note: If you omit the width the default used by browsers will be the width of the browser window used for displaying the web page:

<table bgcolor="#800000" width="43%">
</table>

In the above example we have set the table width to be 43% - A Percentage is based upon the window width of the browser displaying the web page.  you can be more specific and define the table to be X pixels wide by omitting the Percentage sign.  The following example shows the width to be 43 pixels wide instead of 43% of the Window Width:

<table bgcolor="#800000" width="43">
</table>

You can also define the height of the table in percent of window height or in pixels high.  The following example shows defining the height to be 70% of the window height (Note: Not all browsers support the height attribute)

<table bgcolor="#800000" width="43%" height="70%">
</table>

Now, let’s define the Border width.  This defines the outlining border for each cell and how thick it should be.  A Value of 0 will mean no border is to be visible in the browser.  In our example we will use a standard border width of 1:

<table bgcolor="#800000" width="43%" height="70%" border="1">
</table>

Next we will define the spacing of cells from each other.  The Cell spacing attributes is used to define this as shown in the following example:

<table bgcolor="#800000" width="43%" height="70%" border="1" cellspacing="15">
</table>

Let's now define the Cell Padding.  This is the amount of spacing to be used within each cell.  It tells the browser how much space to provide between the cell wall and the text and/or graphics within the cell.

<table bgcolor="#800000" width="43%" height="70%" border="1" cellspacing="15" cellpadding="8">
</table>

You can also define the Table Border Color.  This color is set on the outside border of the table.  In Microsoft Internet Explorer it will also affect the borders surrounding all cells.  We have defined the following example border color to be Teal:

<table bgcolor="#800000" width="43%" height="70%" border="1" cellspacing="15" cellpadding="8" bordercolor="#008080">
</table>

The following two attributes are only valid when displayed in Microsoft Internet Explorer 4.x and will override the bordercolor attribute defined in the previous example.  The first is to define a Dark border color and the second is to define a Light Border color.  This is to provide the ability to create a shadow effect from the Table.  In the following example we have defined Navy as the Dark Color and Silver as the light color:

<table bgcolor="#800000" width="43%" height="70%" border="1" cellspacing="15" cellpadding="8" bordercolor="#008080" bordercolorlight="#000080" bordercolordark="#FFFFCC">
</table>