PHP & HTML Tutorial site

In more traditional websites tables were used to layout the entire website. This method of using tables has now been replaced with CSS, even though CSS is very powerful there are some things you will want to use tables for.

Lets have a quick look and see what the code for a standard table will look like.

<table border="1">
  <tr>
    <td>
      First Table cell
    </td>
    <td>
      Second Table cell
    </td>
  </tr>
  <tr>
    <td>
      2nd Row, First Table cell
    </td>
    <td>
      2nd Row, Second Table cell
    </td>
  </tr>
</table>

The Code above will produce the table below:

First Table cell	Second Table cell
2nd Row, First Table cell	2nd Row, Second Table cell

Now there is quite a bit here lets take a look at our tags:

<table>: The begining of our table, within this tag we can set a few variables such as border, cellspacing and cellpadding, in this example we have set the border to a width of 1 pixel.

<tr>: This tag is used to mark the begining of a row.

<td>: Begining of a table cell, traditionally our content that we wish to display will go after this tag before the end of the cell.

</td>: End our cell.

</tr>: End of our Row.

</table>: And finally the end of our table.

There are a few more things you can do with tables, what if you wish for part of your content to span accross your table? well we can use a colspan value, as demonstrated below:

<table border="1">
  <tr>
    <td colspan="2">
      First Table cell
    </td>
  </tr>
  <tr>
    <td>
      2nd Row, First Table cell
    </td>
    <td>
      2nd Row, Second Table cell
    </td>
  </tr>
</table>

The above code will give us the following result:

First Table cell
2nd Row, First Table cell	2nd Row, Second Table cell

The colspan attribute tells your browser that the cell should span by a specified amount, the easiest way to think of this is to think of the “merge cell” feature in Microsoft Excel. There are a few other tags you can use with tables i will very quickly go over them here:

<th> & </th>: These tags are used in place of the <td> & </td> tags, and denote a Table Header.

we also have the use of <thead>, <tbody> and <tfoot>, these tags are used after <table> but before <tr>, each marks what content should go where, top of the table, main content or the foot of the table, each tag has its corresponding end tag </thead>, </tbody> and </tfoot>.