Html - Tables

 A table is an arrangement of data in rows and columns, or possibly in more complex structure.Tables are widely used in communication, research, and data analysis.

  • Tables are useful for various tasks such as presenting text information and numerical data.
  • Table can be used to compare two or more items in tabular form layout.
  • Tables are used to create databases.

Defining Tables In HTML

An HTML table is defined with the "table" tag. Each table row is defined with "tr" tag. A table is defined with the "th" tag. By default tables heading are bolt and centered. A table data/cell  is defined with the "td" tag. 

<!DOCTYPE html> 
<html> 

<body> 

<table style="width:100%"> 
<tr> 
<th>Firstname</th> 
<th>Lastname</th> 
<th>Age</th> 
</tr> 
<tr> 
<td>Priya</td> 
<td>Sharma</td> 
<td>24</td> 
</tr> 
<tr> 
<td>Arun</td> 
<td>Singh</td> 
<td>32</td> 
</tr> 
<tr> 
<td>Sam</td> 
<td>Watson</td> 
<td>41</td> 
</tr> 
</table> 

</body>

Output:


Important Table Options in HTML:

1.Adding a Border to a HTML Table:

A border is set using the CSS body property. If we do not specify border for the table, it will displayed without borders. 

<!DOCTYPE html> 

<html> 

<head> 

<style> 

table, th, td { 

border: 1px solid black; 

} 

</style> 

</head> 

<body> 

<table style="width:100%"> 

<tr> 

<th>Firstname</th> 

<th>Lastname</th> 

<th>Age</th> 

</tr> 

<tr> 

<td>Priya</td> 

<td>Sharma</td> 

<td>24</td> 

</tr> 

<tr> 

<td>Arun</td> 

<td>Singh</td> 

<td>32</td> 

</tr> 

<tr> 

<td>Sam</td> 

<td>Watson</td> 

<td>41</td> 

</tr> 

</table> 

</body> 

</html> 

Output:


2. Adding Collapsed Borders in a HTML Table: For borders to collapse into one border, add the CSS border-collapse property.

<!DOCTYPE html> 
<html> 

<head> 
<style> 
table, th, td { 
border: 1px solid black; 
border-collapse: collapse; 
} 
</style> 
</head> 

<body> 

<table style="width:100%"> 
<tr> 
<th>Firstname</th> 
<th>Lastname</th> 
<th>Age</th> 
</tr> 
<tr> 
<td>Priya</td> 
<td>Sharma</td> 
<td>24</td> 
</tr> 
<tr> 
<td>Arun</td> 
<td>Singh</td> 
<td>32</td> 
</tr> 
<tr> 
<td>Sam</td> 
<td>Watson</td> 
<td>41</td> 
</tr> 
</table> 
</body> 

</html> 


Output:


3. Adding Cell Padding in a HTML Table: Cell padding specifies the space between the cell content and its borders.If we do not specify a padding, the table cells will be displayed without padding.

<!DOCTYPE html> 
<html> 

<head> 
<style> 
table, th, td { 
border: 1px solid black; 
border-collapse: collapse; 
} 
th, td { 
padding: 20px; 
} 
</style> 
</head> 

<body> 

<table style="width:100%"> 
<tr> 
<th>Firstname</th> 
<th>Lastname</th> 
<th>Age</th> 
</tr> 
<tr> 
<td>Priya</td> 
<td>Sharma</td> 
<td>24</td> 
</tr> 
<tr> 
<td>Arun</td> 
<td>Singh</td> 
<td>32</td> 
</tr> 
<tr> 
<td>Sam</td> 
<td>Watson</td> 
<td>41</td> 
</tr> 
</table> 
</body> 

</html> 

Output: 


4. Adding Left Align Headings in a HTML Table : By default the table headings are bold and centered. To left-align the table headings,we must use the CSS text-align property.

<html> 

<head> 
<style> 
table, th, td { 
border: 1px solid black; 
border-collapse: collapse; 
} 
th, td { 
padding: 20px; 
} 
th { 
text-align: left; 
} 
</style> 
</head> 

<body> 

<table style="width:100%"> 
<tr> 
<th>Firstname</th> 
<th>Lastname</th> 
<th>Age</th> 
</tr> 
<tr> 
<td>Priya</td> 
<td>Sharma</td> 
<td>24</td> 
</tr> 
<tr> 
<td>Arun</td> 
<td>Singh</td> 
<td>32</td> 
</tr> 
<tr> 
<td>Sam</td> 
<td>Watson</td> 
<td>41</td> 
</tr> 
</table> 
</body> 

</html> 

Output: 

5. Adding Border Spacing in a HTML Table: Border spacing specifies the space between the cells. To set the border spacing for a table,we must use the CSS border-spacing property.

<html> 
<head> 
<style> 
table, th, td { 
border: 1px solid black; 
} 
table { 
border-spacing: 5px; 
} 
</style> 
</head> 
<body> 
<table style="width:100%"> 
<tr> 
<th>Firstname</th> 
<th>Lastname</th> 
<th>Age</th> 
</tr> 
<tr> 
<td>Priya</td> 
<td>Sharma</td> 
<td>24</td> 
</tr> 
<tr> 
<td>Arun</td> 
<td>Singh</td> 
<td>32</td> 
</tr> 
<tr> 
<td>Sam</td> 
<td>Watson</td> 
<td>41</td> 
</tr> 
</table> 
</body> 
</html> 

Output:


6. Adding Cells that Span Many Columns in HTML Tables : To make a cell span more than one column, we must use the colspan attribute.

<!DOCTYPE html> 
<html> 

<head> 
<style> 
table, th, td { 
border: 1px solid black; 
border-collapse: collapse; 
} 
th, td { 
padding: 5px; 
text-align: left; 
} 
</style> 
</head> 

<body> 

<h2>Cell that spans two columns:</h2> 
<table style="width:100%"> 
<tr> 
<th>Name</th> 
<th colspan="2">Telephone</th> 
</tr> 
<tr> 
<td>Vikas Rawat</td> 
<td>9125577854</td> 
<td>8565557785</td> 
</tr> 
</table> 
</body> 

</html> 

Output:


7. Adding Cells that Span Many Rows in HTML Tables: To make a cell span more than one row,we must use the rowspan attribute.

<!DOCTYPE html> 
<html> 

<head> 
<style> 
table, th, td { 
border: 1px solid black; 
border-collapse: collapse; 
} 
th, td { 
padding: 5px; 
text-align: left; 
} 
</style> 
</head> 

<body> 

<h2>Cell that spans two rows:</h2> 
<table style="width:100%"> 
<tr> 
<th>Name:</th> 
<td>Vikas Rawat</td> 
</tr> 
<tr> 
<th rowspan="2">Telephone:</th> 
<td>9125577854</td> 
</tr> 
<tr> 
<td>8565557785</td> 
</tr> 
</table> 
</body> 

</html> 

Output:

8. Adding a Caption in a HTML Table: To add a caption to a table, we must use the “caption” tag.

<html> 

<head> 
<style> 
table, th, td { 
border: 1px solid black; 
border-collapse: collapse; 
} 
th, td { 
padding: 20px; 
} 
th { 
text-align: left; 
} 
</style> 
</head> 

<body> 

<table style="width:100%"> 
<caption>DETAILS</caption> 
<tr> 
<th>Firstname</th> 
<th>Lastname</th> 
<th>Age</th> 
</tr> 
<tr> 
<td>Priya</td> 
<td>Sharma</td> 
<td>24</td> 
</tr> 
<tr> 
<td>Arun</td> 
<td>Singh</td> 
<td>32</td> 
</tr> 
<tr> 
<td>Sam</td> 
<td>Watson</td> 
<td>41</td> 
</tr> 
</table> 
</body> 

</html> 

Output:


9. Adding a Background Color To a Table in HTML: A color can be added as a background in HTML table using the “background-color” option.

<!DOCTYPE html> 
<html> 

<head> 
<style> 
table, th, td { 
border: 1px solid black; 
border-collapse: collapse; 
} 
th, td { 
padding: 5px; 
text-align: left; 
} 
table#t01 { 
width: 100%; 
background-color: #f2f2d1; 
} 
</style> 
</head> 

<body> 

<table style="width:100%"> 
<tr> 
<th>Firstname</th> 
<th>Lastname</th> 
<th>Age</th> 
</tr> 
<tr> 
<td>Priya</td> 
<td>Sharma</td> 
<td>24</td> 
</tr> 
<tr> 
<td>Arun</td> 
<td>Singh</td> 
<td>32</td> 
</tr> 
<tr> 
<td>Sam</td> 
<td>Watson</td> 
<td>41</td> 
</tr> 
</table> 

<br /> 
<br /> 

<table id="t01"> 
<tr> 
<th>Firstname</th> 
<th>Lastname</th> 
<th>Age</th> 
</tr> 
<tr> 
<td>Priya</td> 
<td>Sharma</td> 
<td>24</td> 
</tr> 
<tr> 
<td>Arun</td> 
<td>Singh</td> 
<td>32</td> 
</tr> 
<tr> 
<td>Sam</td> 
<td>Watson</td> 
<td>41</td> 

</tr> 
</table> 
</body> 

</html> 

Output:



10. Creating Nested Tables in HTML: Nesting tables simply means making a Table inside another Table. Nesting tables can lead to complex tables layouts, which are visually interesting and have the potential of introducing errors.

<!DOCTYPE html> 
<html> 

<body> 
<table border=5 bordercolor=black> 
<tr> 
<td> 
Fisrt Column of Outer Table 
</td> 
<td> 
<table border=5 bordercolor=grey> 
<tr> 
<td> 
First row of Inner Table 
</td> 
</tr> 
<tr> 
<td> 
Second row of Inner Table 
</td> 
</tr> 
</table> 
</td> 
</tr> 
</table> 
</body> 
</html> 

Output:




Comments

Post a Comment

Popular posts from this blog

HTML Images

Image
 HTML IMAGE:-    HTML img  tag is used to display image on the web page. HTML img tag is an empty tag that contains attributes only, closing tags are not used in HTML image element. Let's see an example of HTML image. < h2 > HTML Image Example </ h2 >    < img   src = "good_morning.jpg"   alt = "Good Morning Friends" />   Attributes of HTML tags:- The src and alt are the two most important attributes of HTML image tag are given below-: (1)  ALT-:  The alt attribute defines an alternate text for the image, that can be displayed. The value of the alt attribute describes the image in words. The alt attribute is considered good for SEO prospective. (2)  SRC-: It is a necessary attribute that describes the source or path of the image. It instructs the browser where to look for the image on the server. The location of the image may be on the same directory or another service. There are two ways...
Read more

Html - Text Links, Image Links, E-mail Links

Image
  HTML - TEXT LINKS   A webpage can contain various links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks. Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images. Thus you can create hyperlinks using text or images available on a webpage. Linking Documents A link is specified using HTML tag <a>. This tag is called  anchor tag  and anything between the opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part to reach to the linked document. Following is the simple syntax to use <a> tag. <a href = "Document URL" ... attributes-list>Link Text</a> The target Attribute We have used  target  attribute in our previous example. This attribute is used to specify the location where linked document is opened. Following are the possible options − Sr.No Option & Description 1 _blank ...
Read more