HTML Table tutorials

Tutorials and tips

Table's

Many web developers avoid using table's becouse thei increase the number of codes in the HTMl document and that does not help spy bots searching the content of your web site. Table's are very useful for displaying a pricing list or any other similar schedule. Now lets see how the structure of a table looks.


<table border="1" cellpadding="0" cellspacing="0" width="120" align="center">
 <tr>
  <td>content goes here</td>
 </tr>
</table>

How this code structure would look in a HTML document?

content goes here

This is a one cell table. Tables can have more cells in rows or columns, on the second example will will try to add a column to the table.


<table border="1" cellpadding="0" cellspacing="0" width="120" align="center">
 <tr>
  <td>content one</td>
  <td>content two</td>
 </tr>
</table>

content one content two

This is how a two column table looks. We have set the width to 120 just to keep the table smaller you can remove the width and the align or change it any time. Lets now see how can we add a row and how will the table look.


<table border="1" cellpadding="0" cellspacing="0" width="120" align="center">
 <tr>
  <td>content one</td>
  <td>content two</td>
 </tr>
 <tr>
  <td>content one second </td>
  <td>content two second </td>
 </tr>
</table>

content one content two
content one second content two second

There, now we know how to create a table with more cells, create rows and columns. We can any time remove the border and not see it all we have to do is set the border="0" , can also give colors to the border, change the background color, the font and the rest with help of CSS (Cascade Style Sheet).


How to make table's more accessible for search engines?

Lets say we have a pricing list that we would want to be more accessible for the search engines and use this table as a possible keyword catcher. The summery rule helps spybots to explain what the table stands for and won't be visible to the visitors, lets see how that will look.

<table border="1" cellpadding="0" cellspacing="0" width="120" align="center" summary="Price list for our products">
 <tr>
  <td>content one</td>
  <td>content two</td>
 </tr>
 <tr>
  <td>content one second </td>
  <td>content two second </td>
 </tr>
</table>