In HTML, you can create tables for your website using the\u00a0<table>\u00a0tag in conjunction with the\u00a0<tr>,\u00a0<td>\u00a0and\u00a0<th>\u00a0tags.<\/p>\n\n\n\n
The HTML tables allow displaying the data (e.g. image, text, link) in columns and rows of cells. Table rows can be grouped into a head, foot, and body sections through the\u00a0<thead>,\u00a0<tfoot>\u00a0and\u00a0<tbody>\u00a0elements, respectively.<\/p>\n\n\n\n
In HTML5, we can place <tfoot> either before or after <tbody> tag. They must come after any\u00a0<caption>,\u00a0<colgroup>, and <thead> elements.<\/p>\n\n\n\n
Most of the attributes of the <table> element are not used in HTML5. If you want to style the appearance of the table, you can use CSS instead.<\/p>\n\n\n\n
It is possible to extend rows and columns of a table across many other rows and columns.<\/p>\n\n\n\n
Commonly, a table cell cannot pass into the space, which is below or above another cell. But, if you want to span several rows or columns in a table, you can use the colspan or rowspan attributes.<\/p>\n\n\n\n
You can use the <caption> element to specify a caption for tables. It should be placed immediately after the opening <table> tag. By default, the caption will be at the top of the table, but its position can be changed with the\u00a0CSS caption-side\u00a0property.<\/p>\n\n\n\n
The <table> tag comes in pairs. The content is written between the opening <table> and the closing <\/table> tags.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <style>\n table, th, td {\n border: 1px solid #666;\n }\n <\/style>\n <\/head>\n <body>\n <table style=\"width:80%;\">\n <tr>\n <th>Month<\/th>\n <th>Date<\/th>\n <\/tr>\n <tr>\n <td>January<\/td>\n <td>10.01.2014<\/td>\n <\/tr>\n <tr>\n <td>February<\/td>\n <td>10.01.2014<\/td>\n <\/tr>\n <\/table>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nResult<\/h3>\n\n\n\nMonth<\/th> Date<\/th><\/tr> January<\/td> 10.01.2014<\/td><\/tr> February<\/td> 10.01.2014<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nIn the given example, we use the <table> tag to create a table. Then, we use the <tr> tag to divide the table into rows. The <th> tag is used for the table header cells, where the title is written. In other words, the table row is divided into headings. The <td> tag is used for table cells where the information is written.<\/p>\n\n\n\n
If you want to show the heading in one cell, you can use the colspan attribute.<\/p>\n\n\n\n
Example of the HTML <table> tag with the colspan attribute:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <style>\n table, th, td {\n border: 1px solid #666;\n }\n <\/style>\n <\/head>\n <body>\n <table style=\"width:80%;\">\n <tr>\n <th colspan=\"2\">Month and Date<\/th>\n <\/tr>\n <tr>\n <td>January<\/td>\n <td>10.01.2014<\/td>\n <\/tr>\n <tr>\n <td>February<\/td>\n <td>10.01.2014<\/td>\n <\/tr>\n <\/table>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nResult<\/h3>\n\n\n\nMonth and Date<\/th><\/tr> January<\/td> 10.01.2014<\/td><\/tr> February<\/td> 10.01.2014<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nThe same can be done with the rows, but using the rowspan attribute.<\/p>\n\n\n\n
Example of the HTML <table> tag with the rowspan attribute:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <style>\n table, th, td {\n border: 1px solid #666;\n }\n <\/style>\n <\/head>\n <body>\n <table style=\"width:80%;\">\n <tr>\n <th>Month<\/th>\n <th>Date<\/th>\n <\/tr>\n <tr>\n <td>January<\/td>\n <td rowspan=\"2\">10.01.2014<\/td>\n <\/tr>\n <tr>\n <td>February<\/td>\n <\/tr>\n <\/table>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nResult<\/h3>\n\n\n\nMonth<\/th> Date<\/th><\/tr> January<\/td> 10.01.2014<\/td><\/tr> February<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n","protected":false},"excerpt":{"rendered":"In HTML, you can create tables for your website using the\u00a0<table>\u00a0tag in conjunction with the\u00a0<tr>,\u00a0<td>\u00a0and\u00a0<th>\u00a0tags. The HTML tables allow displaying the data (e.g. image, text, link) in columns and rows of cells. Table rows can be grouped into a head, foot, and body sections through the\u00a0<thead>,\u00a0<tfoot>\u00a0and\u00a0<tbody>\u00a0elements, respectively. In HTML5, we can place <tfoot> either before […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[285],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/8089"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=8089"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/8089\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=8089"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=8089"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=8089"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}