• Tables are advanced HTML construct that allows you to arrange text,

images, and other HTML content into rows and columns with or
without borders.

• Aside from using tables in presenting data in a tabular form, it can also
be used to layout and
• control pages over placement of various HTML elements on a page.

• Tables have become so popular that most major browsers have now
added table support.
 PA R T S O F A TA B L E
The figure below shows a typical table and its parts.
 TA B L E E L E M E N T

• To create a table in HTML, use the <TABLE>...</TABLE> tags, which will

contain the code for a caption and then the contents of the table itself.
• The Table element has four sub-elements:
• Table Row <TR>...</TR>
• Table Header <TH>...</TH>
• Table Data <TD>...</TD>
• Caption <CAPTION>...</CAPTION>
• Tables are specified in HTML row by row, and each row definition contains
definitions for each of the cells in that row.
 TA B L E E L E M E N T
Here's a simple example: a table with only one row,
• Each table row is indicated by the four cells, and one heading on the left side:
<TR> tag and ends with the
appropriate closing </TR>.

• Each table row, in turn, has a number

of table cells, which are indicated
using the <TH>...</TH> (for heading
cells) and <TD>...</TD> tags (for
data cells).
 H T M L TA B L E E X A M P L E 1

• If the heading is placed along

the top edge of the table, the
<TH> tags for that heading
go inside the first row. The
HTML for a table with a row
of headings along the top and
one row of data looks like the
following:
 H T M L TA B L E E X A M P L E 2

• If the headings are along the left edge

of the table, place each <TH> in the
first cell in each row, like the
following:
 EMPTY CELLS
• An empty cell is a cell that has nothing in it. To create an empty cell, just define a cell with a
<TH> or <TD> tag with nothing inside it:
<TR>
<TD></TD>
<TD>10</TD>
<TD>20</TD>
</TR>

• If you want to force a truly empty cell, you can add a line break in that cell by itself with no
other text:
<TR>
<TD><BR></TD>
<TD>10</TD>
<TD>20</TD>
</TR>
 TA B L E C A P T I O N
• This allows you to specify a line of text that will appear centered above or below the table that
act like a title for the table.

• The <CAPTION> tag goes inside the <TABLE> tag just before the table rows, and it contains
the title of the table and closed with the </CAPTION> tag.

<TABLE>
<CAPTION> Web Programming </CAPTION>
<TR>
...

• The optional ALIGN attribute to the caption determines the alignment of the caption.
 TA B L E A L I G N M E N T

• By default, tables are displayed on a line by themselves along the

left side of the page, with any text above or below the table.

• Tables can have left, right, or center alignment.

• The center alignment attribute of the <TABLE> is not well

supported and you will want to use <CENTER> to control the
position of your table in your document.
 TA B L E A L I G N M E N T
• HTML tables give you several options for aligning the data within your cells
both horizontally and vertically.

• Horizontal alignment (ALIGN attribute) defines whether the data within a cell
is aligned with the left cell margin (LEFT), the right cell margin (RIGHT), or
centered within the two (CENTER).

• Vertical alignment (VALIGN attribute) defines the vertical alignment of the

data within the cell, meaning whether the data is flush with the top of the cell
(TOP), flush with the bottom of the cell (BOTTOM), or vertically centered
within the cell (MIDDLE).
 C E L L T H A T S P A N M U LT I P L E
ROWS OR COLUMNS
• Cells can be created that span multiple rows or columns within the table.

• A spanning cell is a cell that occupies more than one row or column in a table.

• To create a cell that spans multiple rows or columns, you add the ROWSPAN
or COLSPAN attribute to the <TH> or <TD> tags, along with the number of
rows or columns you want the cell to span.

• The data within that cell then fills the entire width or length of the combined
cells, as given in the example on the next page.
C E L L T H A T S P A N M U LT I P L E :
COLUMNS
C E L L T H A T S P A N M U LT I P L E :
ROWS
 TA B L E W I D T H
• Table width is specified as an absolute number of pixels or a percentage of the
document width.

• The width corresponds to the WIDTH attribute of the TABLE element.

• If WIDTH is specified, the width of the columns within the table can be compressed or
expanded to fit the required width.

• The WIDTH attribute can also be used on individual cells (<TH> or <TD>) to indicate
the width of individual columns.

• As with table width, the <WIDTH> tag in calls can be an exact pixel width or a
percentage (which is taken as a percentage of the full table width).
TA B L E W I D T H
 TA B L E P R O P E R T I E S
• BGColor or Background Color
• Some browsers support background colors in a table.
• The colors are expressed as a hexadecimal red-green-blue value.
• It can enter be a direct value or a standard Windows color names.
• BGCOLOR of a table, a row, or a cell inside a row can be used in <TABLE>, <TR>,
<TH> or <TD> tags.
• Just like in <BODY>, the value of BGCOLOR is a color specified as a hexadecimal
triplet or, in Explorer only, one of the seven color names:
• Black, White,
• Green, Maroon, Olive
• Navy, Purple, Gray
• Red, Yellow, Blue
• Teal, Lime, Aqua
• Fuchsia, Silver
 TA B L E P R O P E R T I E S
• BORDER: the lines that form the
boundary of each table cell when the
file is displayed in a browser.
• Numerical value is used for the border
width, which specifies the border in
pixels, or 'BORDER' (causing the
browser to draw the default border).
• The table border corresponds to the
BORDER attribute of the TABLE
element. A setting of BORDER="0"
will make the border disappear.
 TA B L E P R O P E R T I E S
• BorderColor: The color of the border
around the table.
• BorderColorLight: Light color used to
outline two sides of a cell or the table.
• BorderColorDark: Dark color used to
outline two sides of a cell or the table.
• CellPadding: The space between the cell
border and the cell contents and is
specified in pixels.
• CellSpacing: Represents the space
between cells and is specified in pixels.
 EXERCISE

Create an HTML document that will output the table as shown below.