4.3. Displaying Tables in HTML

Tables are frequently used to organize data into rows and columns.  There is nothing like a table, to display complex information.  Tables are defined with table element.  The border attribute specifies the table’s border width in pixels.  To create a table without border set the border attribute to “O”.  You can also set the attribute width with the value for example “40%” and the table will be displayed in 40percent of the browsers width.  You can also set attribute width to a specified number of pixels.  The caption element describes the table’s content and helps text based browsers interpret the table data.  Text inside the <CAPTION> tag is rendered above the table by most browsers.

A table has three distinct sections-head, body and foot.  The head section is defined with a head element, which contains header information such as column names.  Each <TR> element defines an individual table row.  The columns in the head section are defined with the <TH> elements.  Most browsers center text formatted by the elements and display them in bold.  Table header elements are nested inside table row elements.

The foot element is defined with a <TFOOT> element.  The text placed in the footer commonly includes calculation results are footnotes.  The body section or table body contains the table’s primary data.  The table body is defined in body element.  In the body, each <TR> element specifies one row.  Data cells contain individual pieces of data and are defined with <TD> (table data) elements within each row.

Example 4.3 – Table in HTML



<TITLE> Simple HTML table </TITLE>


<TABLE BORDER =”5” WIDTH = “40%”>

<CAPTION> <STRONG> Players and Teams </STRONG> <CAPTION>

<TH> <TR>

<TD> First Name </td> <td> Second Name </td> <td>

Team </TD>




<TR> <TD> Glenn

</TD> <TD> m=M egrath </TD> <TD> Austraila </TD> </TR>

<TR> <TD> Irfan </TD> <TD> Pathan </TD> <TD> India </TD> </TR>






 Tips: You can also use the width and height to change the cell width and height. Changing on cell’s size can affect the size of the entire row or coloumn.

Leave a Reply

Your email address will not be published. Required fields are marked *

  • Get Alert

    Enter your email address:

  • Categories