CodeHelp - glossary T

HTML4 discourages the use of tables for large scale text alignment and whole page layouts, preferring stylesheets, as used in CodeHelp. There are good reasons for this:

• Large layout tables halt the page. Most browsers will not display anything within (or sometimes after) a table until all the content, including images, has been downloaded. If you use tables to create columns extending most of the height of the page, this means that the user is faced with a blank screen for a long period. Some visitors will go elsewhere, thinking your site is down. This is the best single reason to switch to a stylesheet that defines the columns using classes and <div> tags. Data tables no longer suffer from these delays because the column width should be defined in the colgroup tags and non-standard rows or columns are easily rendered using rowspan and colspan. The table then loads rows incrementally and the visitor gets to see the data as it is received.
• Tables can be awkward to predict. Any table suffers from the lack of control over the actual screen area available. Tables with text content need careful control to stop a change in text size or style changing the entire look of the table. The only way to check this is to test your table on all platforms and although you can test on a variety of browsers, it's not easy to test on different platforms. Use stylesheets either to control the text within the table or use <div>, <span> and absolute positioning to remove the need for a table at all.
• Tables and forms don't mix. Form elements are particularly liable to changes between platforms, the size of each input can change markedly and this causes problems when you want to enclose the form in part of a table. Different browsers on different platforms can destroy your carefully planned form. If you want to enclose your form in a customised graphic, use stylesheets to place the graphic behind the form. The browser will then automatically adjust your graphic to fill the area used by the form, no matter what size the inputs become.

A simple table example:

This code generates the following table. (The border has been turned on to illustrate the rows, columns and cells.

Note that the end tags are nested - the next tag is completely contained within the one above:

• Open table
  • Open tr (table row)
    • Open td (declaration)
    • Close td
  • Close tr
• Close table

If any of these tags are not nested correctly, the table may fail to display. Note that Internet Explorer can be too tolerant (i.e. it fails to enforce the standards as well as other browsers), so test in a different browsers.

Table tag attributes are mostly deprecated. Use CSS instead.
Top

Targets the window or frame to load the requested document. The frame needs to be specified by the name given in the frame tag within the frameset page. Windows can be specified by predefined names: _blank, _self, _parent, and _top. Use _top to replace the frameset itself. See <base>.
Top

Only partially supported, but with the capability of decreasing the time needed to display the table and scroll parts of the table independently of the head and foot. Use tbody to define a row or group of rows as the body of the table, in a similar way to the body tag itself. The end tag </tbody> is optional. tbody must contain at least one row - <tr> </tr> tags. Other row group tags are thead and tfoot. Originally designed for Internet Explorer but now part of HTML4.
Top

Table Data. Defines each cell, which can contain any content, including another table. The end tag is required by HTML4. Commonly used attributes include colspan and rowspan. Height and width are deprecated, use colgroup and col instead. Colspan dictates the number of columns that the cell should occupy. Rowspan dictates a cell that spans more than one row.

Note that the align attribute is now deprecated in HTML4 in favour of style sheets. In fact, style sheets and absolute / relative positioning are much more flexible ways of achieving a complex page layout. Tables are dynamically resized both by the browser and by the content and this can cause problems with forms and other content of fixed size. Style sheets can create a fixed size area for the content with increased flexibility by allowing any section to be visible or invisible or to allow real-time movement of elements within areas or even tables.
Top

• Text Overflow
• Text Indentation
• Font control
• Text-align - left, right, justify and center. The default style is text-align:left which leaves a ragged edge to the right side of the paragraph. Nevertheless, text-align:left is useful when you want to put a list or a series of short title lines in a paragraph that uses justification, as some browsers may pad the short lines with spaces if the rest of the paragraph uses text-align:justify unless text-align:left is used, often as a span enclosing those lines.
  text-align:right puts text up against the right margin. The left side of the paragraph now appears ragged.
  text-align:justify aligns both margins and pads the text with spaces to make up for varying line lengths. Justify is familiar from newspaper columns and generally makes for easier reading with larger amounts of text.
  text-align:center - the replacement for the
  deprecated <center> tag
• Text transformation - CSS Transform user-input into a suitable case mix: capitalize, force lowercase, force uppercase.
  Examples:
  Transform user-input into a suitable case mix: capitalize, force lowercase, force uppercase.
  Transform user-input into a suitable case mix: capitalize, force lowercase, force uppercase.
  Transform user-input into a suitable case mix: capitalize, force lowercase, force uppercase.
  
• Text decoration - CSS Values include none, underline, overline (not Netscape4), line-through and
  blink
  (which tends to annoy people so much that many browsers simply don't implement it!).
• Leading or line-height - CSS Use to add white space to a block of text.
  The previous line uses a line-height of 200%. Note that in this example, Netscape4 adds the white space above the line and Netscape6 centers the text within the enlarged white space.
  style="line-height:200%"
  
• Word and letter spacing - CSS Word-spacing adds space between words and letter spacing between letters. Use fixed or relative lengths. Not fully supported by Netscape4.5
• Superscripts and subscripts - CSS Use vertical-align in the style definition to set a subscript or superscript, again support for these properties in Netscape4 is incomplete. Style sheets can therefore be used for chemical formulae like H2O. By pre-defining a subscript class and making the font size of the subscript smaller than the ´parent´ text, you can make the formulae more like standard texts:
  <span style = "vertical-align:sub; font-size:x-small;">
  C6H6 (benzene).
  for comparison, this is the same formula without subscripts, just using font-size:x-small for the digits:
  C6H6
  Which method you use depends on the overall needs of the document - to retain control over the text flow and line spacing, use font-size alone. For accurate depiction, perhaps in a paragraph of it's own in a text describing the formula in detail, use font-size with vertical-align:sub. You can then use font-size and superscripts 1 for references.
  <span style="vertical-align:super;font-size:x-small;">1</span>

• Properties
  Javascript can manipulate the text that appears in a text input using:
  document.formname.textname.value = "new text";
var value = document.formname.textname.value;
• Methods
  No additional or over-ridden methods.
• Event Handlers
  To extend the function of a changed text input, use:
  <input type="text" name="ID" onchange="my_textfunc();">

Top

• Properties
  Javascript can manipulate the text that appears in a textarea input using:
  document.formname.textname.value = "new text";
var value = document.formname.textname.value;
• Methods
  No additional or over-ridden methods.
• Event Handlers
  To extend the function of a changed textarea, use:
  <textarea name="ID" onchange="my_textfunc();">
</textarea>

Top

Table header cell. Commonly used as a single cell at the top of the table containing the title for each column. (Use caption for the heading of the entire table). Each cell is generally displayed with content in bold and centered within the cell.
Top

Always make the title of each page relevant to the content of that page as most search engines use the content of the <title> </title> tag as the main description of the page when presenting the results of the search. The tag must be part of the head section.
Top

The only elements which cannot be given a title are <base>, <basefont>, <head>, <html>, <meta>, <param>, <script> and <title>. The content of the title attribute is used in a similar way to the alt text of images and may be useful to non-visual browsers. Use the title attribute to add extra descriptive text to image links, text links, buttons, tables, div and span areas, even selected paragraphs. Netscape4 does not fully support the title attribute.
Top

In style sheets, the top attribute is used to represent the height of the top of the element, counting from the top of the window downwards.
For information on using _top see target.
Top

Table row. Contains no content except <td> </td> tags. The end tag is required.
Top

Example of typewriter text. Might not display in Netscape if stylesheets are in use unless defined as monospace font-family in a style sheet.
Top

Use to declare the mime type of the element. Can be used with <a> and is required for <script> and <style>.
Also used with input tags in forms.
Top