Software Engineering

Assignment Amrith Krishna,

Submitted by: Roll No: 5, S6 CSE –A

Q. What are the tags available in HTML to represent tables?

HTML Table Tags

Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines a group of columns in a table, for formatting
<col /> Defines attribute values for one or more columns in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

<table> TAG
<table></table> is used to represent start end of a table.

There are specific tags that need to be used inside this pair to yield desired table structure.
It has a number of attributes which will be applicable to whole of the table. Attributes which
are specific to table are discussed here. Standard attributes and event handlers are not
mentioned.

Attribute Value Description

border pixels Specifies the width of the borders around a table
cellpadding pixels Specifies the space between the cell wall and the
cell content
cellspacing pixels Specifies the space between cells
Frame void Specifies which parts of the outside borders that
above should be visible
below
hsides
lhs
rhs
vsides
box
border
Rules none Specifies which parts of the inside borders that
groups should be visible
rows
cols
all
summary text Specifies a summary of the content of a table
Width pixels Specifies the width of a table
%

<tr> tag.

<tr></tr> defines a table row. It will contain one or more pairs of either <th></th> or
<td></td> tags.
Attributes

Attribute Value Description

Align right Aligns the content in a table row
left
center
justify
char
Char character Aligns the content in a table row to a character
charoff number Sets the number of characters the content will be
aligned from the character specified by the char
attribute
Valign top Vertical aligns the content in a table row
middle
bottom
baseline

<th> Tag
<th></th> tag pair is used to specify a cell header. For each cell a a tag pair is required.
The content inside it is bold and centered as per default styling. It comes inside a <tr></tr>
tag pair.

<td> Tag
<td></td> tag pair is also used at the cell level. It is used for specifying table data. Its
default styling is regular and left-aligned.

Attributes are common to both <th> and <td> tags.

Attribute Value Description

Abbr text Specifies an abbreviated version of the content in a
cell
Align left Aligns the content in a cell
right
center
justify
 char
Axis category_name Categorizes cells
Char character Aligns the content in a cell to a character
Charoff number Sets the number of characters the content will be
aligned from the character specified by the char
attribute
Colspan number Specifies the number of columns a cell should span
Headers headercells'_id Specifies the table headers related to a cell
Rowspan number Sets the number of rows a cell should span
Scope col Defines a way to associate header cells and data
colgroup cells in a table
row
rowgroup
Valign top Vertical aligns the content in a cell
middle
bottom
baseline

<caption> tag

<caption></caption> pair.

It defines table caption.

It should be placed immediately after <table> tag.
Its default styling is center aligned and placed above the table.

<thead> Tag

<thead></thead> pair
It is used to group the header content of a table.

<tbody> Tag

<tbody></tbody> pair
It is used to group the body content of a table.

<tfooter> Tag

<tfooter></tfooter>
It is used to group the footer content of a table.
Each of these tags should be used in conjunction with other two tags.

<col /> Tag

The <col> tag defines attribute values for one or more columns in a table.

<colgroup> Tag

Defines a group of columns in a table, for formatting

Example
<table width="200" border="1">
<caption>What about this caption</caption>
<tr><td colspan="2">The</td>
<td rowspan="2">&nbsp;</td> </tr>
<tr><td rowspan="2">&nbsp;</td>
<td align="center">Zig Zag</td> </tr>
<tr><td colspan="2" align="right">Table</td> </tr>
</table>

What about this caption

The
Zig Zag
Table

Reference:
1. W3schools.com
2. HTML, DHTML, Java Script, Perl, CGI - Evan Bayross, BPB