Friday, 9 August 2013

table creation in html with examples

by manoharkakarla on 01:07 No comments
<table> - Creation:
  • Table means ordered representation of data as rows and columns.
  • By using <table> tag we creates the table.
  • <table> tag contains other tags to represent rows and columns.
  • <tr> used to create rows.
  • <td> used to create columns.
  • <th> used to create header in the table.
  • <caption>  represents the title of the table.
  • <thead><tbody><tfoot> used to create different sections with in the table.
Syntax:
                  <table>
                                 <tr><td>row1 - column1</td><td>row1 -column2</td></tr>
                                 <tr><td>row2 - column1</td><td>row2 -column2</td></tr>
                 <table>
Note: Row contains any number of columns but vise-verse not possible.
Example1: Simple Table Creation                          
                   <html>
                         <head>
                                <title>Simple Table</title>
                          </head>
                         <body>
                                          <table align="center">
                                                       <tr>
                                                               <td>Name</td>
                                                               <td>Age</td> 
                                                               <td>RollNo:</td>
                                                       </tr>
                                                       <tr>
                                                              <td>kumar</td>
                                                              <td>27</td>
                                                              <td>233</td>
                                                        </tr>
                                                       <tr>
                                                              <td>srinivas</td>
                                                              <td>24</td>
                                                              <td>234</td>
                                                       </tr>
                                                       <tr>
                                                              <td>ravi</td>
                                                              <td>23</td>
                                                              <td>295</td>
                                                       </tr>
                                                       <tr>
                                                              <td>surya</td>
                                                              <td>22</td>
                                                              <td>236</td>
                                                       </tr>
                                          </table>
                      </body>
              </html>
OUTPUT:

Simple table contains five rows and each row contain three columns.
   
Create table with title using <caption> tag:
  • <caption> tag creates title.
Example2:
                   <html>
                         <head>
                                <title>Simple Table</title>
                          </head>
                         <body>
                                          <table align="center">
                                                      <caption>Student Details</caption>
                                                       <tr><td>Name</td><td>Age</td><td>College</td></tr>
                                                       <tr><td>Manohar</td><td>26</td><td>smm</td></tr>
                                                      <tr><td>Manohar</td><td>26</td><td>smm</td></tr>
                                                      <tr><td>Manohar</td><td>26</td><td>smm</td></tr>
                                          </table>
                      </body>
              </html>
 OUTPUT:

It creates table title as "Student Details".
Table creation with attributes:
                                                    Simple Attributes of table
                                              align="left" or "center"or "right"
                                              border="number"
                                              width="%number" or "number pixels"
                                              cellpadding="number"
                                              cellspacing="number"
align : it indicates alignment of table.
border: it indicates border width ,by default border width "0".
width: it indicates table width.
cellpadding: It add's space with in the cell.
cellspacing: It indicates space between cells.
Example3: WIDTH attribute

             <html>
                    <head>
                            <title>Table with attribute</title>
                   </head>
               <body>
                <table  align="center" width="50%">
                                 <caption>Student Details</caption>
                                 <tr><td>Name</td><td>Age</td><td>College</td></tr>
                                 <tr><td>Manohar</td><td>26</td><td>smm</td></tr>
                                 <tr><td>Manohar</td><td>26</td><td>smm</td></tr>
                                 <tr><td>Manohar</td><td>26</td><td>smm</td></tr>
                   </table>
              </body>
            </html>
OUTPUT:

  •  In Above example we given width as 50% .
  • When compare to the previous image width get increased.
Now width in pixels:

             <html>
                    <head>
                            <title>Table with attribute</title>
                   </head>
               <body>
                <table  align="center" width="300px">
                                 <caption>Student Details</caption>
                                 <tr><td>Name</td><td>Age</td><td>College</td></tr>
                                 <tr><td>Manohar</td><td>26</td><td>smm</td></tr>
                                 <tr><td>Manohar</td><td>26</td><td>smm</td></tr>
                                 <tr><td>Manohar</td><td>26</td><td>smm</td></tr>
                   </table>
              </body>
            </html>
OUTPUT:
  • Here the table generated with width of 300px.
  • The table width varies with reference to width tag.

Example4: BORDER attribute:
By using border attribute we change the thickness of border.
             <html>
                    <head>
                            <title>Table with attribute</title>
                   </head>
               <body>
                <table  align="center" width="300px" border="1">
                                 <caption>Student Details</caption>
                                 <tr><td>Name</td><td>Age</td><td>College</td></tr>
                                 <tr><td>Manohar</td><td>26</td><td>smm</td></tr>
                                 <tr><td>Manohar</td><td>26</td><td>smm</td></tr>
                                 <tr><td>Manohar</td><td>26</td><td>smm</td></tr>
                   </table>
              </body>
            </html>
OUTPUT:
  • Compare with the above diagram  border size varies.
Click here for more  Examples with border=2 and border=4

Example4: CELLPADDING attribute:
  • It create equal space in all cell's in the table
  • "cellpadding" attribute is used in table tag.
               <html>
                    <head>
                            <title>Table with attribute</title>
                   </head>
                   <body>
                            <table  align="center" width="300px" border="1" cellpadding="10">
                                 <caption>Student Details</caption>
                                 <tr><td>Name</td><td>Age</td><td>College</td></tr>
                                 <tr><td>Manohar</td><td>26</td><td>smm</td></tr>
                                 <tr><td>Manohar</td><td>26</td><td>smm</td></tr>
                                 <tr><td>Manohar</td><td>26</td><td>smm</td></tr>
                       </table>
                </body>
             </html>
OUTPUT: before cell padding output screen

After cellpadding output screen

In above screen cellpadding create equal space in all cells
Example5: CELLSPACING attribute
  • CELLSPACING is used to create space between cell's
              <html>
                    <head>
                            <title>Table with attribute</title>
                   </head>
                   <body>
                            <table  align="center" width="300px" border="1" cellspacing="10"                                                          bgColor="gray" borderColor="black">
                                 <caption>Student Details</caption>
                                 <tr><td>Name</td><td>Age</td><td>College</td></tr>
                                 <tr><td>Manohar</td><td>26</td><td>smm</td></tr>
                                 <tr><td>Manohar</td><td>26</td><td>smm</td></tr>
                                 <tr><td>Manohar</td><td>26</td><td>smm</td></tr>
                   </table>
              </body>
            </html>
OUTPUT:

Above output clearly shows that every cell separated by equal space.


0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)