- \n
- The schema of the databases is well defined with the help of tables.<\/li>\n
- It helps in easy comparison of lots of data available.<\/li>\n
- Tables help in the systematic presentation of information and content available.<\/li>\n
- Tables consist of rows and columns and can contain text, images, links, other tables, etc.<\/li>\n<\/ul>\n
![\"Html](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/Html-Tables.jpg\")
<\/a><\/p>\nDefining tables in HTML<\/h2>\n
The <table> element is used to create a table in HTML. Table header is defined by <th> and by default, the table headings are bold and centered. The <tr> tag is used for rows and <td> is used to define table data or cell.<\/p>\n
For example,<\/p>\n
Code-<\/strong><\/p>\n
<!DOCTYPE html> \r\n<html> \r\n<body> \r\n <table style=\"width:100%\"> \r\n <tr> \r\n <th>FirstName<\/th> \r\n <th>LastName<\/th> \r\n <th>Age<\/th> \r\n <\/tr> \r\n <tr> \r\n <td>Shreya<\/td> \r\n <td>Mishra<\/td> \r\n <td>24<\/td> \r\n <\/tr> \r\n <tr> \r\n <td>Jai<\/td> \r\n <td>Singh<\/td> \r\n <td>32<\/td> \r\n <\/tr> \r\n <tr> \r\n <td>Philip<\/td> \r\n <td>Watson<\/td> \r\n <td>41<\/td> \r\n <\/tr> \r\n <\/table> \r\n<\/body> \r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
![\"create](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/pasted-image-0.png\")
<\/a><\/p>\n1. Adding border<\/h3>\n
The CSS border property is used for setting the border.<\/p>\n
Code-<\/strong><\/p>\n
<!DOCTYPE html> \r\n<html>\r\n<head>\r\n<style>\r\n table, th, td {\r\n border: 1px solid black;\r\n}\r\n<\/style>\r\n<\/head> \r\n<body> \r\n <table style=\"width:100%\"> \r\n <tr> \r\n <th>FirstName<\/th> \r\n <th>LastName<\/th> \r\n <th>Age<\/th> \r\n <\/tr> \r\n <tr> \r\n <td>Shreya<\/td> \r\n <td>Mishra<\/td> \r\n <td>24<\/td> \r\n <\/tr> \r\n <tr> \r\n <td>Jai<\/td> \r\n <td>Singh<\/td> \r\n <td>32<\/td> \r\n <\/tr> \r\n <tr> \r\n <td>Philip<\/td> \r\n <td>Watson<\/td> \r\n <td>41<\/td> \r\n <\/tr> \r\n <\/table> \r\n<\/body> \r\n<\/html>\r\n<\/pre>\nOutput-<\/strong><\/p>\n
![\"\"](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/pasted-image-0-1.png\")
<\/a><\/p>\n2. HTML border-collapse<\/h3>\n
The border-collapse property of CSS is used for the borders to collapse into one border.<\/p>\n
Code-<\/strong><\/p>\n
<!DOCTYPE html> \r\n<html>\r\n<head>\r\n<style>\r\n table, th, td {\r\n border: 1px solid black;\r\n border-collapse: collapse;\r\n}\r\n<\/style>\r\n<\/head> \r\n<body> \r\n <table style=\"width:100%\"> \r\n <tr> \r\n <th>FirstName<\/th> \r\n <th>LastName<\/th> \r\n <th>Age<\/th> \r\n <\/tr> \r\n <tr> \r\n <td>Shreya<\/td> \r\n <td>Mishra<\/td> \r\n <td>24<\/td> \r\n <\/tr> \r\n <tr> \r\n <td>Jai<\/td> \r\n <td>Singh<\/td> \r\n <td>32<\/td> \r\n <\/tr> \r\n <tr> \r\n <td>Philip<\/td> \r\n <td>Watson<\/td> \r\n <td>41<\/td> \r\n <\/tr> \r\n <\/table> \r\n<\/body> \r\n<\/html>\r\n<\/pre>\nOutput-<\/strong><\/p>\n
![\"html](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/pasted-image-0-2.png\")
<\/a><\/p>\n3. HTML cell-padding<\/h3>\n
The padding property is used to specify the space between the data of the cell and its surrounding borders. For example,<\/p>\n
Code-<\/strong><\/p>\n
<!DOCTYPE html> \r\n<html>\r\n<head>\r\n<style>\r\n table, th, td {\r\n border: 1px solid black;\r\n border-collapse: collapse;\r\n}\r\nth,td{\r\n padding: 15px;\r\n}\r\n<\/style>\r\n<\/head> \r\n<body> \r\n <table style=\"width:100%\"> \r\n <tr> \r\n <th>FirstName<\/th> \r\n <th>LastName<\/th> \r\n <th>Age<\/th> \r\n <\/tr> \r\n <tr> \r\n <td>Shreya<\/td> \r\n <td>Mishra<\/td> \r\n <td>24<\/td> \r\n <\/tr> \r\n <tr> \r\n <td>Jai<\/td> \r\n <td>Singh<\/td> \r\n <td>32<\/td> \r\n <\/tr> \r\n <tr> \r\n <td>Philip<\/td> \r\n <td>Watson<\/td> \r\n <td>41<\/td> \r\n <\/tr> \r\n <\/table> \r\n<\/body> \r\n<\/html>\r\n\r\n<\/pre>\nOutput-<\/strong><\/p>\n
![\"html](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/pasted-image-0-3.png\")
<\/a><\/p>\n4. HTML Left-aligning table headings<\/h3>\n
The text-align property of CSS is used to align the table headings which is by default set at center. For example,<\/p>\n
Code-<\/strong><\/p>\n
<!DOCTYPE html> \r\n<html>\r\n<head>\r\n<style>\r\n table, th, td {\r\n border: 1px solid black;\r\n border-collapse: collapse;\r\n}\r\nth,td{\r\n padding: 15px;\r\n}\r\nth{\r\n text-align: left;\r\n}\r\n<\/style>\r\n<\/head> \r\n<body> \r\n <table style=\"width:100%\"> \r\n <tr> \r\n <th>FirstName<\/th> \r\n <th>LastName<\/th> \r\n <th>Age<\/th> \r\n <\/tr> \r\n <tr> \r\n <td>Shreya<\/td> \r\n <td>Mishra<\/td> \r\n <td>24<\/td> \r\n <\/tr> \r\n <tr> \r\n <td>Jai<\/td> \r\n <td>Singh<\/td> \r\n <td>32<\/td> \r\n <\/tr> \r\n <tr> \r\n <td>Philip<\/td> \r\n <td>Watson<\/td> \r\n <td>41<\/td> \r\n <\/tr> \r\n <\/table> \r\n<\/body>\r\n<\/pre>\nOutput-<\/strong><\/p>\n
![\"html](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/pasted-image-0-4.png\")
<\/a><\/p>\n5. Space between cells<\/h3>\n
The border-spacing property of CSS is used to specify the space between the cells\/columns of the table. For example<\/p>\n
Code-<\/strong><\/p>\n
<!DOCTYPE html> \r\n<html>\r\n<head>\r\n<style>\r\n table, th, td { \r\n border: 1px solid black; \r\n } \r\n table { \r\n border-spacing: 5px; \r\n } \r\n<\/style>\r\n<\/head> \r\n<body> \r\n <table style=\"width:100%\"> \r\n <tr> \r\n <th>FirstName<\/th> \r\n <th>LastName<\/th> \r\n <th>Age<\/th> \r\n <\/tr> \r\n <tr> \r\n <td>Shreya<\/td> \r\n <td>Mishra<\/td> \r\n <td>24<\/td> \r\n <\/tr> \r\n <tr> \r\n <td>Jai<\/td> \r\n <td>Singh<\/td> \r\n <td>32<\/td> \r\n <\/tr> \r\n <tr> \r\n <td>Philip<\/td> \r\n <td>Watson<\/td> \r\n <td>41<\/td> \r\n <\/tr> \r\n <\/table> \r\n<\/body> \r\n<\/html>\r\n<\/pre>\nOutput-<\/strong><\/p>\n
![\"html](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/pasted-image-0-5.png\")
<\/a><\/p>\n6. Special Style for one table<\/h3>\n
The id attribute can be used to add a special style to a particular table.<\/p>\n
Code-<\/strong><\/p>\n
<!DOCTYPE html> \r\n<html>\r\n<head>\r\n<style>\r\n table#tab1{\r\n width: 100%;\r\n background-color: #f1f1c1;\r\n}\r\n<\/style>\r\n<\/head> \r\n<body> \r\n <table id=\"tab1\"> \r\n <tr> \r\n <th>FirstName<\/th> \r\n <th>LastName<\/th> \r\n <th>Age<\/th> \r\n <\/tr> \r\n <tr> \r\n <td>Shreya<\/td> \r\n <td>Mishra<\/td> \r\n <td>24<\/td> \r\n <\/tr> \r\n <tr> \r\n <td>Jai<\/td> \r\n <td>Singh<\/td> \r\n <td>32<\/td> \r\n <\/tr> \r\n <tr> \r\n <td>Philip<\/td> \r\n <td>Watson<\/td> \r\n <td>41<\/td> \r\n <\/tr> \r\n <\/table> \r\n<\/body> \r\n<\/html>\r\n<\/pre>\nOutput-<\/strong><\/p>\n
![\"html](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/pasted-image-0-6.png\")
<\/a><\/p>\n7. Column and row spanning<\/h3>\n
To make a cell span through more than one column, the colspan attribute is useful, and to make a cell span through more than one row, the rowspan attribute is useful.<\/p>\n
For example,<\/p>\n
Code-<\/strong><\/p>\n
<!DOCTYPE html> \r\n<html> \r\n \r\n<head> \r\n <style> \r\n table, th, td { \r\n border: 1px solid black; \r\n border-collapse: collapse; \r\n } \r\n \r\n th, td { \r\n padding: 5px; \r\n text-align: left; \r\n } \r\n <\/style> \r\n<\/head> \r\n \r\n<body> \r\n \r\n <h2>Column Spanning<\/h2> \r\n <table style=\"width:100%\"> \r\n <tr> \r\n <th>Name<\/th> \r\n <th colspan=\"2\">Contact<\/th> \r\n <\/tr> \r\n <tr> \r\n <td>Susanne Christopher<\/td> \r\n <td>9125567854<\/td> \r\n <td>8765557785<\/td> \r\n <\/tr> \r\n <\/table> \r\n <h2>Rowspanning<\/h2> \r\n <table style=\"width:100%\"> \r\n <tr> \r\n <th>Name<\/th> \r\n <td>Susanne Christopher<\/td> \r\n <\/tr> \r\n <tr> \r\n <th rowspan=\"2\">Telephone<\/th> \r\n <td>9125567854<\/td> \r\n <\/tr> \r\n <tr> \r\n <td>8765557785<\/td> \r\n <\/tr> \r\n <\/table>\r\n<\/body> \r\n \r\n<\/html> \r\n<\/pre>\nOutput-<\/strong><\/p>\n
![\"html](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/pasted-image-0-7.png\")
<\/a><\/p>\n8. HTML Caption<\/h3>\n
The <caption> element is used to add a caption to the table. For example,<\/p>\n
Code-<\/strong><\/p>\n
<!DOCTYPE html> \r\n<html>\r\n<head>\r\n<style>\r\n table, th, td { \r\n border: 1px solid black; \r\n border-collapse: collapse; \r\n } \r\n \r\n th, td { \r\n padding: 20px; \r\n } \r\n \r\n th { \r\n text-align: left; \r\n } \r\n<\/style>\r\n<\/head> \r\n<body> \r\n <table style=\"width:100%\">\r\n <caption style=\"font-weight: bold;font-size: 25px\">Information<\/caption> \r\n <tr> \r\n <th>FirstName<\/th> \r\n <th>LastName<\/th> \r\n <th>Age<\/th> \r\n <\/tr> \r\n <tr> \r\n <td>Shreya<\/td> \r\n <td>Mishra<\/td> \r\n <td>24<\/td> \r\n <\/tr> \r\n <tr> \r\n <td>Jai<\/td> \r\n <td>Singh<\/td> \r\n <td>32<\/td> \r\n <\/tr> \r\n <tr> \r\n <td>Philip<\/td> \r\n <td>Watson<\/td> \r\n <td>41<\/td> \r\n <\/tr> \r\n <\/table> \r\n<\/body>\r\n<\/pre>\nOutput-<\/strong><\/p>\n
![\"html](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/pasted-image-0-8.png\")
<\/a><\/p>\n9. Background color<\/h3>\n
We can add Background color to a table in HTML using the background-color property of CSS. For example,<\/p>\n
Code-<\/strong><\/p>\n
<!DOCTYPE html> \r\n<html>\r\n<head>\r\n<style>\r\n table, th, td { \r\n border: 1px solid black; \r\n border-collapse: collapse;\r\n background-color: #e0c780; \r\n } \r\n \r\n th, td { \r\n padding: 20px; \r\n } \r\n \r\n th { \r\n text-align: left; \r\n } \r\n<\/style>\r\n<\/head> \r\n<body> \r\n <table style=\"width:100%\">\r\n <caption style=\"font-weight: bold;font-size: 25px\">Information<\/caption> \r\n <tr> \r\n <th>FirstName<\/th> \r\n <th>LastName<\/th> \r\n <th>Age<\/th> \r\n <\/tr> \r\n <tr> \r\n <td>Shreya<\/td> \r\n <td>Mishra<\/td> \r\n <td>24<\/td> \r\n <\/tr> \r\n <tr> \r\n <td>Jai<\/td> \r\n <td>Singh<\/td> \r\n <td>32<\/td> \r\n <\/tr> \r\n <tr> \r\n <td>Philip<\/td> \r\n <td>Watson<\/td> \r\n <td>41<\/td> \r\n <\/tr> \r\n <\/table> \r\n<\/body>\r\n<\/pre>\nOutput-<\/strong><\/p>\n
![\"html](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/pasted-image-0-9.png\")
<\/a><\/p>\nSimilarly, it is possible to add an image as the background.<\/p>\n
10. Nesting Tables<\/h3>\n
Nesting means one within another i.e., two or more tables within a single table. For example,<\/p>\n
Code-<\/strong><\/p>\n
<!DOCTYPE html> \r\n<html> \r\n<head>\r\n <style>\r\n #t1{\r\n padding: 10px;\r\n border-collapse: collapse;\r\n height: 200px;\r\n }\r\n #t2{\r\n padding: 10px;\r\n border-collapse: collapse;\r\n height: 200px;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body> \r\n <table id=\"t1\" border=\"3\"> \r\n <tr> \r\n <td> \r\n First Column\r\n <\/td> \r\n \r\n <td> \r\n <table id=\"t2\" border=3> \r\n <tr> \r\n <td> \r\n First row \r\n <\/td> \r\n <\/tr> \r\n <tr> \r\n <td> \r\n Second row \r\n <\/td> \r\n <\/tr> \r\n <\/table> \r\n <\/td> \r\n <\/tr> \r\n <\/table> \r\n<\/body> \r\n<\/html>\r\n<\/pre>\nOutput-<\/strong><\/p>\n
![\"html](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/pasted-image-0-10.png\")
<\/a><\/p>\nTable Header, Body, and Footer<\/h2>\n
We can define a table\u00a0 with a header and footer (that remains the same) and the body consisting of the main content. The tags are-<\/p>\n
- \n
- <thead> –<\/strong> It is to create the header.<\/li>\n
- <tbody> –<\/strong> This helps to create the main body part.<\/li>\n
- <tfoot> –<\/strong> It is to create the footer.<\/li>\n<\/ul>\n
A table can contain various <tbody> tags but only one <thead> and <tfoot>.
\nFor example,<\/p>\nCode-<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <title>Table<\/title>\r\n <style>\r\n table,tr,td{\r\n padding: 10px;\r\n border-collapse: collapse;\r\n }\r\n <\/style>\r\n <\/head> \r\n <body>\r\n <table border = \"1\" width = \"100%\">\r\n <thead>\r\n <tr>\r\n <td colspan = \"4\">Header<\/td>\r\n <\/tr>\r\n <\/thead>\r\n \r\n <tfoot>\r\n <tr>\r\n <td colspan = \"4\">Footer<\/td>\r\n <\/tr>\r\n <\/tfoot>\r\n \r\n <tbody>\r\n <tr>\r\n <td>Data 1<\/td>\r\n <td>Data 2<\/td>\r\n <td>Data 3<\/td>\r\n <td>Data 4<\/td>\r\n <\/tr>\r\n <\/tbody> \r\n <\/table>\r\n <\/body> \r\n<\/html>\r\n<\/pre>\nOutput-<\/strong><\/p>\n
![\"html](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/pasted-image-0-11.png\")
<\/a><\/p>\nTable Heading<\/h2>\n
The <th> tag is used to specify a heading to a table. By default, it is bold and centered. It can be used to replace the <td> tag.<\/p>\n
Code-<\/strong><\/p>\n
<!DOCTYPE html> \r\n<html>\r\n<head>\r\n<style>\r\n #tab1{\r\n border-collapse: collapse;\r\n border-spacing: 3px;\r\n }\r\n<\/style>\r\n<\/head> \r\n<body> \r\n <table id=\"tab1\" border=\"1px\" width=\"100%\"> \r\n <tr> \r\n <th>FirstName<\/th> \r\n <th>LastName<\/th> \r\n <th>Age<\/th> \r\n <\/tr> \r\n <tr> \r\n <td>Shreya<\/td> \r\n <td>Mishra<\/td> \r\n <td>24<\/td> \r\n <\/tr> \r\n <tr> \r\n <td>Jai<\/td> \r\n <td>Singh<\/td> \r\n <td>32<\/td> \r\n <\/tr> \r\n <tr> \r\n <td>Philip<\/td> \r\n <td>Watson<\/td> \r\n <td>41<\/td> \r\n <\/tr> \r\n <\/table> \r\n<\/body> \r\n<\/html>\r\n<\/pre>\nOutput-<\/strong><\/p>\n
- <tbody> –<\/strong> This helps to create the main body part.<\/li>\n
- <thead> –<\/strong> It is to create the header.<\/li>\n