Using Tables In HTML With Ease

In HTML, the table is one of the most useful tools. The HTML table allows placing of the object and page elements in a very precise way on the webpage that will allow a lot of creative freedom for the coder. The tables will allow borders that help to separate the obvious information and even sometimes the border can appear invisible.

In HTML table, it is categorized into rows and columns; in which each row contain the cells while each cell contains texts, images or graphics. The Table is used more frequently particularly for creating online forms or catalogues. However, there is a drawback for the table. Sometimes downloading of the table may take sometime because it won’t display the images until the browser has downloaded all the contents of the table. Therefore, it is necessary for a coder that the height and the width of the table should be properly framed so that the browser doesn’t take much longer time to download a single graphic image.

As mentioned, HTML tables contain rows and cells where each row contains cells and each cell contain text and images. All individual table cells contain anything that can be put across on the page. Here is a list of the tags that are used for creating tables:

  • <table> – Indicates the browser to start a table
  • <th></th> – Start and end a table header cell
  • <tr></tr> – Start and end a table row
  • <td></td> – Start and end a table cell
  • </table> – Indicates the browser to end a table

The HTML tables are defined with tag <table>. The tables are divided into rows and indicated with tag <tr> and then also with data cells <td>. The data cell contains texts, images, paragraphs, lists, forms, tables, horizontal rules etc. This can be explained with the following syntax:

1
2
3
4
5
6
7
8
9
10
<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

This will deliver a result:

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

For headings in table that is defined with <th> tags, you can use the following attribute:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table border="1">
    <tr>
        <th>Heading</th>
        <th>Another Heading</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

Some times, the threads like <thread>, <tbody> and <tfoot> are rarely used because most of the browser doesn’t support that. However, all expects that this will change in the forthcoming version of XHTML. Sometimes changing the browser version can also help to work these tags, like Inter Explorer 5.