table cell alignment : td align « Tags « HTML / CSS






table cell alignment

     

<?xml version"1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Adding Text Alignmnet</title>
    <style type="text/css">
      td {border:1px solid black;}
      table {border:1px solid black;}
      td.number{text-align: right;color: blue;}
      td.text{text-align: left;}
    </style>
  </head>
  <body>
    <table summary="This table">
      <caption>Our Pizza Selections</caption>
      <thead>
        <tr>
          <th scope="col">Pizza Type</th>
          <th scope="col">Small</th>
          <th scope="col">Medium</th>
          <th scope="col">Large</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="text" scope="row">Thin Crust</td>
          <td class="number">3.99</td>
          <td class="number">4.99</td>
          <td class="number">6.99</td>
        </tr>
        <tr>
          <td class="text" scope="row">Deep Dish</td>
          <td class="number">4.99</td>
          <td class="number">6.99</td>
          <td class="number">8.99</td>
        </tr>
        <tr>
          <td class="text" scope="row">Stuffed Crust</td>
          <td class="number">5.99</td>
          <td class="number">7.99</td>
          <td class="number">9.99</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

   
    
    
    
  








Related examples in the same category

1.Table cell background and align, indent
2.Vertically aligned to the top of the cell
3.vertically aligned to the middle of the cell
4.vertically aligned to the bottom of the cell
5.Table cell vertical-align: baseline
6.Table cell with vertical-align: top
7.Table cell with vertical-align: baseline
8.table cells with vertical alignment
9.td vertical-align: baseline;
10.td vertical-align: top;
11.td vertical-align: middle;
12.td vertical-align: bottom;