Table caption sample

These are html tags you type.


Within the style container in the head,
or within a separate style sheet file:
      table#first
        {
        width:   50%;
        border:  6px solid blue;
        margin-left: auto;
        margin-right: auto;
        }
      table#first caption
        {
        caption-side: bottom; 
        text-align: left;
        }
      th 
        {
        border: 2px solid red;
        }
      td 
        {
        border: 2px solid green;
        }

In the body:
            <table id="first">  
              <caption>
                Small stuff 
              </caption>  
              <tr>  
                <th>   Heading 1   </th>  
                <th>   Heading 2   </th>  
              </tr>  
              <tr>  
                <td>   Datum 1   </td>  
                <td>   Datum 2   </td>  
              </tr>  
            </table>  

NOTE: The caption should be the first thing in the table.

This is the resulting web page content:


Small stuff
Heading 1 Heading 2
Datum 1 Datum 2

Without specifying the caption location, these are html tags you type.


Within the style container in the head,
or within a separate style sheet file:
      table#second
        {
        width:   50%;
        border:  6px solid blue;
        margin-left: auto;
        margin-right: auto;
        }
      th 
        {
        border: 2px solid red;
        }
      td 
        {
        border: 2px solid green;
        }

In the body:
            <table id="second">  
              <caption>
                Small stuff 
              </caption>  
              <tr>  
                <th>   Heading 1   </th>  
                <th>   Heading 2   </th>  
              </tr>  
              <tr>  
                <td>   Datum 1   </td>  
                <td>   Datum 2   </td>  
              </tr>  
            </table>  

NOTE: The default locastion for the caption that I saw was at the top center. Do not be supprised if you see a different default. Historically, support for caption has not been very consistent.

This is the resulting web page content:


Small stuff
Heading 1 Heading 2
Datum 1 Datum 2