Tables in HTML

Tables are one of the most common elements that you see on a web page that are used to organize and display data. Using a table, the data can be represented as rows and columns with suitable heading for each. It quite easy to create a table for your web page as it requires the understanding of only a few tags. So, in this post  lets see how to create a table in html.
The basic structure of an HTML table consists of the following tags:

• Table Tag : <table> </table>
• Row Tag : <tr> </tr>
• Cell Tag : <td> </td> or <th> </th>

Creating an HTML table consists of defining the table between the table tags, <TABLE> and </TABLE>. Between these tags, you then construct each row and each cell in the row. To do this, you would first start the row with the beginning row tag, <TR>, and then build the row by creating each cell with the beginning cell tag, <TD>, adding the data for that cell, and then closing the cell with the ending cell tag, </TD>. When you finish all of the cells for a row, you would then close the row with the ending row tag, </TR>.Then, for each new row, you would repeat the process of beginning the row, building each cell in the row, and closing the row.

Now lets see an example. The structure of a table and the code required to create such a table is given below.

<table border="1">
<tr><td>Row1Col1</td><td>Row1Col2</td><td>Row1Col3</td></tr>
<tr><td>Row2Col1</td><td>Row2Col2</td><td>Row2Col3</td></tr>
<tr><td>Row3Col1</td><td>Row3Col2</td><td>Row3Col3</td></tr>
</table>

The border = "1" defines the thickness of the border. It can be set to 0 if no border is required. Instead of <td> </td> tags, you may use a <th> </th> tags to define a heading. This will case the text to be appeared as bold.


To give your table a more structured look, you can include parameters that will adjust the size of your table, add space in the cell, add space between rows, and align the data in a cell. Working with these parameters is basically a process of trial and error to create the most appealing presentation of your information. The type of table that you create and the overall design of your web site will help you determine what works best for your table.

Some of the parameters that enable you to customize your table are:

• The WIDTH=n% command sets the width of your table as a percentage of the screen. The letter n designates the percentage that you assign to this command.  For example, if you want the width of your table to be one half the width of the screen, you would include the WIDTH="50%" parameter in the beginning table tag.
• The CELLPADDING=n parameter adjusts the vertical dimension of the cells. The letter n designates the numerical value that you assign.
• The CELLSPACING=n sets the space or border around the cells. The letter n designates the numerical value that you assign to this command.
• The ALIGN=(LEFT, RIGHT, or CENTER) command will horizontally align the data in a cell.  For example, if you wish to place the data in the center of each cell in a row, you would include the ALIGN=CENTER command within the row tag. 
• The VALIGN=(TOP, MIDDLE, or BOTTOM) command will vertically align the data in a cell.  For example, if you wish to place the data in the center of each cell in a row, you would include the ALIGN=MIDDLE command within the row tag.

These are the basic information you need to know to get moving. Now you may also refer a bit of CSS to make your tables more appealing. Experiment with the parameters till you get the perfect design that matches your page. Now its time for your creativity to take command.