HTML
Tables
Develop
HTML Tables
• It allow web authors to arrange
data like text, images, links,
other tables, etc. into rows and
columns of cells.
HTML Tables
• The HTML tables are created using
the <table> tag in which the <tr> tag
is used to create table rows
and <td> tag is used to create data
cells. The elements under <td> are
regular and left aligned by default
Example
• Here, the border is
an attribute of
<table> tag and it
is used to put a
border across all
the cells.
Collapsed Borders
• If you do not specify
a border for the
table, it will be
displayed without
borders.
• A border is set using
the CSS border
property:
Table Headings
• Table heading can be
defined
using <th> tag. This
tag will be put to
replace <td> tag,
which is used to
represent actual data
cell.
Table Headings
• Normally you will put
your top row as table
heading as shown below,
otherwise you can use
<th> element in any
row. Headings, which are
defined in <th> tag are
centered and bold by
default.
Cellpadding and Cellspacing
• There are two attributes
called cellpadding and cellspa
cing which you will use to
adjust the white space in your
table cells.
Cellpadding and Cellspacing
• The cellspacing attribute
defines space between table
cells, while cellpadding
represents the distance
between cell borders and the
content within a cell.
Output:
Colspan and Rowspan
Attributes
• You will use colspan attribute if
you want to merge two or more
columns into a single column.
Similar way you will
use rowspan if you want to
merge two or more rows.
Output:
Table Background
• You can set table background using one
of the following two ways −
bgcolor attribute − You can set
background color for whole table or just
for one cell.
background attribute − You can set
background image for whole table or
just for one cell.
Table Background
• You can also set border color also
using bordercolor attribute.
Note − The bgcolor, background,
and bordercolor attributes deprecated
in HTML5. Do not use these attributes.
Output:
Table Height and Width
• You can set a table width and height
using width and height attributes.
You can specify table width or height
in terms of pixels or in terms of
percentage of available screen area.
Output:
Table Caption
• The caption tag will serve as a title
or explanation for the table and it
shows up at the top of the table.
Output:
Table Caption
• Tables can be divided into three
portions − a header, a body, and a
foot.
• The three elements for separating
the head, body, and foot of a table
are −
Table Header, Body, and
Footer
<thead> − to create a separate
table header.
<tbody> − to indicate the main
body of the table.
<tfoot> − to create a separate
table footer.
Output:
A Special Style for One Table
To define a special style for a
special table, add an id attribute to
the table:
CSS
:
Output:
