TABLES & TABLE FORMATS

This Tutorial is by Art Camm

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)	Col1	Col2	Col3
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. A much greater control over the color and height of a line is gained by making use of a width attribute in the ‹table› tag with bgcolor and height attributes in the cell, ‹td›, tag. In this instance a cellpadding=0 must be used in the table tag to see the effect (e-mail communication: ctpaso),e.g.,

‹table width=## cellpadding=0› ‹tr›‹td bgcolor=? width=## height=#›‹/td›‹/tr›, or ‹tr›‹td bgcolor=? height=#›‹spacer type="horizontal" size=##›‹/td›‹/tr› ‹/table› Here ## and # are expressed in pixels, and ## in each is given the same value. A spacer type=horizontal tag just controls horizontal width and there is also a spacer type=vertical for vertical height. Some illustrations follow: height=1 height=2 height=3 height=1 height=2 height=3 height=1 height=2 height=3 There are some "tricks" possible using the above coding as a basis which provide interesting line effects. Among them are two-toned lines, alternating color lines, and sloped lines. 1x1 Tables - To 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. 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› Content1 Content2 Content3 Content4 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 Attributes - A 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: Content1 Content2 Content3 Content4 Assigning just the second row of the 2x2 table a color, "ivory", for the attribute of its ‹tr› lead tag leads to: Content1 Content2 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: Content1 Content2 Content3 Content4 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=#› Content1 Content2 Content3 Content4 It should be noted that cellspacing, and cellpadding , apply only to the ‹table› tag. 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=#› Content1 Content2 Content3 Content4 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 Content3 Content4 and similarly: Content1 Content2 Content3 Content4 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 first row had the cell widths varied, yet the second row was similarly changed; and in the second 2x2 table only the second row had the cell widths varied, and yet still the first 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: Content1 Content2 Content4 Table Formatting - Table 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. The fact that a table cell "grows" vertically as the content within the cell is increased can be used as a way to introduce vertical lines. A cell is introduced prior to and after the text/image for which the background color and width for the ‹td› tag can be chosen in the following way: ‹td bgcolor=? width=??›‹/td› <‹td›Text/Image› ‹td bgcolor=? width=??›‹/td› For the examples, a spacer is introduced in the cell preceding and following the cell for the vertical line to make the effect evident. These cells could just as well have contained text or images which would be separated from another text or image by a vertical line. Text/Image Text/Image Text/Image Text/Image Text/Image Text/Image Text/Image Text/Image Text/Image Text/Image 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› Text Text 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 Effects - To 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 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 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. 1 2 3 4 5 6 7 8 9 Just apples in the light blue sea!! 12 13 16 17 18 19 20 21 22 23 24 This shows how the colored text will appear when a background image is introduced as a table attribute. 1 Apple Apple 4 5 8 9 Just apples in the light blue sea!! 12 15 16 17 Apple 20 21 24 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 WebTV, a personalized set of F-keys, e.g.. WebTV Resources WebTV Utility Suite 101 Net4TV 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. Email