Basic table concepts

Tables

This tutorial covers the creation of tables using HTML markups in graphical browsers . The use of tables to format Web pages will be discussed in another tutorial.

Text-based browsers

Text-based browsers like Lynx do not support tags to create tables. These browsers are important for visual impaired users that have special software that reads the text and translate it into voice. So, how do you create tables in Lynx, or other text-based browsers?

Create you tables in ASCII, using any text editor or wordprocessor, as in the example below:

 KEY-STROKE(s)                    FUNCTION
 ================        =======================================

     PF4                    Delete to the end-of-line.
     -  (minus)             Delete to the beginning of next word.
     ,  (comma)             Delete a character at the cursor.
     PF1 PF4                Undelete the last deleted line.
     PF1  -                 Undelete the last deleted word.
     PF1  ,                 Undelete the last deleted character.
      1                     Beginning of next word.
      2                     End of line.

Use the paired tag <pre> ... </pre> to envelop your text. If you see the source of the above table example, you will find out that this is what I did.

That is all. It is simple and ugly... (smile)

Graphical browsers

If you didn't like what you saw above, then you have to use a graphical browser. Remember, however, that you should provide a text alternative to these tags for the visual impaired users (in some circumstances this is mandated by law), as shown above. What follows is an abridged version of W3C Tables in HTML documents.

Lets start with an example:

The following table (again a graphical browser is needed to see the table format) shows the commands you can use in an editor:

Feature/function What to type Where should the cursor be before you enter a keyword

reformat a paragraph (after cut and paste, otherwise is automatic) Fill at any line in the paragraph

Include a file saved previously in document you are editing Include file fname (where 'fname' is a name of a Vax file you want to include in the present document) where you want the file inserted

checking spelling of your document spell not relevant

on-line help on Eve commands (ignore references to keypad keys in the Indys) help not relevant

open another process in the Vax (useful to find file names you forgot and want to include; finish the process by typing logout and you will be back editing) spawn not relevant

center text in one line center at the line

Feature/function	What to type	Where should the cursor be before you enter a keyword
reformat a paragraph (after cut and paste, otherwise is automatic)	Fill	at any line in the paragraph
Include a file saved previously in document you are editing	Include file fname (where 'fname' is a name of a Vax file you want to include in the present document)	where you want the file inserted
checking spelling of your document	spell	not relevant
on-line help on Eve commands (ignore references to keypad keys in the Indys)	help	not relevant
open another process in the Vax (useful to find file names you forgot and want to include; finish the process by typing logout and you will be back editing)	spawn	not relevant
center text in one line	center	at the line

How was the above table created?

Use the paired tag <TABLE> ... </TABLE> to envelop your table. All other markups, should be within this basic pair. Include the word BORDER in the first tag to generate the borders you see in the above example, e.g. <TABLE BORDER>.
Use the paired tag <TR> ... </TR> to envelop each line. That is, before defining a cell-entry in a row, use the tag <TR>.
Use the paired tag <TD> ... </TD> to envelop each cell-entry.

This other example shows you how it all works:

A B C

D E F
```
<TABLE BORDER>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD>
	</TR>
	<TR>
		<TD>D</TD> <TD>E</TD> <TD>F</TD>
	</TR>
</TABLE>
```
This page is maintained by Al Bento who can be reached at abento@ubalt.edu. This page was last updated on May 16, 2007. Although we will attempt to keep this information accurate, we can not guarantee the accuracy of the information provided.