Pages

Thursday, January 27, 2011

Caption Element

The caption element is used to provide a title to a table. Ta caption element is recommended to be placed after the table element. This caption element can either appear above or below the table. It does not go inside a table row, table data or table header element.


Listed below are the most common attributes you can use for the caption element:
  • align - sets the horizontal alignment of the table cell's content ,such as left,right,center and justify.
  • class - provides class or classes of the element.This attribute is used to identify the name of the style class or classes to be used for rendering.
  • id - provides a unique name for the element.
  • lang - provides the languages in which the enclosed content is coded. 
  • style - provides a cascading style sheet (CSS) properties to the element.
  • title - provide a text title for the element .Most web browser displays the value of the title as a "tooltip".

Here's an example on how to use the caption <caption> 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 CAPTION element</title>
     </head>

     <body>
       <h1>
         the CAPTION element
       </h1>
       <table border="1">
            <caption>Behind Asia's Deals: Bank revenue rankings, Global</caption>
            <tr>
                <th scope="col">Bank</th>
                <th scope="col">Revenue, in millions</th>
                <th scope="col">Market share</th>
            </tr>
            <tr>
                <td scope="row">UBS</td>
                <td>$493</td>
                <td>6.5%</td>
            </tr>
            <tr>
                <td scope="row">Credit Suisse</td>
                <td>$442</td>
                <td>5.8%</td>
            </tr>
            <tr>
                <td scope="row">JP Morgan</td>
                <td>$428</td>
                <td>5.6%</td>
            </tr>
      </table>
   </body>
</html>

0 comments:

Post a Comment