Creating table in HTML

---

Adding tables in your documents

<table>:

The <table> tag defines a table within a body of the document. A table is divided into rows and columns. <tr> tag is used to define a row in the table and <th> or <td> tag defines a column. The <table> tag may contains other tags which are always written in between <table> & </table> tags.

Attributes of this tag are listed below:

Attributes	Description	Values
align :	Sets the horizontal alignment of the table.	left, center or right
bgcolor :	Sets the background color for a table	rgb(x,x,x), #xxxxxx or colorname
border :	Sets the size of border to be displayed around the table.	pixels
cellpadding:	cellpadding sets the distance between the data in the cell &cells boundaries.	pixels eg. cellpadding=10px
cellspacing:	Sets the distance between two adjacent cells.	pixels
width :	Sets the width of the table to specific number of p ixels or percentage of available screen.	pixels, %

---

Other tags used within a <table> tag are :

<tr>:

The <tr> tag defines rows in a table. This tag ends with </tr> tag. A single row may contain multiple cells. A <tr> tag contains one or more <th> or <td> tags.
Attributes of <tr> tag are:

Attributes	Description	Values
align :	Sets the horizontal alignment of the cell content.	right, left, center or justify
valign :	Sets hte vertical alignment the cell content.	top, baseline, center or bottom
bgcolor :	Sets the background color for a table	rgb(x,x,x), #xxxxxx or colorname

---

<th> & <td>:

These tags are used to create table cells. The only difference between these tags is <th> tag gives heading to each column in table. Anything between <th> & </th> tag get displayed in boldface's. Whereas <td> tag displays normal text.

Attributes:

Attributes	Description	Values
align :	Sets the horizontal alignment of the cell content.	right, left, center or justify
bgcolor :	Sets the background color for a table	rgb(x,x,x), #xxxxxx or colorname
valign :	Sets hte vertical alignment the cell content.	top, baseline, center or bottom
width :	Sets the width of the individual cell to specific number of pixels or percentage of available table.	pixels, %
height :	Sets hte height of the cell.	pixels, %
colspan :	Set to number of columns to be merge together.	number
rowspan :	Set to number of rows to be merge together.	number

---

<caption>:

This tag is used to explain table contents & appears as table heading to top or bottom of the table. The <caption> tag must be inserted immediately after the <table> tag. You can specify only one caption per table.

Attribute:

Attributes	Description	Values
align :	Sets the alignment of the caption.	right, left, top or bottom

---

Following code will generate a table, lets have a look:

Output :

---

Another eg. to illustrate the use of colspan and rowspan attributes:

Output :

---