Home Logo
Show Full Menu
Hide Full Menu
 

Understanding tables

Created: 16/09/10 Views: 1285 myFave Image

In this tutorial we will learn how to create tables in our web page.
Using tables in a web page can be a great way to layout data or generally layout the web page. The uses for tables are almost endless, you don't have to use the table as a conventional table.
Include a table however is relatively easy, it requires these main tags, <table></table>, <tr></tr>, <th></th> and <td></td>.

Here is an example of a basic table [coding]
  • <table>
  • <tr>
  • <td>Paper</td>
  • <td>9</td>
  • </tr>
  • <tr>
  • <td>Pens</td>
  • <td>11</td>
  • </tr>
  • <tr>
  • <td>Ruler</td>
  • <td>3</td>
  • </tr>
  • <tr>
  • <td>Sharpener</td>
  • <td>6</td>
  • </tr>
  • </table>

Here is an example of a basic table
    Paper 9
    Pens 11
    Ruler 3
    Sharpener 6


As you can currently see, this table looks pretty plain and useless. So we will now introduce some attributes into this tutorial.
<table> <th> and <td>
Here is an example of a styled table [coding]
  • <table width="217" border="2" cellspacing="0" cellpadding="3">
  • <tr>
  • <th width="95" align="center" valign="top">Object</th>
  • <th width="104" align="center" valign="top">Amount</th>
  • </tr>
  • <tr>
  • <td width="95" align="left" valign="top">Paper</td>
  • <td width="104" align="center" valign="top">9</td>
  • </tr>
  • <tr>
  • <td align="left" valign="top">Pens</td>
  • <td align="center" valign="top">11</td>
  • </tr>
  • <tr>
  • <td align="left" valign="top">Ruler</td>
  • <td align="center" valign="top">3</td>
  • </tr>
  • <tr>
  • <td align="left" valign="top">Sharpener</td>
  • <td align="center" valign="top">6</td>
  • </tr>
  • </table>

Here is the example of a styled table
  • Object Amount
    Paper 9
    Pens 11
    Ruler 3
    Sharpener 6

Of course this is only basic styling, to create a fully styled table you can use the style attribute and its properties to customize completely.


next tutorial: Understanding lists

There are no comments