PROJECT CODE

                                            The Developers Choice!!!!
                                                                                                            Home | About Us | Contact Us

HTML TUTORIALS

Lecture15 : Tables

What is output of HTML Table

First Name Last Name Mark
Ramesh Kumar 67%
Sachin Pandey 62%
Saurabh Dev 59%

What is HTML Table
The <table> </table> element has four sub-elements : Table Row <tr> </tr>, Table Data <td> </td>, Table Heading <th> </th> and Caption <caption> </caption>. The Table Row elements usually contain Table Header elements or Table Data elements. The Table Header elements or Table Data elements can contain several of the body elements which allow for rich formatting of the data in the table. The <td> tag are the data containers which hold the data in the table. The <td> tag can contain all sorts of HTML elements like text, images, lists, other tables, etc.
How to use HTML Table
Table are used a great dealing the creation of web pages. They allow you to create boundaries that make positioning easier. They are great for formatting form
How to implement HTML Table
Example :


Output :
Ramesh Kumar 67%
Sachin Pandey 61%
Harsh Dixit 71%
How to implement Border Attribute in HTML Table

  • If you do not define a border for the table, it will be show output without borders.
Example :Border without CSS property



Output :
Ramesh Kumar 67%
Sachin Pandey 61%
Harsh Dixit 71%

Example :Border with CSS property



Output :
Ramesh Kumar 67%
Sachin Pandey 61%
Harsh Dixit 71%
How to implement Collapsed Border in HTML Table
  • If you want the collapse border into one border, add border-collapse in CSS:
Example : Collapse Border With CSS property


Output :
Collapse
How to implement Cell Padding in HTML Tables
  • Cell padding define the space between the cell content and its borders. If you do not define a padding, the table cells will be show output without padding. To set the padding, use the CSS padding property:
Example : Cell Padding with CSS property


Output :
Padding
How to implement Heading in HTML Tables
  • Table headings are defined with the <th> tag. By default, all major browsers display table headings as bold and centered:
Example : Heading With CSS property


Output :
Heading CSS


Example :Heading With text-align CSS property

Output :
HeadingAlign
How to implement Cell Spacing in HTML Table
  • Cell spacing define the space between the cells. To set the cell spacing for the table, use the CSS border-spacing property:

Example : Cell Spacing CSS property


Output :
Cellspacing
How to implement <caption> Tag HTML Table
  • Define caption for table
Example :


Output :
CaptionTag
How to implement <colgroup> and <col> Tag in HTML Table
  • It define a group of one or more columns in a table for formatting
  • It Define column properties for each column within a <colgroup> element
Example :


Output :
Colgroup
How to implement <thead>, <tbody> and <tfoot> Tag HTML Table
  • Groups the header content in a table
  • Groups the body content in a table
  • Groups the footer content in a table
Example :


Output :
Headbodyfooter
   
All Rights Reserved with Project code