Table Cell Dimensions

Fixed Dimensions

By using the width and height properties you can fix the width and height of cells at specific pixel dimensions.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
  <title>A Basic Table</title>
  <style type="text/css">
<!-- 
   table { background: #ddddff; width: 300px; }
   caption { font-style: italic; }
   th  { background: #ffdddd; padding: 1em; height: 100px; }
   td  { background: #ddffdd; padding: .5em; height: 50px;}
-->
  </style>
</head>
<body>
  <table summary="Basic Table">
    <caption>
      A Basic Table
    </caption>
    <tr>
      <th>Name</th>
      <th>Position</th>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Analyst</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Technician</td>
    </tr>
  </table>
</body>
</html>

How It Displays

A Basic Table
Name Position
Mary Analyst
John Technician

Relative Dimensions

A simpler method is to set the overall width of the table as a relative percent of the available space (usually the width of the browser window) and let the table automatically format itself.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
  <title>A Basic Table</title>
  <style type="text/css">
<!-- 
   table { background: #ddddff; width: 100%; }
   caption { font-style: italic; }
   th  { background: #ffdddd; padding: 1em; width: 40%; }
   td  { background: #ddffdd; padding: .5em; width: 60%;}
-->
  </style>
</head>
<body>
  <table summary="Basic Table">
    <caption>
      A Basic Table
    </caption>
    <tr>
      <th>Name</th>
      <th>Position</th>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Analyst</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Technician</td>
    </tr>
  </table>
</body>
</html>

How It Displays

A Basic Table
Name Position
Mary Analyst
John Technician

Resources

From the W3Schools HTML 4.01/XHTML 1.0 Reference: