HTML-Booklet

The HTML tables permit web creators to orchestrate information like content, pictures, joins, different tables, and so on into lines and sections of cells. 

The HTML tables are made utilizing the <table> tag in which the <tr> tag is utilized to make table columns and <td> tag is utilized to make information cells. The components under <td> are ordinary and left adjusted as a matter of course.

Model 

<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = “3”>
<tr>
<td>Row , Column </td>
<td>Row , Column </td>
</tr>
<tr>
<td>Row , Column </td>
<td>Row , Column </td>
</tr>
</table>
</body>
</html>

Output:

Row , Column Row , Column
Row , Column Row , Column

Here, the outskirt is a quality of the <table> tag and it is utilized to put a fringe over all the phones. On the off chance that you needn’t bother with an outskirt, at that point you can utilize fringe = “0”. 

Table Heading 

Table heading can be characterized utilizing the <th> tag. This label will be put to supplant the <td> tag, which is utilized to speak to a real information cell. Typically you will put your top column as table heading as demonstrated as follows, else you can utilize <th> component in any line. Headings, which are characterized in <th> tag are focused and striking as a matter of course. 

Model 

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = “3”>
<tr>   
<th>name</th>  
<th>D.O.B</th>           
</tr>
<tr>           
<td>jhon</td>            
<td>06/08/1997</td>           
</tr>          
<tr>
<td>jashon</td>
<td>06/09/1998</td>
</tr>
</table>
</body>
</html>

Output:

     name D.O.B
      jhon 06/08/1997
     jashon 06/09/1998

Cell padding and Cell spacing Attributes 

There are two traits called cell padding and cell spacing which you will use to alter the void area in your table cells. The cell spacing property characterizes space between table cells, while cell padding speaks to the separation between cell fringes and the substance inside a phone. 

Model 

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cell padding and Cell spacing</title>
</head>
<body>
<table border = “3” cellpadding = “5” cellspacing = “5”>
<tr>         
<th>name</th>  
<th>D.O.B</th>         
</tr>         
<tr>  
<td>jhon</td>   
<td>06/08/1997</td>
</tr>     
<tr>          
<td>jashon</td>          
<td>06/09/1998</td>           
</tr>
</table>
</body>
</html>

Output:

name D.O.B
jhon 06/08/1997
jashon 06/09/1998

Col span and Row span Attributes 

You will utilize the col span credit on the off chance that you need to blend at least two sections into a solitary segment. Comparable way you will utilize row span on the off chance that you need to consolidate at least two columns. 

Model 

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = “3”>
<tr>
<th>Column one</th>
<th>Column two</th>
<th>Column Three</th>  
</tr>    
<tr>
<td rowspan = “2>Row 1 Cell 1</td>
<td>Row one  Cell  two</td>
<td>Row one Cell three</td>   
</tr>    
<tr>
<td>Row two Cell two</td>
 <td>Row two Cell three</td>   
</tr>    
<tr>
<td colspan = “3”>Row three Cell one</td>             
</tr>
</table>
</body>
</html>

Output:

Column one Column two Column Three
Row 1 Cell 1 Row one  Cell  two Row one Cell three
Row two Cell two Row two Cell three
Row three Cell one

Tables Backgrounds 

You can set table foundation utilizing one of the accompanying two different ways.

bg color trait − You can set foundation shading for the entire table or only for one cell. 

foundation trait − You can set the foundation picture for the entire table or only for one cell. 

You can likewise set outskirt shading additionally utilizing border color trait. 

Note − The bg color, foundation, and border color traits deplored in HTML 5. Try not to utilize these traits. 

Model 

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = “3” bordercolor = “black” bgcolor = “red”>
<tr>
<th>Column one</th>
<th>Column two</th>
<th>Column Three</th>  
</tr>   
<tr>
<td rowspan = “2”>Row 1 Cell 1</td>
<td>Row one  Cell  two</td>
<td>Row one Cell three</td>    
</tr>     
<tr>
<td>Row two Cell two</td>
<td>Row two Cell three</td>    
</tr>    
<tr>
<td colspan = “3”>Row three Cell one</td>               
</tr>
</table>
</body>
</html>

Output:

Column one Column two Column Three
Row 1 Cell 1 Row one  Cell  two Row one Cell three
Row two Cell two Row two Cell three
Row three Cell one


Table Height and Width 

You can set a table width and tallness utilizing width and stature properties. You can indicate table width or stature as far as pixels or as far as level of accessible screen zone. 

Model 

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Height and Width</title>
</head>
<body>
<table border = “3” width = “300” height = “100”>   
<tr>
<th>Column one</th>
<th>Column two</th>
<th>Column Three</th>   
</tr>    
<tr>
<td rowspan = “2”>Row 1 Cell 1</td>
<td>Row one  Cell  two</td>
<td>Row one Cell three</td>
</tr>     
<tr>
<td>Row two Cell two</td>
<td>Row two Cell three</td>  
</tr>    
<tr>            
<td colspan = “3”>Row three Cell one</td>           
</tr>
</table>
</body>
</html>

Output:

Column one Column two Column Three
Row 1 Cell 1 Row one  Cell  two Row one Cell three
Row two Cell two Row two Cell three
Row three Cell one


Table Caption 

The subtitle label will fill in as a title or clarification for the table and it appears at the highest point of the table. This tag is belittled in more up to date forms of HTML/XHTML. 

Model 

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = “3” width = “300” height = “100”>
<caption>This is the caption</caption>   
<tr>
<th>Column one</th>
<th>Column two</th>
<th>Column Three</th>   
</tr>    
<tr>
<td rowspan = “2”>Row 1 Cell 1</td>
<td>Row one  Cell  two</td>
<td>Row one Cell three</td>  
</tr>   
<tr>
<td>Row two Cell two</td>
<td>Row two Cell three</td>   
</tr>    
<tr>
<td colspan = “3”>Row three Cell one</td>           
</tr>
</table>
</body>
</html>

Output:

This is the caption
Column one Column two Column Three
Row 1 Cell 1 Row one  Cell  two Row one Cell three
Row two Cell two Row two Cell three
Row three Cell one


Table Header, Body, and Footer 

Tables can be separated into three parts a header, a body, and a foot. The head and foot are somewhat like headers and footers in a word-prepared record that continue as before for each page, while the body is the principle content holder of the table. 

The three components for isolating the head, body, and foot of a table are:

<thead> − to make a different table header. 

<tbody> − to demonstrate the principle body of the table. 

<tfoot> − to make a different table footer. 

A table may contain a few <tbody> components to demonstrate various pages or gatherings of information. In any case, it is eminent that <thead> and <tfoot> labels ought to show up before <tbody> 

Settled Tables 

You can utilize one table inside another table. Not just tables you can utilize practically all the labels inside the table information tag <td>. 

Model 

<!DOCTYPE html>
<html>
<head>
<title>HTML Settled Tables</title>
</head>
<body>
<table border = “3” width = “100%”>      
<tr>
<td>
<tr>
<table border = “3” width = “100%”>
<th>name</th>
<th>D.O.B</th>  
</tr>   
<tr>
<td>jhon</td>
<td>06/08/1997</td>  
</tr>   
<tr>
<td>jashon</td>
<td>06/09/1998</td>           
</tr>
</table>
</body>
</html>

Output:

name  D.O.B
jhon 06/08/1997 jashon 06/09/1998

 

 

 

Share