WORKING

WITH TABLES
When we need to represent data in form of rows and columns we use a container tag called <table>.

Each row is divided into one or more cells/ columns which can either be a
HEADER CELL or a DATA CELL.

Header cell- which heads a particular column.

- <TH>…………..</TH>
- It displays text in center of the cell and in BOLD.

Data cell - data information of a row, or value of heading cell.

- <TD>…………….</TD>
- its displays the information/data of the table.
 S. NO NAME

001 ABC
HEADER
CELL

DATA
002 XYZ CELL
<TABLE>….</TABLE>
<Table> tag is part of body tag only.
It is not necessary that <table> tag is first tag in body.

<TR>…..</TR>- TABLE ROW

<TR>- this tag is a container tag
<TR>- it does not use any attribute.

<TD>…..</TD>- TABLE DATA

<TD> helps in putting data in the individual cell.
HOW TO ADD EMPTY CELL INTO TABLE

&nbsp; - nbsp stands for non

blank space.
- It is case sensitive
 CAPTION TAG

It is used to add caption for the table.

The caption can appear either at top or at bottom of the table created. This can be done by using
ALIGN attribute of <caption tag>.

<caption> is by default placed at the center of the table.

It is used immediately after opening <table> and before adding any table row
EXAMPLE
ALIGN ATTRIBUTE OF <CAPTION>
 ATTRIBUTES OF TABELS
1. BORDER ATTRIBUTE
This attribute draws an inside and an outside border of the table.

It takes value as number like- 1,2,3….

When value of border is 1 then the inside and outside border is 1.

When value of border is more than 1 then only the outside border changes but the inside always
remains 1.

Inside border is always by default=1.

Not adding border attribute will not add boundary to the table.
EXAMPLE
EXAMPLE – NO BORDER
2. ALIGN ATTRIBUTE- RIGHT, LEFT, CENTER
OUTPUT
 3. WIDTH ATTRIBUTE

Width attribute can be a pixel value(a number) or it can be a percentage value.

It indicates suggested width of the table.

Browser can ignore width If it is not possible.

If width= 100% it means that it spans across entire browser window.

Width attribute is used with border, if we omit this attribute the width of the table is set according
to characters inside the cells.
EXAMPLE
4. HEIGHT ATTRIBUTE
 5. BORDERCOLOR ATTRIBUTE
BORDERCOLOR attribute could be used to add border color to the table border

By default the COLOR is black or grey.

The output of table border color have different way of rendering in different browsers like Netscape
Navigator and MS Internet Explorer.
EXAMPLE
OUTPUT

OUTPUT OF GOOGLE
CHROME
OUTPUT OF INTERNET EXPLORER
 6. TABLE BORDER- LIGHT and DARK ATTRIBUTE

Visual web browsers such as Netscape Navigator & Internet Explorer render table borders with 3D
appearance.

This is done by making TOPLEFT border LIGHTER than BOTTOMRIGHT.

The TOPLEFT border is light known as BORDERCOLORLIGHT and BOTTOMRIGHT border is

darker known as BORDERCOLORDARK.

Mozilla Firefox shows light grey and dark grey in TOPLEFT and BOTTOMRIGHT.
EXAMPLE
OUTPUT
EXAMPLE
OUTPUT- MOZILLA FIREFOX
 7. TABLE BACKGROUND COLOR
It helps in setting background color of the table.
EXAMPLE
8. <FONT> TAG WITH TABLE
 Output in Internet Explorer

Output in Google Chrome

9. ADDING BACKGROUND IMAGE IN
TABLE
OUTPUT
 CELLPADDING
Cellpadding attribute indicates how many pixels of space there
should be between the cells content and the border of the table.

It does not accept the value in form of percentage.

 cellpadding is an attribute of <table> tag.

Spacing of TEXT in a cell.

 It does not affects the function of <TH> and <TD>. It only creates
‘n’ pixel between the cell and boundaries(top, left, right, bottom
cell boundaries)- IT IS NOT AFFECTED BY NUMBER OF
CHARACTERS
OUTPUT
CELLPADDING NOT AFFECTED BY NUMBER OF
CHARACTERS
OUTPUT
 CELLSPACING
Cellspacing attribute indicates how many pixels of white
space in pixels should be there between individual cells.

It does not accept the value in form of percentage.

 cellspacing is an attribute of <table> tag.

Spacing of cells.

 it IS AFFECTED BY NUMBER OF CHARACTERS

OUTPUT
CELLSPACING AFFECTED BY NUMBER OF
CHARACTERS
OUTPUT
 COLSPAN
When the tables cell span across more than one column, it is
called COLSPAN.

If we want to give nice header to the table colspan is used

with <TD> tag.

We use this attribute with <TD> tag

It is basically merging of columns.

We need to specify the number of columns to be merged/

OUTPUT
OUTPUT

MergeCELLS
 ROWSPAN
When the tables cell span across more than one row, it is
called ROWSPAN.

Used for giving table a nice sidebar.

It is basically merging of rows.

We use this attribute with <TD> tag.

We need to specify the number of rows to be merged/ spanned.

OUTPUT