Creating table in HTML


Adding table's in your documents

<table>:
This tag defines a table within a body of the document. A table is divided into rows an columns. <tr> tag is used to define a row in 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:
AttributesDescriptionValues
align :Sets the horizontal alignment of the table.left, center or right
bgcolor :Sets the background color for a tablergb(x,x,x), #xxxxxx or colorname
border :Sets the size of border to be displayed around the table.pixels
cellpading:It sets the distance between the data in the cell &cells boundaries.pixels
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>:
This 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:
AttributesDescriptionValues
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 tablergb(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:
AttributesDescriptionValues
align :Sets the horizontal alignment of the cell content.right, left, center or justify
bgcolor :Sets the background color for a tablergb(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:
AttributesDescriptionValues
align :Sets the alignment of the caption.right, left, top or bottom

Following code will generate a table, lets have a look:
<table align="right" cellpading="2" cellspacing="2" >
<caption align="top">Fruits and their Color</caption>
<tr><th>Fruit</th><th>Color</th></tr>
<tr bgcolor="yellow" ><td>Mango</td><td>Yellow</td></tr>
<tr bgcolor="red" ><td>Apple</td><td>Red</td></tr>
</table>
Output :
Fruits and their Color
FruitColor
MangoYellow
AppleRed

Another eg. to illustrate the use of colspan and rowspan attributes:
<table align="center" cellpading="2" cellspacing="2" >
<tr><td>AAA</td><td>BBB</td></tr>
<tr><td colspan="2">CCC</td></tr>
<tr><td>DDD</td><td rowspan="2">EEE</td></tr>
<tr><td>FFF</td></tr>
</table >
Output :
AAABBB
CCC
DDDEEE
FFF

You Might Also Like

0 comments

Follow by Email

My photo
Hi. I am Ramesh Wetkoli. Three things I try to include in my blog posts are creativity, useful insights, and trendy information. I.T. graduate and working professional. I have leveraged 6+ years of work experience in I.T. industry and learnt various technologies, providing merchandizing support and handling digital marketing responsibilities.

Popular Posts

Find us on Facebook