Scribd
Upload
6 views46 pages

TABLEeee Tag

Uploaded by

valoansh19
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
6 views46 pages

TABLEeee Tag

Uploaded by

valoansh19
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 46

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

002 XYZ DATA 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
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
EXAMPLE
OUTPUT
CELLPADDING NOT AFFECTED BY NUMBER OF
CHARACTERS
OUTPUT
CELLSPACING
Cell spacing attribute indicates how many pixels of white spaces
should be there between individual cells.

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

 cell spacing is an attribute of <table> tag.

Spacing of cells.

 it is AFFECTED BY NUMBER OF CHARACTERS


EXAMPLE
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/ spanned.


EXAMPLE
OUTPUT

OUTPUT

GHOST CELLS
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.


EXAMPLE
OUTPUT

You might also like