Understanding - HTML table styles

Understanding HTML table styles

Topic status automatically displays here - do not remove.

Add me to your favorites!Bookmark this topic  Print me!Print this topic

This topic explores the ins-and-outs of HTML table styles as defined by the W3C CSS 2 and HTML 4 standards, and demonstrates how a seemingly small difference in style properties or location can make a dramatic difference in the way tables display within HTML topics.

Note Note

The basic structure of an HTML table is described in Jump across to separate topic Understanding HTML Tables.

Back to Top

Table Styles:

The following table is a listing of all CSS2 table styles 

HTML Parameter Values Default CSS Description
<TABLE> align "left" or
"right" or
"center" 		"left" align:left;
align:right;
align:center; 		Aligns the table within the text flow of the document
  background (URL) (empty string) background:(URL); Specifies the URL of the image to be tiled in the background layer of the table. See Table Layers.
  bgcolor (#RRGGBB or colour name) (empty string) background-color:(#RRGGBB or colour name); Specifies the colour of the background layer of the table. See Table Layers.
  border (pixel width) 1 border:(pixelwidth); Specifies the line width in pixels for the table's outer border.
Set to zero (0) to hide the table border completely.
  summary (text string) (empty string) (na) A text summary of the table's purpose and structure for user-agents rendering to non-visual media such as speech and/or Braille.
  width (length) (If no parameter declared, width is as determined by the user agent.
If parameter declared with no value given, width is 100%.
If parameter and value are declared with no unit, width is in pixels.) 		width:(length)px|%; Specifies the desired width of the entire table for visual user-agents.

 

Back to Top

Examples

Here is the HTML for a simple table consisting of a single-cell in a single-row: 

<TABLE> <TR> <TD>
      Row 1 Cell 1
    </TD> </TR> </TABLE>

Here's how that table displays:

Row 1 Cell 1

 

Back to Top

CSS order of preference

The CSS order of precedence for the presentation of HTML is:

  1. Inline styles
  2. Style sheet rules
  3. Attributes on HTML tags
  4. Intrinsic definition of the HTML tag

Explain what this means!

 

Back to Top

See Also

xyz Lotech Solutions' Tips, Tricks, and Procedures

Back to Top