Method: aligning tables with the surrounding
document content.
Wraps and
flows
Browsers place tables into a document just like they
place images: As a rectangular object around which text may flow. By
default, a table causes a break in the current text flow. The table
is placed on the next line below the text, against the document's
left margin. When the table is finished, the flow resumes on the
line below the table, which looks something like this:
- Coffee beans are roasted to perfection by coffee
manufacturers. Some coffee's are not equal. The kind of roast is
essential for flavor.
| |
Coffee |
Cream |
| Brand |
Nescafe |
Maxwell House |
| Roast |
Columbian |
Dark Roast |
-
While different methods are chosen in the manufacturing of
coffee, the roasts are defined in the same manner.
Notice that the text is uncomfortably close to the
table. This is because the browsers don't place additional space
before or after the table. If you want that, you should add a <br>
or <P> tag
before and after the table. Your table will be set off from the
surrounding text with blank lines:
- Using <br>
tag:
Coffee beans are roasted to perfection by coffee
manufacturers. Some coffee's are not equal. The kind of roast is
essential for flavor.
| |
Coffee |
Cream |
| Brand |
Nescafe |
Maxwell House |
| Roast |
Columbian |
Dark Roast |
-
Using <P> Tag:
While different methods are chosen in the manufacturing of coffee, the
roasts are defined in the same manner.
This is better, but hardly an exciting layout. Like images,
tables often look better when the surrounding content flows around them. You can
control this behavior by adding the align
option to your <TABLE>
tag.
The align
attribute accepts a value of left
or right, indicating the
margin against which the table is to be placed. The content following the table
is moved up beside the table, filling the adjacent space. The result is much
more attractive:
- Coffee beans are roasted to perfection by coffee manufacturers. Some
coffee's are not equal. The kind of roast is essential for flavor.
While different methods are chosen in the manufacturing of
coffee, the roasts are defined in the same manner. Dark roast, light
roast, and medium roast. There are different names for these
roasts,columbian, ethiopian, sumatra, house blend, breakfast blend,
etc.
When you want to flow text around your tables like this, don't
surround your table with <P>
tags; it will break the text flow and will not give you the effect you desire.
Breaking the flow
Sometimes you don't want all of the content below your table to
flow up beside the table. For example, it may be that a new section, unrelated
to your table, begins below your table and would not make sense positioned next
to the table. In these cases, you want to interrupt the flow at the start of
that section and have it resume below the table.
You can use the clear
attribute in conjunction with the <BR>
tag to achieve this effect. Normally, the <BR>
tag causes a break in the current flow, resuming the flow on the next line below
the current line. When used with the clear
attribute, the <BR>
attribute will break the flow and move down until the specified margin is clear
before resuming the flow.
This is all easier than it sounds. If you have aligned your
table to the left margin using align=left,
and want to break the flow and have it resume below your table, just put the
following in the text flow where you want the break to occur:
<br clear=left>
The result looks like this:
- Coffee beans are roasted to perfection by coffee manufacturers.
Some coffee's are not equal. The kind of roast is essential for
flavor.
| |
Coffee |
Cream |
| Brand |
Nescafe |
Maxwell House |
| Roast |
Columbian |
Dark Roast |
While different methods are chosen in the manufacturing of
coffee, the roasts are defined in the same manner. Dark roast, light
roast, and medium roast.
Dark roast, light roast, and medium roast. There are different names
for these roasts,columbian, ethiopian, sumatra, house blend,
breakfast blend, etc.
Similarly, if your table is aligned to the right, you
would use clear=right
in the <BR>
tag.
If you are creating complex layouts where tables and
images are aligned to both margins, you can also use clear=all
to break until both margins are clear.
Creating space
around your table
When floating a table left or right, you cannot create
space around the table using <P>
tags. The Netscape browser lets you get that space, using the hspace
and vspace
attributes with the <TABLE>
tag to create horizontal and vertical space.
The value of these atrtibutes is the amount of space, in
pixels, to be added around the table. To create a 20-pixel margin around
the table, your <TABLE>
tag might look like:
<table align=left
hspace=20 vspace=20>
The result is much more attractive:
- Coffee beans are roasted to perfection by coffee manufacturers.
Some coffee's are not equal. The kind of roast is essential for
flavor.
| |
Coffee |
Cream |
| Brand |
Nescafe |
MaxwellHouse |
| Roast |
Columbian |
Dark Roast |
While different methods are chosen in the manufacturing of
coffee, the roasts are defined in the same manner. Dark roast, light
roast, and medium roast. Dark roast, light roast, and medium roast.
There are different names for these roasts,columbian, ethiopian,
sumatra, house blend, breakfast blend, etc.
These attributes can be used with tables even when the align
attribute is not being used. In this case, the vspace
attribute will create appropriate space above and below the table, but the
hspace attribute is
ignored.
Since Internet Explorer does not honor the hspace
and vspace attributes,
nor are they part of the HTML 4.0 specification, a better way to create
space around your tables is by modifying the margin
property of the style associated with your tables. This issue will be
covered in style sheets.
<< BACK
Index: Website Creation
Resource Guide To - Website Development & Design
Index
3:
Creating Tables - Everything About HTML Tables