Home > Articles > Web Services > XML

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

Controlling Table Style

In certain instances, such as when information must be accessible through a visible grid system, WebReview.com uses tables for the display of information. In these instances, the requirements for detailed style become necessary. For example, embedded style is an excellent style method choice when you have only a few pages that require the particular style applied to them.

Figure 3.4 Use specialty tables, such as these on WebReview.com, when you need detailed style.

To embed a style sheet, follow these steps:

  1. Open an HTML or XHTML document. You can use master_document.html if you like.

  2. In the head portion of the document, insert the opening and closing style tags:

    <style type="text/css">
    
    </style>
  3. Insert the style rules:

    td.bighead { 
    vertical-align: top; 
    background-color: #666699; 
    font-family: verdana, helvetica, arial, sans-serif; 
    font-size: 1em; 
    color: #FFFFFF; 
    }
    td.head { 
    border-color: #333366; 
    border-style: solid; 
    vertical-align: top; 
    background-color: #666699; 
    font-family: verdana, helvetica, arial, sans-serif; 
    font-size: .8em; 
    color: #FFFFFF; 
    }
    
    td.side { 
    border-color: #333366; 
    border-style: solid; 
    vertical-align: top; 
    text-align: center; 
    background-color: #DDDDF0; 
    font-family: verdana, helvetica, arial, sans-serif; 
    font-size: .8em; 
    color: #000000; 
    }
    
    td.yes { 
    vertical-align: top; 
    background-color: #ff9900; 
    font-family: verdana, helvetica, arial, sans-serif; 
    font-size: .8em; 
    color: #000000; 
    }
    
    td.no { 
    vertical-align: top; 
    background-color: #ffffcc; 
    font-family: verdana, helvetica, arial, sans-serif; 
    font-size: .8em; 
    color: #000000; 
    }
    
    td.part { 
    vertical-align: top; 
    background-color: #ffcc33; 
    font-family: verdana, helvetica, arial, sans-serif; 
    font-size: .8em; 
    color: #000000; 
    }
    
    td.cont { 
    border-color: #333366; 
    border-style: solid; 
    vertical-align: top; 
    background-color: #ffffff; 
    font-family: verdana, helvetica, arial, sans-serif;
    font-size: .8em; 
    color: #000000; 
    }		

    Note how this sample controls table style. You can have as many style rules as you like. Just be sure not to overburden the document. It's helpful to create a consistent formatting style for your Cascading Style Sheets (CSS). Other techniques, such as grouping (which is discussed in Chapter 1 "About Web Markup: XML, HTML, XHTML," can also be used to streamline your documents.

    TIP

    If the style rules become too long, you might consider creating an external style sheet.

  • + Share This
  • 🔖 Save To Your Account