How to Create Tables in HTML?

Representing the data in the form table is one of the traditions approach of the data management data is usually organized in terms of rows and columns. Table is one of most useful HTML constraint many of best design sites in the internet are around table. To create a table it follow three Create structure of the table using < table > tag Syntax : - < table >                    ----------------                   ----------------                  </table> Divide table into multiple rows using < /tr> tag. Syntax:   < table>                < tr > -------------< /tr>                < tr > ------------- </tr>                < tr > ------------- </tr>                </table> < tr>tag corresponds to a simgle of a given table. Data supplied within these tage are usually displayed in a particular row of a table < tr > tag may contain <th> and <td> tag select the row and insert data using < td > tag. Syntax:- < table >       < tr>         <th>         <th>       </tr>       <tr>         <td>         <td>       </tr>       <tr>         <td>         <td>       </tr> </table>  <td> tag inserts data into each block of the table. <th>tag:- This tag is used to set the heading of available columns. The major difference between < td> and <th> tags are that <th> tag makes the data “Bold” and places it at the centre of the table block. On the other hand <td> insert data into the block in the normal font and its position depends on its attribute. Attributes of <table> tag:-   Border:- It sets width of the border around the table cells. The default value is “0” i.e.it displays the table with no border.           Syntax:- < table border = “5” > ………….< /table >     Bordercolor : It sets the color around table cells. By default it colour is black.           Syntax: < table border = “5” bordercolor=”red”>       bg color:- a)    for table back ground:- To set color for table.           Syntax:- < table bgcolor = “ ………..” > b)    for table row :- To give an individual color for each row.           Syntax:- < table>                          < tr bgcolor= “……….”>                          < / table > c)    for a single cell:- To give individual color for each cell.           Syntax:- < table>                          < tr>                          <td bgcolor =“…………”>                          </tr>                          < /table>       Background:-  Using this attribute the visualization of the table can be further enhanced by setting an image (or) other graphics as background to the table. It usually carries “URL” path corresponding to the given image.     Align:- It changes the alignment of the table in the browse window with the values “left , right and centre”, default value is “left alignment”. It is usually performed horizontally. It also aligns a row (or) heading or single cell in the table.           Eg:- < table align = “right”>                   <th align = “right”>      Valign:- It directs vertical alignment of data in a table row (or) table heading (or) for table cell with the values top, bottom and middle.    Height and width:- These attributes represent the size of the table in pixels by specifying height and width.           < table height = “250” width = “250”>     Cell padding:- It gives some amount space in between cell border and content.     Cell spacing:- It gives some amount space in between cells of the table.           <table cell padding = ‘5’ cell spacing =’3’>   Row span:- It combines two (or) more cells in horizontal (or) row wise.   Cell span:- It also merges two (or) more cells in column wise.    Advanced table elements:- Caption:- This optional element provides a string which contains the content the table. Eg: - < caption > string </ caption> The rows in a table can be grouped into one of the three divisions. <thead > …………..</thead> <tbody > ……..……</tbody> <tfoot > …………….</tfoot > This grouping is optional. When long tables extends over more than one page. The information in < thead> and < tfoot > can be automatically repeated in each page. Eg: < col group [span= “n”] (width = “n”)>……………..</col group> Columns within the table can be logically grouped together .Each group of columns can be designed difficult with which will be applied to all columns. A span indicates no of columns in the group. < col [span = “n”] [width= “n”] > ………………</col> The attributes of individual columns are set using the col elements. < html> < head >     < title> table < title> < /head>     < body >        < h1> sample table < /h1>        < table >        < tr>          < th > first row < th>          < th > second row </th>       </tr >       <tr>          < td > Some text </th>          < td > Some other text < / td>       < /tr >    < /body > < /html> Out Put: Eg: program for col span <html>   < head >      < title> colspan< /title>   < /head>   < body >       < table border = “5”>         <tr>           <th> name < /th>           <th>telephone < 1th>           < th cdspan=”2”>telephone </th>         </tr>         <tr>           <td>sasi</td>           <td>9876543210 < /td>           <td> 9081726354 < /td>        <tr>    </table>   </body> </html> Out Put: For row span: < html > < head >    < title > row span < /title> < / head> <body>    <table border = “5”>      <tr>        <th> Name </th>        <td>sai </td>      </tr>      <tr>          <th row span = “2”> telephone </th >          <td>9877777989</td>     </tr>    </table>  </body> </html> Out Put: