<!DOCTYPE HTML>

<html>

<head>
  <title>Page with Table</title>
  <style type="text/css">
  /* This code forces tables to have simple borders */
  table {
    border-collapse: collapse;
  }
  /* This code defines border style for cells */  
  td {
    border: 2px solid DimGray;
  }  
  </style>
</head>

<body>

<h1>Page with Tables</h1>

<p>This sample page demonstrates HTML tables. First table
is 300 pixels wide.</p>

<table style="width: 300px">
  <tr>
    <td><b>Title 1</b></td>
    <td><b>Title 2</b></td>
    <td><b>Title 3</b></td>
  </tr>
  <tr>
    <td>Cell 1.1</td>
    <td>Cell 1.2</td>
    <td>Cell 1.3</td>
  </tr>
  <tr>
    <td>Cell 2.1</td>
    <td>Cell 2.2</td>
    <td>Cell 2.3</td>
  </tr>
</table>

<p>Following table is variable width, which means it sizes together with
browser window. Table width is 60% of browser window width.</p>

<table style="width: 60%">
  <tr>
    <td><b>Title 1</b></td>
    <td><b>Title 2</b></td>
    <td><b>Title 3</b></td>
  </tr>
  <tr>
    <td>Cell 1.1</td>
    <td>Cell 1.2</td>
    <td>Cell 1.3</td>
  </tr>
  <tr>
    <td>Cell 2.1</td>
    <td>Cell 2.2</td>
    <td>Cell 2.3</td>
  </tr>
</table>

<p>The third table is 300 pixels wide and has two columns
of different sizes. First column is 100 pixels wide and
the second takes other 200 pixels of the table width.</p>

<table  style="width: 300px">
  <tr>
    <td style="width: 100px"><b>Title 1</b></td>
    <td style="width: 200px"><b>Title 2</b></td>
  </tr>
  <tr>
    <td style="width: 100px">Cell 1.1</td>
    <td style="width: 200px">Cell 1.2</td>
  </tr>
  <tr>
    <td style="width: 100px">Cell 2.1</td>
    <td style="width: 200px">Cell 2.2</td>
  </tr>
</table>

</body>

</html>
