Output:<\/strong>
\nThe resultant table for product and price will be displayed as seen below:
\n![\"Create](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543907427590.png\")
<\/p>\nTo add an additional column to the table in the example, you can use the
element within your table’s column. This element is used to define header cells for the column.<\/p>\n And if you want to add a new row to the table, you can use the | element. This element is used to define regular cells within the table row.<\/p>\n Code:<\/strong><\/p>\n\n\n| Product<\/th>\n | Price<\/th>\n | Quantity<\/th>\n<\/tr>\n | \n| Apple<\/td>\n | $20<\/td>\n | 10<\/td>\n<\/tr>\n | \n| Orange<\/td>\n | $10<\/td>\n | 15<\/td>\n<\/tr>\n<\/table><\/pre>\n Output:<\/strong>
\n![\"Create](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543907569754.png\") <\/p>\nLet’s see how to add borders to an HTML table. This is a way to visually separate the different sections of the table and make it easier to read and understand.<\/p>\n Example 2: Table with Borders and Padding<\/h4>\nIn this example, we will add a table element and set the border and cellpadding attribute. We will use the border attribute and set the width of the table’s border to 1 pixel. For the cellpadding attribute, we will use 5 pixels of padding for the content inside each cell.<\/p>\n Code:<\/strong><\/p>\n\n\n| Name<\/th>\n | Age<\/th>\n | Country<\/th>\n<\/tr>\n | \n| Michael<\/td>\n | 27<\/td>\n | Alaska<\/td>\n<\/tr>\n | \n| Evelyn<\/td>\n | 32<\/td>\n | Ohio<\/td>\n<\/tr>\n<\/table><\/pre>\n Output:<\/strong>
\n![\"Create](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543907775079.png\") <\/p>\nExample 3: Table with Styling<\/h4>\nIf you want to improve the appearance of your table, you can use CSS (Cascading Style Sheets) to add various styles and formatting.<\/p>\n One way to enhance the table is by giving different cells a background color. To do this, you can simply add the style attribute with the background-color property inside the opening tag. For instance, you can use style=”background-color: #33cccc;” to set the background color to a nice shade of teal.<\/p>\nCode:<\/strong><\/p>\n\n\n| Country<\/th>\n | Population<\/th>\n | Capital<\/th>\n<\/tr>\n | \n| Spain<\/td>\n | 47 Million<\/td>\n | Madrid<\/td>\n<\/tr>\n | \n| Finland<\/td>\n | 5.5 Million<\/td>\n | Helsinki<\/td>\n<\/tr>\n<\/table><\/pre>\n Output:<\/strong>
\n![\"Create](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543908055126.png\") <\/p>\nExample 4: Table with Caption<\/h4>\nUsing an HTML table with a caption is a great way to present information on a webpage in a tidy and organized manner. It’s like giving your table a title or a brief description to help people grasp its content easily. To include a caption, all you have to do is use the tag and place it right below the tag.<\/p>\nCode:<\/strong><\/p>\n | | | |