This document discusses HTML tables and their tags. It covers the <table>, <caption>, <tr>, <th>, <td>, rowspan, and colspan tags for defining tables and cells. It also covers table formatting tags like <frame>, <rules>, and cell alignment/margin tags. The goal is to teach how to structure and style HTML tables using these basic table element tags.

1. Web Authoring
Topic 12 –
Tables in HTML

2. Objectives
Students should able to:
1. Use Web Authoring tool to create
table using the following HTML tags:
• table structure, rows and columns;
• table cell merge;
• cell margins;

3. Why use Table?
To arrange and group data and image
orderly.
To arrange screen space.

4. <table> tag
<TABLE> </TABLE> tag pair contains all
other elements that specify caption, rows,
content and formatting.
Common elements that go with table are
<caption>, <tr>, <td>, <th>

5. <caption> tag
A description for the table. Its optional.
It is only allowed immediately after the
<table> tag.
<TABLE>
<CAPTION >Employee Data</CAPTION>
<TR>……</TR>
</TABLE>

6. <tr> tag
Defines a row on a HTML table.
A <tr> element contains one or more <td>
or <th> elements.

7. <th> and <td> tag
The <th> tag defines a header cell in an
HTML table.
The <td> tag defines a standard data cell.
The text in a <th> element is bold and
centered.
The text in a <td> element is regular and
left-aligned.

8. Rowspan attribute
No. of rows spanned by the current cell.
2
<TABLE BORDER=“1”>
1 3
<TR>
<TD rowspan=“2” > 1 </TD>
<TD> 2 </TD>
</TR>
<TR><TD> 3 </TD></TR>
</TABLE>

9. Colspan attribute
No. of columns spanned by the current
cell
<TABLE BORDER=“1”>
1
<TR>
<TD colspan=“2” > 1 </TD> 2 3
</TR>
<TR>
<TD> 2 </TD>
<TD> 3 </TD></TR>
</TABLE>

10. Table Row Group
Table rows can be grouped into a table
head, table foot, and one/more table body
sections using THEAD, TFOOT & TBODY
Each THEAD, TFOOT & TBODY contains
a row group. Each row group must
contain at least one row, defined by the
TR tag.

11. Table Row Group
TFOOT must appear before TBODY
within the TABLE.

12. Table Column Group
Column groups allow authors to create
structural divisions within a table.
Column groups are created by
COLGROUP tag.

13. Table Column Group
The COL tag allows authors to share
attributes among several columns without
any structural grouping.
COL tags serve only as a support for
attributes. They may appear inside/outside
an explicit column group defined using
COLGROUP tag.

14. Table Formatting - Frame
A table’s external frame (border) can be
controlled by the FRAME attribute of the
TABLE tag.
FRAME determines which sides of the
frame surrounding a table will be visible.

15. Table Formatting - Frame
FRAME can take the following values:
void: No sides. This is the default value.
above: The top side only.
below: The bottom side only.
hsides: The top and bottom sides only.
vsides: The right and left sides only.
lhs: The left-hand side only.
rhs: The right-hand side only.
box: All four sides.
border: All four sides.

16. Table Formatting - Rule
Rules are the internal dividing lines
between table cells.
RULES can take the following values:
none: No rules. This is the default value.
rows: Rules will appear between rows only.
cols: Rules will appear between columns only.
all: Rules will appear between all rows and
columns.
groups: Rules will appear between row groups
and column groups only.

17. Alignment
ALIGN and VALIGN attributes can be
used for different table tags.
ALIGN specifies the horizontal alignment
of data and the justification of text in a
cell.
VALIGN specifies the vertical alignment of
data and text in a cell.

18. Cell Margin

19. Cell Margin Example
<TABLE border=“2” cellspacing=“20”
cellpadding=“20”>
<TR>
<TD>Data1</TD>
<TD>Data2</TD>
<TD>Data3</TD>
</TR>
</TABLE>

20. Review Questions
1. List the common elements that comes
with the table tag.
Common elements that go with table are
<caption>, <tr>, <td>, <th>
2. What is the tag that defines a data cell?
The <td> tag defines a standard data cell.