HTML tables are coded in the <BODY> section of the Web document. Some authors call this the <BODY> “container”. Tables, out of necessity, are rectangular in shape. There are the same number of columns in each row and you cannot code a table having a shape other than a square or a rectangle. You may make a table cell that goes across one or more columns horizontally. This table uses the basic three tags all tables must have:
The table element in HTML is <TABLE> </TABLE>. Everything within a table is enclosed between these two “tags” which are both required.
<TABLE>
</TABLE>
<TR> is the table row element which begins each new row. </TR> must end each row.
It will be easier for you to edit your tables if you follow a format of indenting the <TR> and the </TR> “tags” inward from <TABLE> and </TABLE> as follow
<TABLE>
<TR>
</TR>
</TABLE>
Data, images, and other elements are placed into the table by using either the table heading <TH> element or the table data <TD> element.
Remember to use the row tags to tell the browser where the row begins (<TR>) and where the row ends (</TR>). A centered heading in a table is made using the table heading <TH> element inside a row. </TH> closes the heading. If a heading for an additional column in the same row is desired, simply use another <TH> element and close with the </TH> for each additional column needed before closing the row with <TR>. The following code illustrates a row with headings in three columns. The default text alignment for the table heading element is centered text and by default, the text is bold.
<TABLE>
<TR>
<TH>Heading 1</TH>
<TH>Heading 2</TH>
<TH>Heading 3</TH>
</TR>
</TABLE>
If you would like to add a border to this table you would have to add the BORDER attribute to the table element. Leave a space after the word TABLE and type BORDER=”1″ to make a border that is one pixel wide.
<TABLE BORDER=”1″>
<TR>
<TH>Heading 1</TH>
<TH>Heading 2</TH>
<TH>Heading 3</TH>
</TR>
</TABLE>
The table now looks like this:
|
Heading 1 |
Heading 2 |
Heading 3 |
CAPTION places a horizontally centered title at the top or at the bottom of a table. If a caption is wider than the table, the caption will break and continue onto the next line(s) so as to remain within the left and right boundaries of the table.
The <caption> tag defines a table caption.
The <caption> tag must be inserted immediately after the <table> tag.
You can specify only one caption per table.
<table border=”1″>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
OUTPUT
| Month | Savings |
|---|---|
| January | $100 |
| February | $50 |
BGCOLOR attribute in the table element to change the background color. We have already coded BORDER=”1″ so leave a space after that and type BGCOLOR=”red” for now. This will give the table a white background.
<TABLE BORDER=”1″ BGCOLOR=”red”> <TR> <TH>Heading 1</TH> <TH>Heading 2</TH> <TH>Heading 3</TH> </TR> </TABLE>
The new table with the background now red:
|
Heading 1 |
Heading 2 |
Heading 3 |
Table data cells are formed using the table data element <TD>. </TD> must be used to close each table data cell. If omitted, the table will not format correctly. You will be using the same number of table data elements in each table row as the number of columns in the table.
<TABLE BORDER=”1″ BGCOLOR=”yellow”>
<TR>
<TH>Heading 1</TH>
<TH>Heading 2</TH>
<TH>Heading 3</TH>
</TR>
<TR>
<TD>Column 1 data</TD>
<TD>Column 2 data</TD>
<TD>Column 3 data</TD>
</TR>
</TABLE>
The table now has two rows and looks like this:
|
Heading 1 |
Heading 2 |
Heading 3 |
| Column 1 data | Column 2 data | Column 3 data |
Table data cells do not have to contain data. You can create a blank cell by coding <TD> </TD>. The code is an HTML special character entity for non-breaking space. Use in place of data when the cell is to be empty.
IN TR AND TD/H TAGS, COL SPAN AND ROW SPAN DIFFERENT COLOR FOR CELL
Cell Padding
The cellpadding tag is used to create space between the text inside your table and the border surrounding that text.
Cell Spacing
The cellspacing tag is to create space between different cells within your table.
TWO COLUMNS: FIRST CELL WIDTH=”50%”
THREE COLUMNS: FIRST CELL WIDTH=”50%”
COLSPAN
Column Span extends cells on a horizontal row (left and right). The line to add for Column Span is COLSPAN=”X”. This line adds onto the <TD> cell so the final result would look like this.
<TD COLSPAN=”X”> Where X is No of Column
ROWSPAN
Row Span extends cells on a vertical row (up and down). The line to add for Row Span is ROWSPAN=”X”. This line adds onto the <TD> cell so the final result would look like this.
<TD ROWSPAN=”X”> X is the Number of Rows
“ 
| Align Left |
| Description | To align the text or objects in a cell to the left side of the cell, the line ALIGN=”left” needs to be added to the <TD> tag, so the final result looks like this:<TD ALIGN=”left”> | |
| Code | <TABLE BORDER=”1″ WIDTH=”200″ HEIGHT=”100″> <TR> <TD ALIGN=”left”> Web-Tech </TD> </TR> </TABLE> |
|
| Output |
|
| Align Right |
| Description | To align the text or objects in a cell to the right side of the cell, the line ALIGN=”right” needs to be added to the <TD> tag, so the final result looks like this:<TD ALIGN=”right”> | |
| Code |
<TABLE BORDER=”1″ WIDTH=”200″ HEIGHT=”100″> <TR>
<TD ALIGN=”right”> Web-Tech </TD> </TR> </TABLE> |
|
| Output |
|
| Align Center |
| Description | To align the text or objects in a cell to the center of the cell, the line ALIGN=”center” needs to be added to the <TD> tag, so the final result looks like this:<TD ALIGN=”center”> | |
| Code |
<TABLE BORDER=”1″ WIDTH=”200″ HEIGHT=”100″> <TR>
<TD ALIGN=”center”> Web-Tech </TD> </TR> </TABLE> |
|
| Output |
|
| Align Top |
| Description | To align the text or objects in a cell to the top of the cell, the line VALIGN=”top” needs to be added to the <TD> tag, so the final result looks like this:<TD VALIGN=”top”> | |
| Code |
<TABLE BORDER=”1″ WIDTH=”200″ HEIGHT=”100″> <TR>
<TD VALIGN=”top”> Web-Tech </TD> </TR> </TABLE> |
|
| Output |
|
| Align Bottom |
| Description | To align the text or objects in a cell to the bottom of the cell, the line VALIGN=”bottom” needs to be added to the <TD> tag, so the final result looks like this:<TD VALIGN=”bottom”> | |
| Code |
<TABLE BORDER=”1″ WIDTH=”200″ HEIGHT=”100″> <TR>
<TD VALIGN=”bottom”> Web-Tech </TD> </TR> </TABLE> |
|
| Output |
|
| Align Middle |
| Description | To align the text or objects in a cell to the middle of the cell, the line VALIGN=”middle” needs to be added to the <TD> tag, so the final result looks like this:<TD VALIGN=”middle”> | |
| Code |
<TABLE BORDER=”1″ WIDTH=”200″ HEIGHT=”100″> <TR>
<TD VALIGN=”middle”> Web-Tech </TD> </TR> </TABLE> |
|
| Output |
|
Previous |
Solved Examples |
Unsolved Questions for Practice |
Next |
VKS-LEARNING HUB 
Sir, can you please add notes on ‘Frames’?
Thank you.
Notes Added on Frame
Thank you sir!