HTML Table Example

If you not learn <table> tag, you should first Learn HTML Table Tutorial.

Basic Table

<html>
<head>
</head>
<body>
  <table border="1" style="background-color:#FFFFFF; width:100%; height:80px;">
    <tr>
      <td>Table Cell 1</td>
      <td>Table Cell 2</td>
    </tr>
    <tr>
      <td>Table Cell 3</td>
      <td>Table Cell 4</td>
    </tr>
  </table>
</body>
</html>
Table Cell 1 Table Cell 2
Table Cell 3 Table Cell 4

Table with Header

<html>
<head>
</head>
<body>
  <table border="1" style="background-color:#FFFFFF; width:100%; height:80px;">
    <tr>
      <th>Table Header</th>
      <th>Table Header</th>
    </tr>
    <tr>
      <td>Table Cell 1</td>
      <td>Table Cell 2</td>
    </tr>
  </table>
</body>
</html>
Table Header Table Header
Table Cell 1 Table Cell 2

Table Header colspan

<html>
<head>
</head>
<body>
  <table border="1" style="background-color:#FFFFFF; width:100%; height:80px;">
    <tr>
      <th colspan="2" style="text-align: center;">Table Header</th>
    </tr>
    <tr>
      <td>Table Cell 1</td>
      <td>Table Cell 2</td>
    </tr>
  </table>
</body>
</html>
Table Header
Table Cell 1 Table Cell 2

Table Header rowspan

<html>
<head>
</head>
<body>
  <table border="1" style="background-color:#FFFFFF; width:100%; height:auto;">
    <tr>
      <th rowspan="2" style="text-align: center;">Table Header</th>
      <td>Table Cell 1</td>
    </tr>
    <tr>
      <td>Table Cell 2</td>
    </tr>
  </table>
</body>
</html>
Table Header Table Cell 1
Table Cell 2

Table Width Change

<html>
<head>
</head>
<body>
  <table border="1" style="background-color:#FFFFFF; width:100%; height:80px;">
    <tr>
      <th colspan="2" style="text-align: center;">Table Header</th>
    </tr>
    <tr>
      <td width="40%">Table Cell 1 (width=40%)</td>
      <td>Table Cell 2 (width=60%)</td>
    </tr>
    <tr>
      <td width="40%">Table Cell 3 (width=40%)</td>
      <td>Table Cell 4 (width=60%)</td>
    </tr>
  </table>
</body>
</html>
Table Header
Table Cell 1 (width=40%) Table Cell 2 (width=60%)
Table Cell 3 (width=40%) Table Cell 4 (width=60%)