Pages

Friday, January 21, 2011

Table Element

The table element is used to create the beginning and end of the table. Tables used to be the most flexible layout systems available to web-designers, until we were gifted with the expanded possibilities of CSS layout. A simple HTML table consists of the table element and one or more table row, table header, and table data elements.

Listed below are the most common attributes you can use for the table element:
  • align - sets the horizontal alignment of the element inside the web browser, such as left, right, and center.
  • background - provides the Uniform Resource Locator (URL) of an image file to be used as the table's background.
  • bgcolor - sets the color value or predefined color names of the table's background.
  • border - sets the width in pixels (px) of the table's border.
  • bordercolor - sets the color value or predefined color name of the table's borer.
  • cellpadding - sets the number of space between cell walls and its content. The possible values are in pixels (px) or as a percent (%)
  • cellspacing - sets the number of space in pixels (px) or as a percent (%) between cells.
  • class - provides the class or classes of the heading. This attribute is used to identify the name of the style class or classes to be used for rendering.
  • height - sets the height in pixels (px) of the table.
  • id - provides a unique name for the heading.
  • lang - provides the language in which the enclosed content is coded.
  • style - provides a cascading style sheet (CSS) properties to the heading.
  • title - privides a text title for the heading. Most web browser displays the value of the title as "tooltip".
  • width - sets the width in pixels (px) of the table.

Here's an example on how to use the table <table> element:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
         <meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
         <mate name="keywords" content="blog, web development" />
         <title>the TABLE element</title>
     </head>

     <body>
       <h1>
         the TABLE element
       </h1>
       <table border="1">
            <tr>
               <td>First Row, First Column</td>
               <td>First Row, Second Column</td>
               <td>First Row, Third Column</td>
            </tr>
            <tr>
                <td>Second Row, First Column</td>
                <td>Second Row, Second Column</td>
                <td>Seconf Row, Third Column</td>
            </tr>
        </table>
    </body>
</html>

0 comments:

Post a Comment