{"id":799,"date":"2021-12-05T17:08:00","date_gmt":"2021-12-05T17:08:00","guid":{"rendered":"https:\/\/swatilathia.wordpress.com\/?page_id=799"},"modified":"2025-10-05T05:20:36","modified_gmt":"2025-10-05T05:20:36","slug":"html-tags","status":"publish","type":"page","link":"https:\/\/swatilathia.com\/?page_id=799","title":{"rendered":"HTML Tutorial 2 : Table & Frame Tags"},"content":{"rendered":"\n

Table of Contents<\/p>\nToggle<\/span>

<\/span><Table> tag<\/strong><\/span><\/h2>\n\n\n\n
\n
HTML table tag is used to display data in tabular form (row * column). <\/li>\n\n\n\n
There can be many columns in a row.<\/li>\n\n\n\n
<table> tag makes use of <tr> , <td>, and <th> elements to create a table.<\/li>\n\n\n\n
In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is defined by <td> tags.<\/li>\n<\/ul>\n\n\n\n
Example:<\/strong><\/p>\n\n\n\n
<table border>\u00a0\n<tr>\n<th>First Name<\/th>\n<th>Last Name<\/th>\n<th>State<\/th>\n<\/tr>\u00a0\n<tr>\n<td>Mary<\/td>\n<td>Kom<\/td>\n<td>Manipur<\/td>\n<\/tr>\u00a0\n<tr>\n<td>Neeraj<\/td>\n<td>Chopra<\/td>\n<td>Hariyana<\/td>\n<\/tr>\u00a0\n<tr>\n<td>PV<\/td>\n<td>Sindhu<\/td>\n<td>Kerala<\/td>\n<\/tr>\u00a0\n<tr>\n<td>Mirabai<\/td>\n<td>Chanu<\/td>\n<td>Manipur<\/td>\n<\/tr>\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n<\/table><\/code><\/pre>\n\n\n\n\nThe above table contains 5 rows & 3 columns = 15 values<\/li>\n<\/ul>\n\n\n\n\nResult<\/strong><\/li>\n<\/ul>\n\n\n\n\u00a0\n\n\n\n\n\nFirst Name<\/th>\n Last Name<\/th>\n State<\/th>\n<\/tr>\u00a0\n Mary<\/td>\n Kom<\/td>\n Manipur<\/td>\n<\/tr>\u00a0\n Neeraj<\/td>\n Chopra<\/td>\n Hariyana<\/td>\n<\/tr>\u00a0\n PV<\/td>\n Sindhu<\/td>\n Kerala<\/td>\n<\/tr>\u00a0\n Mirabai<\/td>\n Chanu<\/td>\n Manipur<\/td>\n<\/tr>\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n<\/table>\n\n\n\n<\/span>Attributes of <table><\/strong><\/span><\/h3>\n\n\n\n\nborder: <\/strong>It specifies the border of HTML table. E.g. <table Border=\u201d2\u201d><\/li>\n\n\n\n align:<\/strong> It specifies the visual alignment of table. It can be right, left, center, justify, char.<\/li>\n\n\n\n E.g. <table align=\u201dcenter\u201d><\/li>\n\n\n\n bgcolor:<\/strong> It specifies the background color of the table. E.g. <table bgcolor=\u201dcyan\u201d><\/li>\n\n\n\n background<\/strong>: It specifies the background color of table or just for one cell.<\/li>\n\n\n\n E.g. : <table background=\u201dtest.png\u201d><\/li>\n\n\n\n width: <\/strong>It specifies the width of the table in pixels of %<\/li>\n\n\n\n height: <\/strong>It specifies the height of the table in pixels of %<\/li>\n\n\n\n bordercolor: <\/strong>It specifies the border color of entire table. You can use a proper colorname or rgb format or hexcode. E.g. <table border=\u201d10\u201d bordercolor=\u201dred\u201d>.<\/li>\n\n\n\n If you don\u2019t specify the border property, you don\u2019t get bordercolor.<\/em><\/strong><\/li>\n\n\n\n bordercolorlight: <\/strong>It shows the border color of table in 3D like effect, where the color appears on the left & top side of the table.<\/li>\n\n\n\n It only appears in Internet Explorer.<\/em><\/strong><\/li>\n\n\n\n E.g. <table border=10 bordercolorlight=\u201dred\u201d>\u00a0<\/li>\n\n\n\n bordercolordark: <\/strong>It shows the border color of table in 3D like effect, where the color appears on the left & top side of the table.<\/li>\n\n\n\n It only appears in Internet Explorer.<\/em><\/strong><\/li>\n\n\n\n E.g. <table border=10 bordercolordark=\u201dred\u201d>\u00a0<\/li>\n<\/ul>\n\n\n\n<\/span><td> & <th> tags<\/strong><\/span><\/h3>\n\n\n\n\nAn HTML table has two kinds of cells:\n\nHeader cells \u2013 contains header information (created with the <th> element)<\/li>\n\n\n\n Data cells \u2013 contains data (created with the <td> element)<\/li>\n<\/ul>\n<\/li>\n\n\n\n The text in <td> elements is regular and left-aligned by default.<\/li>\n\n\n\n The text in <th> elements are bold and centered by default.<\/li>\n\n\n\n cellspacing: <\/strong>It specifies the space between cells.<\/li>\n\n\n\n cellpadding: <\/strong>It specifies the space between the cell borders and their contents.<\/li>\n<\/ul>\n\n\n\n<html>\n\u00a0\u00a0 <head>\n\u00a0\u00a0\u00a0\u00a0\u00a0 <title>HTML Table Cellpadding<\/title>\n\u00a0\u00a0 <\/head>\n\u00a0\u00a0 <body>\n\u00a0\u00a0\u00a0\u00a0\u00a0 <table border = \"3\" bordercolor=darkgray bgcolor=beige cellpadding = \"10\" cellspacing = \"15\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <tr>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <th>Name<\/th>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <th>City<\/th>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/tr>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <tr>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <td>Dhyan Chand<\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <td>Prayagraj<\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/tr>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <tr>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <td>Milkha Singh<\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <td>Chandigrah<\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/tr>\n\u00a0\u00a0\u00a0\u00a0\u00a0 <\/table>\n\u00a0\u00a0 <\/body>\n<\/html><\/code><\/pre>\n\n\n\n\nResult<\/strong><\/li>\n<\/ul>\n\n\n\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Name<\/th>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 City<\/th>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/tr>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Dhyan Chand<\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Prayagraj<\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/tr>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Milkha Singh<\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Chandigrah<\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/tr>\n\u00a0\u00a0\u00a0\u00a0\u00a0 <\/table>\n\u00a0\u00a0 <\/body>","protected":false},"excerpt":{"rendered":"<Table> tag Example: \u00a0 First Name Last Name State \u00a0 Mary Kom Manipur \u00a0 Neeraj Chopra Hariyana \u00a0 PV Sindhu Kerala \u00a0 Mirabai Chanu Manipur \u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Attributes of <table> <td> & <th> tags \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Name \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 City \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Dhyan Chand \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Prayagraj \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Milkha Singh \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Chandigrah \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"zakra_page_container_layout":"customizer","zakra_page_sidebar_layout":"customizer","zakra_remove_content_margin":false,"zakra_sidebar":"customizer","zakra_transparent_header":"customizer","zakra_logo":0,"zakra_main_header_style":"default","zakra_menu_item_color":"","zakra_menu_item_hover_color":"","zakra_menu_item_active_color":"","zakra_menu_active_style":"","zakra_page_header":true,"om_disable_all_campaigns":false,"footnotes":""},"class_list":["post-799","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/pages\/799","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/swatilathia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=799"}],"version-history":[{"count":5,"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/pages\/799\/revisions"}],"predecessor-version":[{"id":6108,"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/pages\/799\/revisions\/6108"}],"wp:attachment":[{"href":"https:\/\/swatilathia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}