The Fear of Codes

Your browser (Internet Explorer 6) is out of date. It has known security flaws and may not display all features of this and other websites. Learn how to update your browser.

Tables

If you have created a website 10 years ago, you would have remembered using Tables to create the layouts for your page. However, you must remember that tables should only be used for its intended intention: to represent tabular datas (like Excel). It should never be used for making your page layouts.

A table normally will have a table row (tr), table heading (th) and table datas (td). I am just going to show this in a Live Preview format as it is easier to explain that way.

Below is the standard table template. Try messing with the codes and play with the rowspan and colspan values and see what happen.

<table>

  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</th>
    <th>Heading 4</th>
  </tr>

  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
    <td rowspan="2">Data 4 (2 Rows)</td>
  </tr>

  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>

  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
    <td>Data 4</td>
  </tr>

  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td colspan="2">Data 3(2 Columns)</td>
  </tr>

</table>

No Comments

Leave a comment (cancel)

guides and tools

Tables