Adding Tables

Tables layout any page content into rows and columns.

The Table Parts
• TABLE HEADINGS – labels used on rows, columns
or both.
- These are usually displayed as large or bold text.
• TABLE CELLS – These are individual boxes within
the table.
- These are the spaces where content are usually
placed.
Creating Tables
• To create tables in HTML, use the <table> and
</table> tags.
• Within these tags are the <tr> or Table Row,<td> or
Table Data, <th> or Table Header and their
attributes.
Follow these simple steps for building your basic HTML
table:
1. Begin with the <table> and </table> tags.
2. After the <table> tag, insert the <tr> tag. This refers to
the table row.
3. After the <tr> tag, insert the <th> tag, which places a
table heading in your table. Add as many <th> tags as
necessary, and then enclose the row with the closing
</tr> tag.
4. Create another row by typing a new <tr> tag .
5. Create a cell in the row by adding a <td> tag after the
<tr> tag. This creates the cells within the table row.
Insert the content between the <td> and </td> tags.
6. Create as many <td> tags as you need, knowing that
each tag that you add to the row forms the column
for that row.
7. Close the row with the closing </tr> tag.
8. If you need to add a new row, add a new starting
<tr> tag.
9. Perform steps 5 to 7 until you have created as many
rows and cells that you need for your table.
10. A table may also have a caption. Use the tag
<caption> and place it immediately after the
<table>. The caption is place above the table.
A table has three (3) sections: HEAD, BODY and
FOOT.
• <thead> tag – is used to define the head of a table and
it groups header content in an HTML table.
• <tbody> tag – is used to define the body of a table
and it groups body content in an HTML table.
• <tbody> tag – is used to define the foot of a table and
it groups fooder content in an HTML table.
NOTE: The correct order of these tags should be
<thead>, <tfoot>, and <tbody>.
The code above results like this on a browser.
 TAG DESCRIPTION
border • It specifies the thickness of the table
border; values are 1 or “ “.
span • It is used together with the tags
<colgroup> and <col>;
• It is used to define the number of columns
covered by a property.
• It requires a numerical value.
colspan • It used to combine two (2) or more data
cells in adjacent columns on the same row.
• It is used together with the <td> and <th>
tags.
rowspan • It is to combine two (2) or more data cells
in the same column.
• It is used together with the <td> and <th>
tags.
Add the following code to the original HTML
document that created the table in the previous
example.