Table width 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
        {
        border:       2px red solid;
        }

            <table id="sample">  
              <tr>  
                <th style="width:30%">   Heading 1   </th>  
                <th>   Heading 2   </th>  
              </tr>  
              <tr>  
                <td>   Datum 1   </td>  
                <td>   Datum 2   </td>  
              </tr>  
            </table>  

• The heading cell text is centered and bold face
• The datum cell text is left aligned
• The table is 60% of the available width
• The first cell is 30% of the table width
• Only the first cell is specified, the second cell gets the rest of the space.
• Only the cells in the first row are specified, the other rows will match the first row.
• The style selector  table#sample
  means the  table element with the id  sample.
• The style selector  table#sample th, table#sample td
  means the  th  and  td  elements within that table.
• In style selectors:
  # means with the id
  comma(,) means and
  space between two elements means select the second element type when it is within the first element type.