 |
In the source code, properties of a
table are are given cell by cell. This makes the generation of more complicated
tables very unwieldy in source code or with simple HTML editors.
HoTMetaL (starting with version 4) provides very convenient tools to
format tables and to work with tables.
|
|
 |
There are, however, lots of
opportunities to really, really mess up your table and to induce system
crashes! |
|
The most important tool is the
"table property" button (table
symbol with something else in the row of buttons dedicated to tables) which
allows to set properties with one fell swoop for whole rows and columns, but
also for the whole table or single cells. Lets see how it works. |
|
|
First, produce a
table: Click on "Insert
table" pulled down from the main menu entry "Table"; or click on the "Insert table" button (the button with a table
symbol). Choose the number of rows and columns you like; erase anything coming
up on "Width" (we already
dealt with that
shortly); and set the grid as you like. |
|
|
Now click on the table
property button with your cursor inside some arbitrary place in the
table |
|
|
You get a choice of adjusting the
properties of the table, a column,
a row, or a cell. |
|
Let us start with the table: |
|
|
You already know about the background color. Next
is width, either in % of whatever screen size is used for viewing your
document (you do not really know that!) or in (absolute) pixels. This will give
the size of the whole table! |
|
|
Then you decide about the border. Again, there
are unclear options: you could have
no border by clicking on "no
border" or you can choose a border with width
0 or with simply no
entry. What is the difference? Your browser probably shows the same
thing: A table with no border. But other browsers may react differently. |
|
|
You have now an option for "cell spacing" and "cell padding" What is that? Remember that
all these menus are only editing tools to insert attributes (and that they
mostly do not give you all the attributes). If you don't know what something
means, look it up in the attribute list
which is complete and gives short explanations: |
|
Put your cursor inside the table tag
and hit F6. You find for |
|
|
Cell
spacing: Space in pixels between cells. |
|
|
Cell padding:
Space in pixels between the cell border and the contents. |
|
|
Try it. But be aware of the fact that you are
making life more complicated for browsers and that you now transfer more data -
it will take (a little bit) more time to load your document. |
|
Basic Advice:
Set only clear attributes you definitely want and that you understand perfectly
well. Otherwise leave the attribute open; this gives the browser the freedom of
choice and since you don't care there are the least possible problems |
|
Now lets look at "Column" |
|
|
You have a choice of color and width as before -
and already there is potential for conflict! For example, what is the browser
supposed to do if you define the table width to be 150 pixels, and then
give the width of one column to be 200 pixels? |
|
|
You also may now choose the alignment of the
contents in a column. The attributes here are clear, except for "Other". This simply means you leave it to the
browser. |
|
|
The line Cell
Type is new. Try it! |
|
Rows are simple now: Everything is the same
as for columns except that "width"; quite logically, is replaced by
"heights". Again there is plenty
of opportunity for conflicting commands. |
|
This leaves
Cells |
|
|
Everything is pretty clear. Bur now you really can mess up your table. Any attribute given
to a cell may be in conflict with what you specified for the table, the columns
and the rows. Cell commands usually override other (as the must) so be aware of
what you are doing! |
|
|
A common problem is that just one cell carries a "width" entry - which
now forces the whole column to this width.
Finding and erasing it may be tiresome, because you have to check every single
cell - the "width" entry oft the cell will not show in the table
property window under "columns"! |
|
The format used in this script is a
good example of how to use tables for formatting. We obviously want the
triangles to be all the way to the left, the text after the triangles to start
right after the triangles, the spheres to align with the text following the
triangles, and the text after the spheres to start right after the
spheres. |
|
|
How do we do this? We need a
table with three columns, the first one containing the triangles, the second
one the spheres and the third one the text after spheres. It looks like this,
just without borders |
|
|
|
|
|
|
Text text text....... |
| |
|
Text text text....... |
| |
|
|
|
|
|
|
|
|
|
|
|
To achieve the desired result, we use the
possibility to merge or
divide columns,
rows and cells. For that you need the 6 buttons showing blue rectangles
with arrows or dividing lines and the 6 buttons showing green or red
lines in a table. |
|
|
The latter ones are easy. They insert whole rows
or columns to the left or to the right of wherever your cursor is; or they
remove rows or columns (red lines). Try it. Its good at this point, to remember
the "restore" button (arrow to
the left) - e.g. if you accidentally erased a table column. |
|
|
The "blue" buttons are more tricky. The work for
cells. You may divide your cell vertically or horizontally, or both, and you
may do this many times if you like. Or you may merge two cells, going
left/right/up/down from the cell you start. |
|
Again, you have a powerful tool and a
really very, very good opportunity to completely mess up your table. Often the
buttons won't work because you requested a logical impossibility. More
dangerously, they may actually do something - but create a conflict within some
browsers! |
|
But now to the simple formatting question from above. |
|
|
What you have to do in order to start text right
after the triangle, is to merge the two cells to the left of the triangle. So
use the extension to the right - that´s all. |
