TABLES & TABLE FORMATS

At one time or another everyone has seen a table presenting some kind of information. The material given is usually in a neat, concise, and readily understandable form. Creating or dealing with tables, especially when using HTML, is another matter. The stereotypical table can still be made, but HTML goes beyond this in the sense of viewing everything contained on a page, text and images, within the context of a table format. New things are happening and Table Formatting is being superceded by Cascading Style Sheets (CSS) to format HTML documents, as in HTML4.0 or the more recent XML. Nevertheless, tables and table formatting are still within the scope of HTML and can still be used to great advantage by WebTV users.

In the descriptions that follow a usual table will first be represented. This is intended simply to introduce terms commonly associated with tables. Following this are some HTML table constructs and formats. Only the most basic can be given for a great number of variations are possible.



Topics Index
- Table Definitions -
- "Empty" Tables -
-1x1 Tables -
- 2x2 Tables -
- Color Attributes -
- Other Attributes -
- Table Formatting -
- Special Effects -



Table Definitions Below is a representative table of 4 rows and 3 columns with all parts of it identified:


(r,c)Col1Col2Col3
Row1(1,1)(1,2)(1,3)
Row2(2,1)(2,2)(2,3)
Row3(3,1)(3,2)(3,3)
Row4(4,1)(4,2)(4,3)


Rows, r, go horizontally across and columns, c, go vertically down the table. Each item within the table, (r,c), occupies a space, a "cell", the position for which can be specified by designating which row and which column the cell is located. For example, cell (3,2) refers to the position in the 3rd row and 2nd column.

Having done all this numbering it will now be forgotten. HTML makes no use of numbering in creating tables. Rather, numbering is implied by the order in which rows and columns are constructed. For example, the HTML tags for a representative table of 1 row and 1 column is:


‹table›
‹tr›‹td›  Content ‹/td›‹/tr›
‹/table›


Here the tag pair ‹table›, ‹/table› denotes where the table begins and ends. Between these tags are placed the rows the beginning and end for which are identified by the tag pair ‹tr›, ‹/tr›. On each row is a cell, the content for which is between the tag pair ‹td›, ‹/td›. The content of a cell may either be one word or character, as in the example, an image, or an entire paragraph or page of text, as is done in the writing of this document.


"Empty" Tables The introduction to tables is a learning experience, because even errors are instructive. Later, these become a device to help in "debugging", as when missing a less-than sign to an image statement for a cell content. Right now it is instructive to note that nothing but a table attribute, like "bgcolor" or "border" (see below), for the ‹table› tag has to be specified to have the basic set of table commands work. In other words, a completely "empty" table (no attributes) shows nothing when run. Put in one attribute and the table is not empty but gives a line, the thickness depending on what is chosen for a ‹table› tag attribute, e.g.,


Border=0


Border=1


Border=2


Border=3


Leave out the "bgcolor" attribute and just include the border attribute results in an embossed line:


Border=1


Border=2


Border=3


A range of colored or embossed lines can thus be generated without having to resort to other means.


1x1 TablesTo more readily see the effect of creating a 1 x 1 table (one row, one column), an attribute will be introduced. This is the table attribute "border":


‹table border=#›


which has the effect of introducing a border around every cell in the table. A choice of either no border, # = 0, a thin border, # = 2, or a thicker border, # = 5, can be made, the higher the number the thicker the border. WebTV does not allow an attribute for a choice of border colors, but color can still be introduced in another way. Using the border attribute leads to:


# = 0# = 2# = 5
Content
Content
Content


The content of a cell is not restricted to text. It can also be an image, for example:

Content


This particular image has a transparent background and has neither its width nor height given in the ‹img› statement. It should be noted how the border "hugs" the edges of the image in the cell, essentially creating a frame for it.


2x2 Tables Now, for two cells on a row each requires its own ‹td›, ‹/td› tags:


‹table border=1›
‹tr›
‹td›Content1›‹/td›
‹td›Content2‹/td›
‹/tr›
‹tr›
‹td›Content3‹/td›
‹td›Content4‹/td›
‹/tr›
‹/table›
Content1Content2
Content3Content4


The HTML for the 2x2 table on the right is to its left.

It must be noted that a browser "reads" from left-to-right and top-to-bottom. So the order in which a row is "read" is first cell first, second cell second, and so on. Similarly, the first row is "read" before the second, and so on. The position of a cell thus depends on where it is placed, and not on any numbering scheme.

A cell in HTML is not "just a little thing" into which a word or a number is placed. Each cell in HTML behaves as if it is its own page. Text and/or images can be fitted into each cell just as they would on a page. In fact, the example just given is no more than a 1x2 HTML table, the first cell containing the HTML codes for the table created in the second cell.


Color AttributesA table in HTML is also not "just a table". It is a page in its own right containing smaller pages, which are the cells, these being separated by rows. To show this it is better to use color and width attributes both of which can apply to ‹table›, or ‹td› lead tags (note: the ‹tr› tag has no width attribute>,e.g.:


‹table width=? bgcolor=??›
‹tr bgcolor=??`›
‹td width=? bgcolor=??›


For example, using "yellow" in the color attribute for the 1x1 ‹table› lead tag of the previous image gives:



while for the text only 2x2 table above it gives:


Content1Content2
Content3Content4


Assigning just the second row of the 2x2 table a color, "ivory", for the attribute of its ‹tr› lead tag leads to:


Content1Content2
Content3.Content4

And for this same table, the first cell of the first row may be given the color "cyan" as its ‹td› lead attribute:


Content1Content2
Content3Content4


Now the page-in-page nature of tables and cells become evident. The border attribute for a table outlines every independent cell. It will be noted that the "cyan" cell,like every other cells, is surrounded by a "yellow" border, since the table was given this color attribute. For the 1x1 image cell, this means the color of a frame depends on the color attribute chosen for the table. The ‹table bgcolor=?› attributes below are "yellow", "tan", and "black":




These colors will therefore determine the frame color. Using, for the cells ‹td bgcolor=?› attributes "black", "yellow", and "white" the images become framed by the colors chosen for the ‹table›:




Other Attributes Since the cells are "little pages" within a table, larger spacing between them should be thought possible. This would be like separating one table from another, only with cells instead. Doing this requires a cellspacing attribute, given in pixels, in the ‹table› tag:


‹table cellspacing=#›

Content1Content2
Content3Content4


It should be noted that cellspacing, and cellpadding , apply only to the ‹table› tag (e-mail comment: northeastdude). For the above 2x2 table a cellspace of 5 pixels has been assigned. The larger spacing between cells should be evident.

Background space between a table border and the content of a cell can be altered with a cellpadding attribute, in pixels:


‹table cellpadding=#›


Content1Content2
Content3Content4


In this instance a cellpadding of 10 pixels is assigned. The cell has expanded.

Every cell in the 2x2 tables above has the same width, but this can be changed using the width attribute. A table has a width attribute as well, but its function is somewhat different. A reasonable working width for an entire screen is 520 pixels. To make a table of smaller width than the screen the ‹table› width attribute is used. This table is left-justified by default, unless a ‹center› tag precedes it.

Taking care with the mathematics, cells ‹td› can have their widths modified, the sum for the widths totalling to the width of the table, e.g.,


Content1 Content2
Content3Content4


and similarly:


Content1Content2
Content3Content4


In principle, since every cell has a width attribute, every cell in the 2x2 table should be able to be made a different width. In practice, it was not possible to do this, at least using a WebTV Classic. It is not known at present whether this will be possible using a WebTV Plus, or whether there are limitations to what can be done when assigning cell widths. The latter seems more likely. In the first 2x2 table only the second row had the cell widths varied, yet the first row was similarly changed; and in the second 2x2 table only the first row had the cell widths varied, and yet still the second row followed suit.

Sometimes the format of a page may be viewed as having a row carry across two or more columns or, alternatively, as a column carrying across two rows. In such instances it is convenient, and less prone to error, to write a table format for these as if the missing columns or rows were actually there, but contained blank spaces. Then all the rows and columns could be said to be similar in size and could be sequentially numbered. Having thus identified which row or column is carried across an appropriate attribute, discussed below, would be applied to the cell. Whichever cells are lost in this process have their code erased, i.e., their ‹td›,‹/td› tags are eliminated together with whatever is in between.

For a 2x2 table in which a row spans two columns, the appropriate attribute is

‹td colspan=2›


and the resulting table becomes:


Content1
Content3.Content4


For a 2x2 table where a column spans two rows the attribute is:

‹td rowspan=2›


and the resulting table is:


Content1Content2
Content4



Table FormattingTable formatting makes it a relatively simple matter to position text relative to an image. For example, using a 1x2 table format there is obtained:


Content


It is appropriate to note here that the cell tag ‹td› has an align attribute which will position an image left, center or right. The above example has the align attribute center. An align attribute left (the default position) gives:

Content

while the align attribute right gives:

Content


When used with text in a cell it is best to restrict usage of the align attribute. With a single word or one-line phrase a ‹td› attribute of center will nicely put the text in the middle of the cell. With more lines of text this attribute will have every line centered. To gain a nice even left edge to the text it is best to use the default left attribute for ‹td›, as in the following example:


Text that is about the same height as the image will occupy a space of the same height and lines will wrap at the left margin of the image.


It is better to maintain the same height for text and image, so as not to have large voids above or below the image, unless a heading or a bottom caption is desired.


The above illustration demonstrates the vertical alignment,‹valign›, attributes for ‹td›. These are top, middle, and bottom. The horizontal alignment attribute center, ‹td align=center›, places the image at a center point in the cell.

It is important to point out that judicious care must be taken when using textual content alongside an image. The height to the table will "grow" in proportion to the number of lines in a text cell in excess of the image height. It is best, using a trite phrase, "to keep things short and simple" to avoid this.

Two of the situations found to be difficult by many is to place text between images or to place an image between text. These can be done easily using a 1x3 table to create the format:


‹table›
‹tr›‹td›Image‹/td›‹td›Text‹/td›
     ‹td›Image‹/td›‹/tr›
‹/table›




Text


‹table›
‹tr›‹td›Text‹/td›‹td›Image‹/td›
     ‹td›Text‹/td›‹/tr›
‹/table›


TextText


In the examples that have been presented a border attribute has been used to show the dimensions of the resulting table. When coding using table formats doing the same at the onset provides a good guide for textual and image alignments. When these are satisfactory the border attributes can be either eliminated or set to zero so they will not show.


Special EffectsTo summarize, a sequence will be shown giving stages in a table formatting example. In the process two useful tips will be demonstrated, both based on using in image for a table background, i.e., the table tag is:

‹table background=URL.gif (or.jpg"›

First it will be shown that text can be placed on an image, then an image will be superimposed on an image.


Begin by creating a bordered table in which each cell is numbered and :


1234
5678
9101112
13141516
17181920
21222324


Introduce a word in appropriate cells to approximate the position of text or images. On a paper representation of this, lightly shade blocks of cells within which the text or images are to appear relative to one another. This will indicate the appropriate rowspan and/or colspan attributes to apply to the lead ‹td› tag of text or images and which numbered cells,‹td›##‹/td›,are to be deleted in gaining the desired format.

Cells behave independently, so text in cells can be given differing colors using the appropriate ‹font› tags. Viewing the resulting bordered table provides an indication if the coding has been correct to this point; e.g.:


1234
5678
9Just apples in
the light blue sea!!
12
1316
17181920
21222324


This shows how the colored text will appear when a background image is introduced as a table attribute.


1AppleApple4
58
9Just apples in
the light blue sea!!
12
1516
17Apple20
2124


Finally, delete all numbers in cells and replace them by an HTML coded space,?=nbsp in & ? ; (no spaces between & and ;), this preserves cell integrity which otherwise would be lost with everything deleted. Replace the word used to indicate placement for an image with the URL for it. Finally, set the table border attribute to 0. This results in images being superimposed on an image, in this case with text on the image as well.


  
  
 Just apples in
the light blue sea!!
 
  
  
  


Returning to the introductory example of placing differing colored frames about an image, these frames can now be made more ornate.Tables can be nested in tables.e.g.,


‹table›‹tr›‹td›
‹table›‹tr›‹td›
Image/Text‹/td›‹/tr›
‹/table>‹/td›‹/tr›
‹/table›


Varying the background color for each nested table creates a multicolor frame for an image:




Maintaining these same table background colors and varying the ‹td› background colors for cells outermost from the image introduces "striping" between the border frames:


Varying the width attribute in nested tables gives interesting effects as well (e-mail notes: ctpaso):


Apple


There is a WebTV only feature which applies solely to the ‹td› tag when making tables. These allow a gradual "rainbowing" type effect from the color chosen initially for the cell to some other color. The default is to take the initially chosen color given by "bgcolor" to some other color, "gradcolor", in the lead tag in a horizontal direction:


‹td bgcolor=? gradcolor=?›

The effect in going from red to yellow is shown here:


Apple


There is no restriction to shading in a horizontal direction. One has a full 360° to work with by use of the additional gradangle attribute:


‹td bgcolor=? gradcolor=? gradangle=#›
#=number w/o symbol °


The angle is taken from the horizontal direction going counter-clockwise, as shown here:


45°
Apple

90°
Apple

225°
Apple


It is a matter of imagination to make use of this as well as the other table attributes available with WebTV.


Apple


Another WebTV only feature allows clickable cells:


‹td href="http://URL"›


This allows construction of, at least for, a personalized set of F-keys, e.g..


WebTV ResourcesWebTV Utility
Suite 101Net4TV


All other cell attributes are unaffected.

The viewer has permission by this author to view or use the coding for all examples on this page, which has been written entirely using table formatting.

These are but a few of the formats possible using tables. The WebTV browser and/or the one limited to Classic users does not enable a demonstration of the total flexibility allowed in page formatting due to the small number of attributes enabled and which are available with other browsers. Nevertheless, considerable variation is within the available table attributes for WebTV and can be used to a users advantage.



Page writen and designed by: Art C.
Use with permission
Thank's Art.


Visit my home site

E-mail



Like this page?
Send it to a friend!

Friend's Email('s)
You may enter up to 10
separated by commas.

Enter Your Address


Veinotte.com's Pass It On program.