Skip to main content

Table Tag & Its sub tags and Attributes along with live execution

Table TAG

Table Tag :

Table in HTML is a combination of rows and columns.

Sarting Tag : <table> Ending tag : </table> and Table tag has different types of Subtags as below

Subtags of Table Tag :

  1. <tr> </tr> Tag : It is used to define a row in a table.
  2. <th> </th> Tag : It is used to define header cell in a table.
  3. <td> </td> Tag : It defines a cell in a table.
  4. <caption> </caption> Tag : it is used to Give caption for the table
For this first take a notepad and copy code then save it with .html extension.Thats it your Program will be exected.if You want to check its effect within this website plese click on EXECUTE button. To get table as shown below we will follow below four steps

1. This is the table without caption and table header tags.

CODE <html> <head> <title> Table Tag </title> <style type="text/css"> </style> </head> <body > <table> <tr> <td> Sl.no </td> <td> Employee Name </td> <td> Salary in Thousands </td> <td> Age In Years </td> </tr> <tr> <td> 1 </td> <td> K.madhuSudhan rao </td> <td> 50 </td> <td> 27 </td> </tr> <tr> <td> 2 </td> <td> Madhavi </td> <td> 40 </td> <td> 27 </td> </tr> <tr> <td> 3 </td> <td> Sruthi </td> <td> 30 </td> <td> 30 </td> </tr> <tr> <td> 4 </td> <td> Maruthi </td> <td> 35 </td> <td> 30 </td> </tr> </table> </body> </html>
OutPut (Click on above execute Button)

2. This is the table with Caption and Header tags.

CODE <html> <head> <title> Table Tag </title> <style type="text/css"> </style> </head> <body > <table> <caption> This is the table with Caption and Header tags. </caption> <tr> <th> Sl.no </th> <th> Employee Name </th> <th> Salary in Thousands </th> <th> Age In Years </th> </tr> <tr> <td> 1 </td> <td> K.madhuSudhan rao </td> <td> 50 </td> <td> 27 </td> </tr> <tr> <td> 2 </td> <td> Madhavi </td> <td> 40 </td> <td> 27 </td> </tr> <tr> <td> 3 </td> <td> Sruthi </td> <td> 30 </td> <td> 30 </td> </tr> <tr> <td> 4 </td> <td> Maruthi </td> <td> 35 </td> <td> 30 </td> </tr> </table> </body> </html>
OutPut (Click on above execute Button)

Attributes of Table Tag :

  1. Width : It is used to define width of the table.Its values interms of percentage like 10%,20% Etc.
  2. bgcolor : It is used to define color for the table.Its values interms of names of colours or in hexa decimals.
  3. Align : It is used to define alignment of values in the table.Its values like left ,right and center .
  4. border : It is used to set the border for the table.Its values starting from 0 to Infinity.
  5. colspan : it is used to make cell span more than one column.If you want make same cell value for more than one coloumn you can you this attribute.
  6. rowspan : it is used to make cell span more than one row .If you want make same cell value for more than one row you can you this attribute.

3. Using of Width ,bgcolor,Align and Border attribute of the Table.

CODE <html> <head> <title> Table Tag </title> <style type="text/css"> </style> </head> <body > <table width="50%" border="1" Align="center"> <caption> This is the table with Caption and Header tags. </caption> <tr bgcolor="grey"> <th> Sl.no </th> <th> Employee Name </th> <th> Salary in Thousands </th> <th> Age In Years </th> </tr> <tr> <td> 1 </td> <td> K.madhuSudhan rao </td> <td> 50 </td> <td> 27 </td> </tr> <tr bgcolor="grey"> <td> 2 </td> <td> Madhavi </td> <td> 40 </td> <td> 27 </td> </tr> <tr> <td> 3 </td> <td> Sruthi </td> <td> 30 </td> <td> 30 </td> </tr> <tr bgcolor="grey"> <td> 4 </td> <td> Maruthi </td> <td> 35 </td> <td> 30 </td> </tr> </table> </body> </html>
OutPut (Click on above execute Button)

4. Using of Width ,bgcolor,Align and Border attribute of the Table along with rowspan and colspan.

CODE <html> <head> <title> Table Tag </title> <style type="text/css"> </style> </head> <body > <table width="50%" border="1" Align="center"> <caption><b><u> This is the table with Caption and Header </u> </b> tags. </caption> <tr bgcolor="grey"> <th> Sl.no </th> <th> Employee Name </th> <th> Salary in Thousands </th> <th> Age In Years </th> </tr> <tr> <td> 1 </td> <td> K.madhuSudhan rao </td> <td> 50 </td> <td rowspan="2"> 27 </td> </tr> <tr bgcolor="grey"> <td> 2 </td> <td> Madhavi </td> <td> 40 </td> </tr> <tr> <td> 3 </td> <td> Sruthi </td> <td colspan="2"> 30 </td> </tr> <tr bgcolor="grey"> <td> 4 </td> <td> Maruthi </td> <td> 35 </td> <td> 30 </td> </tr> </table> </body> </html>
OutPut (Click on above execute Button)

Comments

Post a Comment

Popular posts from this blog

Image map or Map and Area tags

Anchor TAG Image Map or map Tag : An image map is an image with clickable areas. Sarting Tag : Ending tag : Attributes : It has different attributes like usemap name Area Tag : It contains Area tag Sarting Tag : Ending tag : Attributes : It has different attributes like shape coords href For this first take a notepad and copy code then save it with .html extension.Thats it your Program will be exected.if You want to check its effect within this website plese click on EXECUTE button. 1. Usemap attribute : Usemap att...
Post a Comment
Read more

Marquee Tag and Its Attributes

Marquee TAG Marquee Tag : Marquee is one of the important tags in Website creation .it is generally used to scrooling the content on the webpage .For example : in our regular innovations Website i use this for showing latest updates on my website. Sarting Tag : Ending tag : Attributes : It has different attributes like Direction Height Width Behavior Scrolldelay Scrollamount Hspace Vspace Loop Bgcolor Id & Hovering effects ...
Post a Comment
Read more

Fieldset and Pre Tags in HTML with Live execution

Fieldset Tag in HTML Fieldset & Pre Tags in HTML : 1. Fieldset Tag : is used for grouping related form elements in a box.It is used to give user a clear view about Content. Starting tag : Ending tag : 2. Legend Tag : Legend tag is used to give title for Fieldset. Starting tag : Ending tag : 3. Pre Tag : Pre tag is used to set alignment of your web page as coded line wise . Starting tag : Ending tag : For this first take a notepad and copy code then save it with .html extension.Thats it your Program will be exected.if You want to check its effect within this website plese click on EXECUTE button. CODE Fieldset ,Pre TAGs Login Page User Name : Password : OutPut (...
Post a Comment
Read more