HTML Tables are used to make an arrangement of data in tabular format to add images, links, preformatted text, etc in a meaning full manner by the help of rows and columns to display the content of HTML document on the webpage. HTML Tables are created using <table> tags. Let us understand HTML Tables in detail.
Syntax of HTML Table
The <table> tag are used to define HTML Tables and to represent the HTML document information.
The <tr> tag are used to define rows inside the HTML Tables, and the <th> tag are used to define the header of the HTML Tables which are generally bold and centered.
The <td> tag is used to define the data and also to create the column inside the <tr> tags which are generally aligned in the left side of the row.
The <caption> tag is used to define the content of the table caption. The <tbody> tag is used to define the content of the table body.
Features of HTML Tables
- The HTML Table tag supports Global and Event Attributes.
- The HTML Table use <td> elements to attach images , list and text etc.
- The HTML Table use variety of Attributes to structure the rows and columns.
- The HTML Table use rowspan to merge two or more rows and colspan to merge two or more column in a single cell of the table.
Basic Example of HTML Table
Use of row and column in a tabular form representing data and value :
<!DOCTYPE html> <html> <body> <h2>Example of HTML TABLE</h2> <table style="width:75%"> <tr> <th>Website</th> <th>Topic</th> <th>Sub-topic</th> </tr> <tr> <td>wikipedia</td> <td>programming</td> <td>history of programing</td> </tr> <tr> <td>Codebun</td> <td>HTML</td> <td>Use of editor in html</td> </tr> </table> </body> </html>
output:
Use of Table tag in HTML
1. Border in HTML Table: It is used by applying CSS property in HTML elements. you can change the spacing of the border by changing its value.
Example:
<!DOCTYPE html> <html> <head> <title>Border in HTML Tables</title> </head> <body> <table border = "1 "> <tr> <td>LANGUAGE- python</td> <td>LANGUAGE- c programming</td> </tr> <tr> <td>LANGUAGE- JAVA</td> <td>LANGUAGE- C++</td> </tr> </table> </body> </html>
Output:
2. Cell padding in HTML Table: It is used by applying HTML Attributes or CSS property to give space between the border and the content of the cell.
Example:
<html> <head> <title>HTML Table Cellpadding</title> </head> <body> <table border = "1" cellpadding = "20"> <tr> <th>Name</th> <th>Roll no.</th> </tr> <tr> <td>Krishna</td> <td>011</td> </tr> <tr> <td>Shahbaz</td> <td>017</td> </tr> <tr> <td>Aman</td> <td>016</td> </tr> </table> </body> </html>
output:
3. Captions in HTML Table: It is used as a title or heading on the top of the table by using the <caption> tag in the HTML document.
Example:
<!DOCTYPE html> <html> <head> <title>HTML Table</title> <style> table { width: 500px; border-collapse: collapse; } table, th, td { border: 1px solid black; } th, td { padding: 10px; } </style> </head> <body> <h2>Example of Caption in HTML Table</h2> <table> <caption>GENIUS RECORDS</caption> <tr> <th>No.</th> <th> Name</th> <th>IQ</th> </tr> <tr> <td>1</td> <td>Alan Turing</td> <td>185</td> </tr> <tr> <td>2</td> <td>Srinivasa Ramanujan</td> <td>185</td> </tr> </table> </body> </html
output: