Tables are most useful components that can be used to display the data in rows and columns. Ofter we use the tables to position the text in the proper alignment. You can display the border along with the text or simply the text. You can color each cell in different color, you can color background of each cell etc. All these can be possible with the use of table, tr and td tags. These tags refer Table, Table Row and Table Column respectively. See the example below.

<table>
    <tr>
        <td>This is the first cell of first row.</td>
        <td>This is the second cell of the first row.</td>
    <tr>
    <tr>
        <td>This is the first cell of second row.</td>
        <td>This is the second cell of the second row.</td>
    <tr>
</table>

The output of the above code will be as follows:

<table border="1" style="background-color: #f5f5dc">
  <tr>
    <td>This is the first cell of first row.</td>
    <td>This is the second cell of the first row.</td>
  <tr>
  <tr>
    <td>This is the first cell of second row.</td>
    <td>This is the second cell of the second row.</td>
  <tr>
</table>

Output

Now in the above table, you can see the background color and the border for the table. Remember, you can format the text in the TD tags using any formatting tags you like. However, if you want to apply similar formatting to the entire content in a particular cell, you can use the style tag of that particular TD tag. To apply the formatting for the entire table as shown above, use the style tag for the TABLE tag.

Next thing is spanning the rows and columns. For example you require only one cell in the first row and two cells in the second row, you must use spanning to achive this. This is because the table tag require as many cells in all rows as in first row. That means all the rows should be properly divided in to same number of cells. To overcome this we can use the rowspan and colspan attributes on the TD tag.

<table border="1" style="background-color: #f5f5dc">
    <tr>
        <td colspan="2" align="center">
            <b>This is the heading spanned over two columns.</b>
        </td>
    <tr>
    <tr>
        <td>This is the first cell of second row.</td>
        <td>This is the second cell of the second row.</td>
    <tr>
</table>

Output

<table border="1" style="background-color: #f5f5dc">
    <tr>
        <td rowspan="2" align="left">
            <b>This is the heading spanned over two rows.</b>
        </td>
        <td>This is another cell in first row.</td>
    <tr>
    <tr>
        <td>This is another cell in second row.</td>
    <tr>
</table>

Output

Now another feature in tables is Table HEAD and Table BODY. If you see the above tables you can easily notice the head row which will contain the captions or headings and the body which will contain the actual data rows. If you separate in this way it will become easier to apply proper formatting to header as well as data.

e.g.

<table border="1" style="background-color: #f5f5dc">
<thead>
    <tr>
        <td colspan="2" align="center">
            <b>This is the heading spanned over two columns.</b>
        </td>
    <tr>
</thead>
<tbody>
    <tr>
        <td>This is the first cell of second row.</td>
        <td>This is the second cell of the second row.</td>
    <tr>
</tbody>
</table>

• Written by Maverick.
• In category Web Programming.
• 15 years ago.

Hot Hits: 23991

Like it on Facebook, Tweet it or share this article on other bookmarking websites.