Table alighment samples

These are html tags you type.


Within the style container in the head,
or within a separate style sheet file:
      table.sample
        {
        width:        60%;
        border:       8px green solid;
        margin-left:  auto;
        margin-right: auto;
        }
      table.sample th, table.sample td
        {
        height:       70px;
        border:       2px red solid;
        }

Within the body:

            <table class="sample">  
              <caption> Default alignment  </caption> 
              <tr>  
                <th width="40%">   Heading 1   </th>  
                <th>   Heading 2   </th>  
              </tr>  
              <tr>  
                <td>   Datum 1   </td>  
                <td>   Datum 2   </td>  
              </tr>  
            </table> 
 
            <table class="sample"> 
              <caption> Various alignments  </caption> 
              <tr> 
                <th width="40%" style="text-align: left; vertical-align: top;">  
                  Heading 1 
                </th> 
                <th style="text-align: right; vertical-align: bottom;">  
                  Heading 2
                </th> 
              </tr> 
              <tr> 
                <td style="text-align: center; vertical-align: middle;">  
                  Datum 1 
                </td> 
                <td>  Datum 2   </td> 
              </tr> 
            </table> 

NOTE:
  • The heading cell text defaults to centered and bold face
  • The datum cell text defaults to left aligned
  • Vertical alignment defaults to middle
  • Remember, a style attribute value must be typed within one line.

This is the resulting web page content:


Default alignment
Heading 1 Heading 2
Datum 1 Datum 2


Various alignments
Heading 1 Heading 2
Datum 1 Datum 2