CHAPTER 3 TABLES

TABLES :-

3. MAIN THINGS





BOLD TEXT SHOWS IF U USE


ONE

TWO


THREE




DONT CONFUSE BETWEEN TH AND TD... TH ONLY BOLD THE TEXT IT TABLE HEADING.


A table can have any number of rows and cells.
Attributes in a Table:
The basic attributes used in a table is described in the following table---

Attribute Name	Attribute Value	Description
BORDER	1, 2, 3, ...	It sets the border of a table to a size specified as its value.
BORDERCOLOR	Color values or Color Names	It sets the border of a table to a color specified as its value.
BGCOLOR	Color values or Color Names	It sets the background of a table to a color specified as its value. It is also used for a specific row or a specific cell.
WIDTH	100%, 50%, 25%, ... etc.	It sets the width of a table or the width of cells to a specific size.
CELLSPACING	Any Number like 10, 5, 20, ... etc.	It inserts a space between the cells of a table of a size specified as its value.
CELLPADDING	Any Number like 10, 5, 20, ... etc.	It inserts a space between the content and the border of a cell of a size specified as its value.
ALIGN	Left, Middle, Right	It aligns the contents of a cell as left, middle and right.
ROWSPAN	2, 3, ...	It divides a cell into two or more rows, e.g., two rows when rowspan="2", three rows when rowspan="3", ... and so on.
COLSPAN	2, 3, ...	It divides a cell into two or more columns, e.g., two columns when colspan="2", three columns when colspan="3", ... and so on.

The Border Attribute and Table Headings:
A table in general has a border. It is used in the opening
tag as---

We can also specify a color to a border as---

Table headings are defined by the
tag. Generally, in the first row of a table, instead of using the
tag, the
tag is used to specify headings in a table. A table data here corresponds to the content of each heading.



The following example depicts a table with three rows and three columns (i.e., three cells in each row) with table headings and a border of size "1" with a border color Red.

First Row, First Cell (Heading 1)	First Row, Second Cell (Heading 2)	First Row, Third Cell (Heading 3)
Second Row, First Cell (Table Data)	Second Row, Second Cell (Table Data)	Second Row, Third Cell (Table Data)
Third Row, First Cell (Table Data)	Third Row, Second Cell (Table Data)	Third Row, Third Cell (Table Data)

First Row, First Cell (Heading 1)	First Row, Second Cell (Heading 2)	First Row, Third Cell (Heading 3)
Second Row, First Cell (Table Data)	Second Row, Second Cell (Table Data)	Second Row, Third Cell (Table Data)
Third Row, First Cell (Table Data)	Third Row, Second Cell (Table Data)	Third Row, Third Cell (Table Data)

Specifying Width and Bgcolor to a table:
We can specify the width of a table using the WIDTH attribute in the opening tag of the table. Similarly, the width of a specific column can also be specified in the
tag.

A background color can be set to a table specifying a color value or a color name to thr BGCOLOR attribute in the
tag. Similarly, if we use bgcolor in the tag, all cells in the row will be set to the corresponding color. Using bgcolor in the

we can set a color to a specific cell.

The following example illustrates the use of WIDTH and BGCOLOR in a table---

Heading 1	Heading 2	Heading 3
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6

Width of the following table is 75% whether the width of the first, second, and third columns are respectively 25%, 25% and 50%. The background color of the second row is yellow and that of the second cell in the third row is red. The color of the remaining cells in the table is lightblue as specified in the opening tag of the table.

Heading 1	Heading 2	Heading 3
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6

The Align attribute:
The ALIGN attribute is used to align the content of a cell as left, middle and right. For instance, if we set Align="right" in a tag, contents of all the cells in that row will be aligned as right. If we set Align="middle" in a
, the content of that particular cell will be aligned as middle. However, the default alignment of the table data within a cell is left. The default alignment of the contents of a table heading is middle.

The ALIGN attribute is also used in the opening tag of a table to align the table as left, right or middle in a page. The default alignment in this case is left.
Let us take the following example---

Heading 1	Heading 2	Heading 3
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6

Heading 1	Heading 2	Heading 3
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6

In this example, the table is aligned middle in the page. The first heading is aligned left. The contents of the cells in the second row is aligned right. The content of the second cell of the third row is aligned middle whether the contents of the remaining cells in the table is aligned left by default.
Cellspacing and Cellpadding:
CELLSPACING is used in a table to insert a space between the cells.
Table without CELLSPACING:

Data 1	Data 2
Data 3	Data 4

Data 1	Data 2
Data 3	Data 4

Table with a CELLSPACING of 10:

Data 1	Data 2
Data 3	Data 4

Data 1	Data 2
Data 3	Data 4

Table with a CELLSPACING of 0:

Data 1	Data 2
Data 3	Data 4

Data 1	Data 2
Data 3	Data 4

CELLPADDING in a table is used to insert a white space between the content and the border of the cells.
Table without CELLPADDING:

Data 1	Data 2
Data 3	Data 4

Data 1	Data 2
Data 3	Data 4

Table with a CELLPADDING of 10:

Data 1	Data 2
Data 3	Data 4

Data 1	Data 2
Data 3	Data 4

Rowspan and Colspan:
(i) ROWSPAN is used in a table to divide a cell into two or more rows.

A Table with ROWSPAN 2:

Student Name	X
Subjects	Physics
	Maths

Student Name	X
Subjects	Physics
	Maths

(ii) COLSPAN is used in a table to divide a cell into two or more columns.
A Table with COLSPAN 2:

Student Name	Subjects
X	Physics	Maths
Y	Physics	Biology

Student Name	Subjects
X	Physics	Maths
Y	Physics	Biology