Tables in HTML

Table of Contents

Tables are made up of rows and each row is made up of columns.
It can be created using the following tags:

Tag-name	Purpose
<table>	Specifies the beginning of a table
<tr>	Specifies the beginning of a row
<td>	Specifies the beginning of a column
<th>	Specifies the beginning of a header column

HTML for the above table is:

<TABLE>
<TR>
    <TH>
        Tag-name
    </TH>
    <TH>
        Purpose
    </TH>
</TR>
<TR>
    <TD>
        &lt;table&gt;
    </TD>
    <TD>
        Specifies the beginning of a table
    </TD>
</TR>
<TR> 
    <TD>
        &lt;tr&gt;
    </TD>
    <TD>
        Specifies the beginning of a row
    </TD>
</TR>
<TR>
    <TD>
        &lt;td&gt;
    </TD>
    <TD>
        Specifies the beginning of a column
    </TD>
</TR>
<TR>
    <TD>
        &lt;th&gt;
    </TD>
    <TD>
        Specifies the beginning of a header column
    </TD>
</TR>
</TABLE>

Experts' Corner

An interesting thing to note above is the use of escape sequences.
To display <table> tag, symbols '<' or '>' cannot be used as such because then the browser will interpret it as a real table tag.

This is circumvented by using '<' for '<' and '>' for '>'
BTW, the '<' displayed here had to be escaped too by using '&amp' for the '&' sign.
So, '&amplt;' is used to displayed '<'

Confusing? Think how '&amplt;' is displayed above?

Options for tables

cellspacing attribute can be used to specify space between cells.
cellpadding attribute can be used to specify space between cell and its contents.
border can be used to specify border around cells and the table. Higher the value for the border, thicker is the border.

Example:

<TABLE border=5 cellspacing=14 cellpadding=32>
<TR>
    <TD>
        Row 1, Column 1
    </TD>
    <TD>
        Row 1, Column 2
    </TD>
</TR>
<TR> 
    <TD>
        Row 2, Column 1
    </TD>
    <TD>
        Row 2, Column 2
    </TD>
</TR>
</TABLE>

Result:

Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2

Like us on Facebook to remain in touch
with the latest in technology and tutorials!

Got a thought to share or found a
bug in the code?
We'd love to hear from you:

Name:
Email:	(Your email is not shared with anybody)

Comment:

Facebook comments:

Site Owner: Sachin Goyal