|
To
define a Table, we will use two tags. The
opening table tag (i.e. <table>) and the
closing table tag (i.e. </table>) - The
following example defines a very basic table.
No Rows and No Columns. This basic table
will not be recognized by browsers as the table
is not complete without at least one Row and one
Column, however this is the first step to defining
a table:
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, lets 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 effect the borders surrounding all cells.
We have define 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> |
Well, that about sums up defining a table. Let's
move on to Defining Rows and Cells. We will
expand on the above example:
Defining
a Table
Defining a Row
Defining
a Column
|