{"id":191636,"date":"2024-12-25T06:42:00","date_gmt":"2024-12-25T05:42:00","guid":{"rendered":"https:\/\/datascientest.com\/en\/?p=191636"},"modified":"2025-01-09T00:11:02","modified_gmt":"2025-01-08T23:11:02","slug":"all-about-html-tables","status":"publish","type":"post","link":"https:\/\/datascientest.com\/en\/all-about-html-tables","title":{"rendered":"HTML tables: What are they? How do they work?"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"191636\" class=\"elementor elementor-191636\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1f2f833 e-flex e-con-boxed e-con\" data-id=\"1f2f833\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3a5692b elementor-widget elementor-widget-text-editor\" data-id=\"3a5692b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.15.0 - 02-08-2023 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p><b>HTML tables are utilized for structuring and displaying data on the web. Although CSS alternatives (like grids or flexbox) are often favored for their modernity, HTML tables are still the best choice for arranging data in a tabular layout.<\/b><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6d73c49 elementor-widget elementor-widget-text-editor\" data-id=\"6d73c49\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">They enable data presentation in a structured format by organizing them into rows and columns. This method simplifies the display of intricate data and aids the user in comprehending the information more thoroughly. They&#8217;re commonly employed for comparison tables, financial statements, or to present information in an orderly manner.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-788509f elementor-align-center button-principal elementor-widget elementor-widget-button\" data-id=\"788509f\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-md\" href=\"https:\/\/datascientest.com\/en\/data-courses\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Find out all about HTML<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-858a444 e-flex e-con-boxed e-con\" data-id=\"858a444\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-34d4ac8 elementor-widget elementor-widget-heading\" data-id=\"34d4ac8\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.15.0 - 02-08-2023 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h3 class=\"elementor-heading-title elementor-size-default\">What is the structure of an HTML table?<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6359aa6 elementor-widget elementor-widget-text-editor\" data-id=\"6359aa6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ffa4826 elementor-widget elementor-widget-heading\" data-id=\"ffa4826\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-medium\">1. <<span style=\"color: #008000;\">table<\/span> >: The primary container<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-61dd656 elementor-widget elementor-widget-text-editor\" data-id=\"61dd656\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">This tag serves as the main holding element for any <a href=\"https:\/\/datascientest.com\/en\/html5-what-is-it-complete-guide\">HTML<\/a> table. It encompasses all the table&#8217;s components, such as rows, columns, and cells. By default, a table does not possess a visible border, although one can be added through the <\/span><i><span style=\"font-weight: 400;\">border<\/span><\/i><span style=\"font-weight: 400;\"> attribute.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8c9e564 elementor-widget elementor-widget-heading\" data-id=\"8c9e564\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-medium\"><font size=\"4\">2. <<span style=\"color: #008000;\">thead<\/span> >, <<span style=\"color: #008000;\">tbody<\/span> > and <<span style=\"color: #008000;\">tfoot<\/span> >: Organizing the table<\/font><\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-909bd6e elementor-widget elementor-widget-text-editor\" data-id=\"909bd6e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\">: Contains the headers for the columns. Utilizing this tag groups together elements that act as the table&#8217;s header. Within &lt;<span style=\"color: #008000;\">thead<\/span>&gt;, &lt;<span style=\"color: #008000;\">th<\/span>&gt; tags (for table headers) are typically used.<\/span><\/li><li><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\">: Forms the main body of the table, where the data is normally placed. Data rows are produced using the &lt;<span style=\"color: #008000;\">tr<\/span>&gt; tag.<\/span><span style=\"font-weight: 400;\">.<\/span><\/li><li><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"color: #008000;\">tfoot<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400;\">Applied to organize details that go at the bottom of the table, like summaries or totals.<\/span><\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3c1752c elementor-widget elementor-widget-text-editor\" data-id=\"3c1752c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Below is an example of a table:<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7d3aaa9 elementor-widget elementor-widget-text-editor\" data-id=\"7d3aaa9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span> <span style=\"font-weight: 400; color: #0000ff;\">border<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"1\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Variable&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Type&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Description&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Age&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Integer&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Represents a person's age in years&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Income&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Float&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Denotes the annual income in euros&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tfoot<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td <\/span><span style=\"font-weight: 400; color: #0000ff;\">colspan<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"2\"<\/span><span style=\"font-weight: 400;\">&gt;Total number of variables&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;2&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tfoot<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eea4ad7 elementor-widget elementor-widget-text-editor\" data-id=\"eea4ad7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">In this example, &lt;<span style=\"color: #008000;\">tr<\/span>&gt;, &lt;<span style=\"color: #008000;\">th<\/span>&gt;, and &lt;<span style=\"color: #008000;\">td<\/span>&gt; are used to respectively create rows, header cells (usually displayed in bold by default), and data cells.<\/span><\/p><p><span style=\"font-weight: 400;\">This is what this basic table looks like:<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c01e0a3 elementor-widget elementor-widget-html\" data-id=\"c01e0a3\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<table border=\"1\">\r\n  <thead>\r\n    <tr>\r\n      <th>Variable<\/th>\r\n      <th>Type<\/th>\r\n      <th>Description<\/th>\r\n    <\/tr>\r\n  <\/thead>\r\n  <tbody>\r\n    <tr>\r\n      <td>Age<\/td>\r\n      <td>Integer<\/td>\r\n      <td>Represents a person's age in years<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td>Income<\/td>\r\n      <td>Float<\/td>\r\n      <td>Denotes the annual income in euros<\/td>\r\n    <\/tr>\r\n  <\/tbody>\r\n  <tfoot>\r\n    <tr>\r\n      <td colspan=\"2\">Total number of variables<\/td>\r\n      <td>2<\/td>\r\n    <\/tr>\r\n  <\/tfoot>\r\n<\/table>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ce5f828 elementor-align-center button-principal elementor-widget elementor-widget-button\" data-id=\"ce5f828\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-md\" href=\"https:\/\/datascientest.com\/en\/data-courses\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Master HTML<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-dbf43cd e-flex e-con-boxed e-con\" data-id=\"dbf43cd\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-879db07 elementor-widget elementor-widget-heading\" data-id=\"879db07\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">What about complex tables?<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f6191e5 elementor-widget elementor-widget-text-editor\" data-id=\"f6191e5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">HTML tables can become quite complex when representing large datasets or when detailing relationships between various columns and rows. Here is an instance of a sophisticated table using both merged rows and columns:<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5eba240 elementor-widget elementor-widget-text-editor\" data-id=\"5eba240\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span> <span style=\"font-weight: 400; color: #0000ff;\">id<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"maTable\"<\/span> <span style=\"font-weight: 400; color: #0000ff;\">border<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"1\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span> <span style=\"font-weight: 400; color: #0000ff;\">rowspan<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"2\"<\/span><span style=\"font-weight: 400;\">&gt;Name&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">colspan<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"2\"<\/span><span style=\"font-weight: 400;\">&gt;Professional Information&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">rowspan<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"2\"<\/span><span style=\"font-weight: 400;\">&gt;Salary (\u20ac)&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Occupation&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Level&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Bob Sponge&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Analyst&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Junior&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;45 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Alice Wonderland&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Scientist&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Senior&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;60 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Bart Simpson&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Engineer&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Intermediate&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;55 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Rick Sanchez&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Big Data Architecte&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Expert&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;75 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Morty Smith&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Machine Learning Engineer&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Junior&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;70 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-be7a6d1 elementor-widget elementor-widget-text-editor\" data-id=\"be7a6d1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Column spanning<\/b><span style=\"font-weight: 400;\"> with <span style=\"color: #0000ff;\">colspan<\/span>: In the &lt;<span style=\"color: #008000;\">thead<\/span>&gt; section, the cell &#8220;Professional Information&#8221; spans two columns (&#8220;Occupation&#8221; and &#8220;Level&#8221;). This is accomplished using the attribute <span style=\"color: #0000ff;\">colspan<\/span>=<span style=\"color: #ff0000;\">&#8220;2&#8221;<\/span>.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Row spanning<\/b><span style=\"font-weight: 400;\"> with <span style=\"color: #0000ff;\">rowspan<\/span>: The &#8220;Name&#8221; cell extends over two header rows using <span style=\"color: #0000ff;\">rowspan<\/span>=<span style=\"color: #ff0000;\">&#8220;2&#8221;<\/span>, designating each person&#8217;s name as independent of the subcategories (occupation and level).<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Increased complexity<\/b><span style=\"font-weight: 400;\">: Such tables are advantageous for showcasing data with subcategories, such as expertise levels or additional entry details.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Employing advanced techniques like <span style=\"color: #0000ff;\">colspan<\/span> and <span style=\"color: #0000ff;\">rowspan<\/span> enables the creation of tables that organize data clearly while delivering more intricate information in a user-friendly way.<\/span><\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d178f80 elementor-widget elementor-widget-text-editor\" data-id=\"d178f80\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">The table&#8217;s appearance is as follows:<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8d767b6 elementor-widget elementor-widget-html\" data-id=\"8d767b6\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<table id=\"myTable\" border=\"1\">\r\n  <thead>\r\n    <tr>\r\n      <th rowspan=\"2\">Name<\/th>\r\n      <th colspan=\"2\">Professional Information<\/th>\r\n      <th rowspan=\"2\">Salary (\u20ac)<\/th>\r\n    <\/tr>\r\n    <tr>\r\n      <th>Occupation<\/th>\r\n      <th>Level<\/th>\r\n    <\/tr>\r\n  <\/thead>\r\n  <tbody>\r\n    <tr>\r\n      <td>Bob Sponge<\/td>\r\n      <td>Data Analyst<\/td>\r\n      <td>Junior<\/td>\r\n      <td>45,000<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td>Alice Wonderland<\/td>\r\n      <td>Data Scientist<\/td>\r\n      <td>Senior<\/td>\r\n      <td>60,000<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td>Bart Simpson<\/td>\r\n      <td>Data Engineer<\/td>\r\n      <td>Intermediate<\/td>\r\n      <td>55,000<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td>Rick Sanchez<\/td>\r\n      <td>Big Data Architect<\/td>\r\n      <td>Expert<\/td>\r\n      <td>75,000<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td>Morty Smith<\/td>\r\n      <td>Machine Learning Engineer<\/td>\r\n      <td>Junior<\/td>\r\n      <td>70,000<\/td>\r\n    <\/tr>\r\n  <\/tbody>\r\n<\/table>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-689cb91 elementor-align-center button-principal elementor-widget elementor-widget-button\" data-id=\"689cb91\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-md\" href=\"https:\/\/datascientest.com\/en\/data-courses\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Learn how to code<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a771f32 e-flex e-con-boxed e-con\" data-id=\"a771f32\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bdb1966 elementor-widget elementor-widget-heading\" data-id=\"bdb1966\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">How can HTML tables be styled?<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8c72582 elementor-widget elementor-widget-text-editor\" data-id=\"8c72582\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Although you can customize HTML tables using certain properties, CSS is generally the preferred method.<\/span><\/p><p><span style=\"font-weight: 400;\">The following example illustrates a relatively simple table customization using CSS:<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8c7ad88 elementor-widget elementor-widget-text-editor\" data-id=\"8c7ad88\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">style<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\"> {<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">width<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #008000;\">100%<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">border-collapse<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #0000ff;\">collapse<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0}<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\"> {<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">border<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #008000;\">1px<\/span> <span style=\"font-weight: 400; color: #0000ff;\">solid <\/span><span style=\"color: #800080;\"><b>black<\/b><\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">padding<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #008000;\">10px<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">text-align<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #0000ff;\">left<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0}<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\"> {<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">background-color<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #0000ff;\">#f2f2f2<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0}<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">style<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Name&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Occupation&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Salary (\u20ac)&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Bob Sponge&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Analyst&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;45 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Alice Wonderland&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Scientist&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;60 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Bart Simpson&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Engineer&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;55 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Rick Sanchez&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Big Data Architecte&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;75 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Morty Smith&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Machine Learning Engineer&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;70 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-210d537 elementor-widget elementor-widget-text-editor\" data-id=\"210d537\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">The result appears less austere:<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-76b7fa0 elementor-widget elementor-widget-html\" data-id=\"76b7fa0\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n  table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n  }\r\n  th, td {\r\n    border: 1px solid black;\r\n    padding: 10px;\r\n    text-align: left;\r\n  }\r\n  th {\r\n    background-color: #f2f2f2;\r\n  }\r\n<\/style>\r\n<table>\r\n  <thead>\r\n    <tr>\r\n      <th>Name<\/th>\r\n      <th>Occupation<\/th>\r\n      <th>Salary (\u20ac)<\/th>\r\n    <\/tr>\r\n  <\/thead>\r\n  <tbody>\r\n    <tr>\r\n      <td>Bob Sponge<\/td>\r\n      <td>Data Analyst<\/td>\r\n      <td>45,000<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td>Alice Wonderland<\/td>\r\n      <td>Data Scientist<\/td>\r\n      <td>60,000<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td>Bart Simpson<\/td>\r\n      <td>Data Engineer<\/td>\r\n      <td>55,000<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td>Rick Sanchez<\/td>\r\n      <td>Big Data Architect<\/td>\r\n      <td>75,000<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td>Morty Smith<\/td>\r\n      <td>Machine Learning Engineer<\/td>\r\n      <td>70,000<\/td>\r\n    <\/tr>\r\n  <\/tbody>\r\n<\/table>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a49cfd1 elementor-widget elementor-widget-text-editor\" data-id=\"a49cfd1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">By thoughtfully combining CSS with tables, one can achieve highly appealing visual results, emphasize specific elements, and much more.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0431e8e elementor-align-center button-principal elementor-widget elementor-widget-button\" data-id=\"0431e8e\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-md\" href=\"https:\/\/datascientest.com\/en\/data-courses\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Expand your knowledge of HTML<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7e73251 e-flex e-con-boxed e-con\" data-id=\"7e73251\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-66648ce elementor-widget elementor-widget-heading\" data-id=\"66648ce\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">How to ensure accessibility and follow best practices with tables?<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c8bf3f4 elementor-widget elementor-widget-text-editor\" data-id=\"c8bf3f4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Tables can lead to accessibility issues if not well-structured. This can become particularly pertinent depending on the browsers, and especially concerning users who depend on screen readers. These are special tools that allow visually impaired users to navigate a website. These programs convert on-screen content into audio or braille.<\/span><\/p><p><span style=\"font-weight: 400;\">Here are some best practices to ensure accessibility of your tables:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Use descriptive headers<\/b><span style=\"font-weight: 400;\">: The &lt;<span style=\"color: #008000;\">th<\/span>&gt; tags help screen readers identify column headers. Each header should accurately depict the column or row&#8217;s content so users can navigate the table with ease.<\/span><\/li><li><b>Include Scope Attributes<\/b><span style=\"font-weight: 400;\">: Using <span style=\"color: #0000ff;\">scope<\/span>=<span style=\"color: #ff0000;\">&#8220;col&#8221;<\/span> or <span style=\"color: #0000ff;\">scope<\/span>=<span style=\"color: #ff0000;\">&#8220;row&#8221;<\/span> signifies the extent of a header column or row. This helps screen readers correlate each data cell with its header. Consider the following example:<\/span><\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-71fce7b elementor-widget elementor-widget-text-editor\" data-id=\"71fce7b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">table <\/span><span style=\"font-weight: 400; color: #0000ff;\">border<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"1\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">scope<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"col\"<\/span><span style=\"font-weight: 400;\">&gt;Name&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">scope<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"col\"<\/span><span style=\"font-weight: 400;\">&gt;Occupation&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">scope<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"col\"<\/span><span style=\"font-weight: 400;\">&gt;Salary (\u20ac)&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Alice Wonderland&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Scientist&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;60 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b10b80b elementor-widget elementor-widget-text-editor\" data-id=\"b10b80b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><b>Incorporate a <\/b><span style=\"font-weight: 400;\">&lt;<span style=\"color: #008000;\">caption<\/span>&gt;: This tag gives the table a descriptive title. It enables users, including those with screen readers, to swiftly comprehend the table&#8217;s purpose. For example:<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9ef8009 elementor-widget elementor-widget-text-editor\" data-id=\"9ef8009\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span> <span style=\"font-weight: 400; color: #0000ff;\">border<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"1\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">caption<\/span><span style=\"font-weight: 400;\">&gt;Employee Salaries in the Data Department&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">caption<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">scope<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"col\"<\/span><span style=\"font-weight: 400;\">&gt;Name&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">scope<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"col\"<\/span><span style=\"font-weight: 400;\">&gt;Occupation&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">scope<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"col\"<\/span><span style=\"font-weight: 400;\">&gt;Salary (\u20ac)&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Alice Wonderland&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Scientist&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;60 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9a70a4d elementor-widget elementor-widget-text-editor\" data-id=\"9a70a4d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Prioritize CSS for customization<\/b><span style=\"font-weight: 400;\">: Maintain straightforward HTML and utilize CSS for customization, which enhances maintainability and fosters code accessibility. For instance, styling tables with CSS contributes to a more visually pleasing interface without complicating the HTML.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Complex tables and linking header-cells<\/b><span style=\"font-weight: 400;\">: When dealing with intricate tables where data is structured across various levels, it is beneficial to link each data cell with its header using the <\/span><i><span style=\"font-weight: 400;\">headers<\/span><\/i><span style=\"font-weight: 400;\"> and <\/span><i><span style=\"font-weight: 400;\">id<\/span><\/i><span style=\"font-weight: 400;\"> attributes. This ensures greater navigation ease for those utilizing screen readers. Consider the following example:<\/span><\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-43a27e3 elementor-widget elementor-widget-text-editor\" data-id=\"43a27e3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">table <\/span><span style=\"font-weight: 400; color: #0000ff;\">border<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"1\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">id<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"name\"<\/span><span style=\"font-weight: 400;\">&gt;Name&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">id<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"occupation\"<\/span><span style=\"font-weight: 400;\">&gt;Occupation&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">id<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"salary\"<\/span><span style=\"font-weight: 400;\">&gt;Average Salary (\u20ac)&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td <\/span><span style=\"font-weight: 400; color: #0000ff;\">headers<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"name\"<\/span><span style=\"font-weight: 400;\">&gt;Alice Wonderland&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td <\/span><span style=\"font-weight: 400; color: #0000ff;\">headers<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"occupation\"<\/span><span style=\"font-weight: 400;\">&gt;Data Scientist&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span> <span style=\"font-weight: 400; color: #0000ff;\">headers<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"salary\"<\/span><span style=\"font-weight: 400;\">&gt;45 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-093683a elementor-align-center button-principal elementor-widget elementor-widget-button\" data-id=\"093683a\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-md\" href=\"https:\/\/datascientest.com\/en\/data-courses\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Acquire HTML coding skills<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2dddcb9 e-flex e-con-boxed e-con\" data-id=\"2dddcb9\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b594ab7 elementor-widget elementor-widget-heading\" data-id=\"b594ab7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">How do tables integrate with dynamic data?<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8c6efbc elementor-widget elementor-widget-text-editor\" data-id=\"8c6efbc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Incorporating dynamics into tables can be extremely beneficial. Through JavaScript, you can add or remove rows dynamically, leading to more interactive interfaces.<\/span><\/p><p><span style=\"font-weight: 400;\">Here is a simple example of a script that adds a row to a table: <\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e54bede elementor-widget elementor-widget-text-editor\" data-id=\"e54bede\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">button <\/span><span style=\"font-weight: 400; color: #0000ff;\">onclick<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"addRow()\"<\/span><span style=\"font-weight: 400;\">&gt;Add a Row&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">button<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">style<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\"> {<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">width<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #008000;\">100%<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">border-collapse<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #0000ff;\">collapse<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0}<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\"> {<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">border<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #008000;\">1px<\/span> <span style=\"font-weight: 400;\">solid<\/span> <b>black<\/b><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">padding<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #008000;\">10px<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">text-align<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"color: #0000ff;\"><span style=\"font-weight: 400;\">left<\/span><span style=\"font-weight: 400;\">;<\/span><\/span><br \/><span style=\"font-weight: 400;\"> \u00a0}<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\"> {<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">background-color<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #0000ff;\">#f2f2f2<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0}<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">style<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre><p style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">table <\/span><span style=\"font-weight: 400; color: #0000ff;\">id<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">&#8220;maTable&#8221;<\/span> <span style=\"font-weight: 400; color: #0000ff;\">border<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">&#8220;1&#8221;<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Name&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Occupation&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Salary (\u20ac)&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Alice Wonderland&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Scientist&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;60 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p><p style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">script<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0<\/span><span style=\"color: #800080;\"><b>function<\/b><\/span> <span style=\"font-weight: 400; color: #0000ff;\">addRow<\/span><span style=\"font-weight: 400;\"><span style=\"color: #0000ff;\">()<\/span> {<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"color: #800080;\"><b>var<\/b> <\/span><span style=\"font-weight: 400; color: #0000ff;\">table<\/span> <span style=\"color: #ff00ff;\"><b>=<\/b><\/span> <span style=\"font-weight: 400; color: #33cccc;\">document<\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">getElementById<\/span><\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400; color: #ff0000;\">&#8220;maTable&#8221;<\/span><span style=\"font-weight: 400;\">)<span style=\"color: #993300;\">.<\/span><\/span><span style=\"font-weight: 400; color: #993300;\">getElementsByTagName<\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400; color: #ff0000;\">&#8216;tbody&#8217;<\/span><span style=\"font-weight: 400;\">)[<\/span><span style=\"font-weight: 400; color: #008000;\">0<\/span><span style=\"font-weight: 400;\">];<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"color: #800080;\"><b>var<\/b><\/span> <span style=\"font-weight: 400; color: #0000ff;\">newRow <\/span><span style=\"color: #ff00ff;\"><b>=<\/b><\/span> <span style=\"font-weight: 400; color: #333399;\">table<\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">insertRow<\/span><\/span><span style=\"font-weight: 400;\">();<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"color: #800080;\"><b>var<\/b><\/span> <span style=\"font-weight: 400; color: #0000ff;\">cell1<\/span> <span style=\"color: #ff00ff;\"><b>=<\/b><\/span> <span style=\"font-weight: 400; color: #333399;\">newRow<\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">insertCell<\/span><\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400; color: #008000;\">0<\/span><span style=\"font-weight: 400;\">);<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"color: #800080;\"><b>var<\/b><\/span> <span style=\"font-weight: 400; color: #0000ff;\">cell2<\/span> <span style=\"color: #ff00ff;\"><b>=<\/b><\/span> <span style=\"font-weight: 400; color: #333399;\">newRow<\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">insertCell<\/span><\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400; color: #008000;\">1<\/span><span style=\"font-weight: 400;\">);<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"color: #800080;\"><b>var<\/b><\/span> <span style=\"font-weight: 400; color: #0000ff;\">cell3<\/span> <span style=\"color: #ff00ff;\"><b>=<\/b><\/span> <span style=\"font-weight: 400; color: #333399;\">newRow<\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">insertCell<\/span><\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400; color: #008000;\">2<\/span><span style=\"font-weight: 400;\">);<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #333399;\">cell1<\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">innerHTML<\/span><\/span> <span style=\"color: #ff00ff;\"><b>=<\/b><\/span> <span style=\"font-weight: 400; color: #ff0000;\">&#8220;Firstname Lastname&#8221;<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #333399;\">cell2<\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">innerHTML<\/span><\/span> <span style=\"color: #ff00ff;\"><b>=<\/b> <\/span><span style=\"font-weight: 400; color: #ff0000;\">&#8220;Data Engineer&#8221;<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #333399;\">cell3<\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">innerHTML<\/span><\/span> <span style=\"color: #ff00ff;\"><b>=<\/b><\/span> <span style=\"font-weight: 400; color: #ff0000;\">&#8220;55 000&#8221;<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0}<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">script<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0c190f7 elementor-widget elementor-widget-text-editor\" data-id=\"0c190f7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">The button will allow you to add a new row, in this example, with default values.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f6eefdf elementor-widget elementor-widget-html\" data-id=\"f6eefdf\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<button onclick=\"addRow()\">Add a Row<\/button>\r\n<style>\r\n  table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n  }\r\n  th, td {\r\n    border: 1px solid black;\r\n    padding: 10px;\r\n    text-align: left;\r\n  }\r\n  th {\r\n    background-color: #f2f2f2;\r\n  }\r\n<\/style>\r\n\r\n<table id=\"myTable\" border=\"1\">\r\n  <thead>\r\n    <tr>\r\n      <th>Name<\/th>\r\n      <th>Job<\/th>\r\n      <th>Salary (\u20ac)<\/th>\r\n    <\/tr>\r\n  <\/thead>\r\n  <tbody>\r\n    <tr>\r\n      <td>Alice Wonderland<\/td>\r\n      <td>Data Scientist<\/td>\r\n      <td>60,000<\/td>\r\n    <\/tr>\r\n  <\/tbody>\r\n<\/table>\r\n\r\n<script>\r\n  function addRow() {\r\n    var table = document.getElementById(\"myTable\").getElementsByTagName('tbody')[0];\r\n    var newRow = table.insertRow();\r\n    var cell1 = newRow.insertCell(0);\r\n    var cell2 = newRow.insertCell(1);\r\n    var cell3 = newRow.insertCell(2);\r\n    cell1.innerHTML = \"First Last\";\r\n    cell2.innerHTML = \"Data Engineer\";\r\n    cell3.innerHTML = \"55,000\";\r\n  }\r\n<\/script>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2343c0b e-flex e-con-boxed e-con\" data-id=\"2343c0b\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-49a2522 elementor-widget elementor-widget-heading\" data-id=\"49a2522\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Conclusion<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0be5067 elementor-widget elementor-widget-text-editor\" data-id=\"0be5067\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">HTML tables are powerful for presenting data in a structured format, making information easier to read and understand. By knowing the basic elements like <\/span><span style=\"font-weight: 400;\">&lt;<span style=\"color: #008000;\">table<\/span>&gt;<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">&lt;<span style=\"color: #008000;\">thead<\/span>&gt;<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">&lt;<span style=\"color: #008000;\">tbody<\/span>&gt;<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">&lt;<span style=\"color: #008000;\">tr<\/span>&gt;<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">&lt;<span style=\"color: #008000;\">th<\/span>&gt;<\/span><span style=\"font-weight: 400;\">, and <\/span><span style=\"font-weight: 400;\">&lt;<span style=\"color: #008000;\">td<\/span>&gt;<\/span><span style=\"font-weight: 400;\">, as well as more advanced concepts like <\/span><span style=\"font-weight: 400;\">colspan<\/span><span style=\"font-weight: 400;\"> and <\/span><span style=\"font-weight: 400;\">rowspan<\/span><span style=\"font-weight: 400;\">, you&#8217;ll be able to create sophisticated and accessible tables. Even more so by combining <a href=\"https:\/\/datascientest.com\/en\/css3-all-you-need-to-know-about-this-programming-language\">CSS<\/a> for visual customization and <a href=\"https:\/\/datascientest.com\/en\/javascript-unveiled-a-comprehensive-guide-to-the-language-of-the-web\">JavaScript<\/a> to make it interactive. With best practices, particularly those related to accessibility, your tables will be usable by a wide range of users and compatible across many browsers.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8d11c66 elementor-align-center button-principal elementor-widget elementor-widget-button\" data-id=\"8d11c66\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-md\" href=\"https:\/\/datascientest.com\/en\/data-courses\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Discover DataScientest<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6f18729 e-flex e-con-boxed e-con\" data-id=\"6f18729\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-67da34b elementor-widget elementor-widget-html\" data-id=\"67da34b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<script type=\"application\/ld+json\">\r\n{\r\n  \"@context\": \"https:\/\/schema.org\",\r\n  \"@type\": \"FAQPage\",\r\n  \"mainEntity\": [\r\n    {\r\n      \"@type\": \"Question\",\r\n      \"name\": \"What is a table in HTML?\",\r\n      \"acceptedAnswer\": {\r\n        \"@type\": \"Answer\",\r\n        \"text\": \"A table in HTML is a structure used to organize data in a tabular format. It consists of rows (<tr> tags), data cells (<td> tags), and header cells (<th> tags) to structure information in a clear and readable way.\"\r\n      }\r\n    },\r\n    {\r\n      \"@type\": \"Question\",\r\n      \"name\": \"How do you create a basic table in HTML?\",\r\n      \"acceptedAnswer\": {\r\n        \"@type\": \"Answer\",\r\n        \"text\": \"To create a basic table in HTML, you need to use the <table> tag to define the table, <tr> for a row, <td> for a data cell, and <th> for a header cell. For example:\\n```html\\n<table>\\n  <tr>\\n    <th>Name<\/th>\\n    <th>Age<\/th>\\n  <\/tr>\\n  <tr>\\n    <td>John<\/td>\\n    <td>30<\/td>\\n  <\/tr>\\n<\/table>\\n```\"\r\n      }\r\n    },\r\n    {\r\n      \"@type\": \"Question\",\r\n      \"name\": \"What are the best practices for structuring an HTML table?\",\r\n      \"acceptedAnswer\": {\r\n        \"@type\": \"Answer\",\r\n        \"text\": \"Best practices include using <thead>, <tbody>, and <tfoot> tags to structure the table properly. Use <thead> for headers, <tbody> for data, and <tfoot> for footer information such as totals. This improves the accessibility and readability of the code.\"\r\n      }\r\n    },\r\n    {\r\n      \"@type\": \"Question\",\r\n      \"name\": \"How do you style an HTML table with CSS?\",\r\n      \"acceptedAnswer\": {\r\n        \"@type\": \"Answer\",\r\n        \"text\": \"To style an HTML table, you can use CSS properties like `border` to add borders, `padding` to add space inside cells, and `text-align` to align the text. For example:\\n```css\\ntable {\\n  border-collapse: collapse;\\n}\\nth, td {\\n  border: 1px solid black;\\n  padding: 8px;\\n  text-align: left;\\n}\\n```\"\r\n      }\r\n    }\r\n  ]\r\n}\r\n<\/script>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>HTML tables are utilized for structuring and displaying data on the web. Although CSS alternatives (like grids or flexbox) are often favored for their modernity, HTML tables are still the best choice for arranging data in a tabular layout. They enable data presentation in a structured format by organizing them into rows and columns. This [&hellip;]<\/p>\n","protected":false},"author":45,"featured_media":191638,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"content-type":"","inline_featured_image":false},"categories":[2421],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.7 (Yoast SEO v21.7) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HTML tables: What are they? How do they work?<\/title>\n<meta name=\"description\" content=\"Discover how to create and style HTML tables to effectively organize your data. Learn tips and techniques to enhance the accessibility and design of your tables.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/datascientest.com\/en\/all-about-html-tables\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML tables: What are they? How do they work?\" \/>\n<meta property=\"og:description\" content=\"HTML tables are utilized for structuring and displaying data on the web. Although CSS alternatives (like grids or flexbox) are often favored for their\" \/>\n<meta property=\"og:url\" content=\"https:\/\/datascientest.com\/en\/all-about-html-tables\" \/>\n<meta property=\"og:site_name\" content=\"Data Science Courses | DataScientest\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataScientestEN\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-25T05:42:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-08T23:11:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/datascientest.com\/en\/files\/2024\/11\/html-table-datascientest.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Daniel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataScientest__\" \/>\n<meta name=\"twitter:site\" content=\"@DataScientest__\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Daniel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/datascientest.com\/en\/all-about-html-tables#article\",\"isPartOf\":{\"@id\":\"https:\/\/datascientest.com\/en\/all-about-html-tables\"},\"author\":{\"name\":\"Daniel\",\"@id\":\"https:\/\/datascientest.com\/en\/#\/schema\/person\/5a86e30c5090234fb43dd8baa83c44b0\"},\"headline\":\"HTML tables: What are they? How do they work?\",\"datePublished\":\"2024-12-25T05:42:00+00:00\",\"dateModified\":\"2025-01-08T23:11:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/datascientest.com\/en\/all-about-html-tables\"},\"wordCount\":1205,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/datascientest.com\/en\/#organization\"},\"articleSection\":[\"Dev\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/datascientest.com\/en\/all-about-html-tables#respond\"]}],\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/datascientest.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/datascientest.com\/en\/all-about-html-tables\",\"url\":\"https:\/\/datascientest.com\/en\/all-about-html-tables\",\"name\":\"HTML tables: What are they? How do they work?\",\"isPartOf\":{\"@id\":\"https:\/\/datascientest.com\/en\/#website\"},\"datePublished\":\"2024-12-25T05:42:00+00:00\",\"dateModified\":\"2025-01-08T23:11:02+00:00\",\"description\":\"Discover how to create and style HTML tables to effectively organize your data. Learn tips and techniques to enhance the accessibility and design of your tables.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/datascientest.com\/en\/all-about-html-tables\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/datascientest.com\/en\/#website\",\"url\":\"https:\/\/datascientest.com\/en\/\",\"name\":\"Data Science Courses | DataScientest\",\"description\":\"Leader in Data Science Courses\",\"publisher\":{\"@id\":\"https:\/\/datascientest.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/datascientest.com\/en\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/datascientest.com\/en\/#organization\",\"name\":\"DataScientest\",\"url\":\"https:\/\/datascientest.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/datascientest.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/datascientest.com\/en\/wp-content\/blogs.dir\/9\/files\/2024\/02\/DataScientest_icon_blue-2.png\",\"contentUrl\":\"https:\/\/datascientest.com\/en\/wp-content\/blogs.dir\/9\/files\/2024\/02\/DataScientest_icon_blue-2.png\",\"width\":301,\"height\":301,\"caption\":\"DataScientest\"},\"image\":{\"@id\":\"https:\/\/datascientest.com\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/DataScientestEN\",\"https:\/\/twitter.com\/DataScientest__\",\"https:\/\/www.linkedin.com\/school\/datascientest\/mycompany\/\",\"https:\/\/www.tiktok.com\/@datascientest\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/datascientest.com\/en\/#\/schema\/person\/5a86e30c5090234fb43dd8baa83c44b0\",\"name\":\"Daniel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/datascientest.com\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/837acad4f2dc47e85d81cce837261670?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/837acad4f2dc47e85d81cce837261670?s=96&d=mm&r=g\",\"caption\":\"Daniel\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/school\/datascientest\/\",\"user\"],\"jobTitle\":\"ing\u00e9nieur logiciel\",\"worksFor\":\"DataScientest\",\"url\":\"https:\/\/datascientest.com\/en\/author\/team-redac\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"HTML tables: What are they? How do they work?","description":"Discover how to create and style HTML tables to effectively organize your data. Learn tips and techniques to enhance the accessibility and design of your tables.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/datascientest.com\/en\/all-about-html-tables","og_locale":"en_GB","og_type":"article","og_title":"HTML tables: What are they? How do they work?","og_description":"HTML tables are utilized for structuring and displaying data on the web. Although CSS alternatives (like grids or flexbox) are often favored for their","og_url":"https:\/\/datascientest.com\/en\/all-about-html-tables","og_site_name":"Data Science Courses | DataScientest","article_publisher":"https:\/\/www.facebook.com\/DataScientestEN","article_published_time":"2024-12-25T05:42:00+00:00","article_modified_time":"2025-01-08T23:11:02+00:00","og_image":[{"width":1000,"height":500,"url":"https:\/\/datascientest.com\/en\/files\/2024\/11\/html-table-datascientest.webp","type":"image\/webp"}],"author":"Daniel","twitter_card":"summary_large_image","twitter_creator":"@DataScientest__","twitter_site":"@DataScientest__","twitter_misc":{"Written by":"Daniel","Estimated reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/datascientest.com\/en\/all-about-html-tables#article","isPartOf":{"@id":"https:\/\/datascientest.com\/en\/all-about-html-tables"},"author":{"name":"Daniel","@id":"https:\/\/datascientest.com\/en\/#\/schema\/person\/5a86e30c5090234fb43dd8baa83c44b0"},"headline":"HTML tables: What are they? How do they work?","datePublished":"2024-12-25T05:42:00+00:00","dateModified":"2025-01-08T23:11:02+00:00","mainEntityOfPage":{"@id":"https:\/\/datascientest.com\/en\/all-about-html-tables"},"wordCount":1205,"commentCount":0,"publisher":{"@id":"https:\/\/datascientest.com\/en\/#organization"},"articleSection":["Dev"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/datascientest.com\/en\/all-about-html-tables#respond"]}],"copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/datascientest.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/datascientest.com\/en\/all-about-html-tables","url":"https:\/\/datascientest.com\/en\/all-about-html-tables","name":"HTML tables: What are they? How do they work?","isPartOf":{"@id":"https:\/\/datascientest.com\/en\/#website"},"datePublished":"2024-12-25T05:42:00+00:00","dateModified":"2025-01-08T23:11:02+00:00","description":"Discover how to create and style HTML tables to effectively organize your data. Learn tips and techniques to enhance the accessibility and design of your tables.","inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/datascientest.com\/en\/all-about-html-tables"]}]},{"@type":"WebSite","@id":"https:\/\/datascientest.com\/en\/#website","url":"https:\/\/datascientest.com\/en\/","name":"Data Science Courses | DataScientest","description":"Leader in Data Science Courses","publisher":{"@id":"https:\/\/datascientest.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/datascientest.com\/en\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/datascientest.com\/en\/#organization","name":"DataScientest","url":"https:\/\/datascientest.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/datascientest.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/datascientest.com\/en\/wp-content\/blogs.dir\/9\/files\/2024\/02\/DataScientest_icon_blue-2.png","contentUrl":"https:\/\/datascientest.com\/en\/wp-content\/blogs.dir\/9\/files\/2024\/02\/DataScientest_icon_blue-2.png","width":301,"height":301,"caption":"DataScientest"},"image":{"@id":"https:\/\/datascientest.com\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataScientestEN","https:\/\/twitter.com\/DataScientest__","https:\/\/www.linkedin.com\/school\/datascientest\/mycompany\/","https:\/\/www.tiktok.com\/@datascientest"]},{"@type":"Person","@id":"https:\/\/datascientest.com\/en\/#\/schema\/person\/5a86e30c5090234fb43dd8baa83c44b0","name":"Daniel","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/datascientest.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/837acad4f2dc47e85d81cce837261670?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/837acad4f2dc47e85d81cce837261670?s=96&d=mm&r=g","caption":"Daniel"},"sameAs":["https:\/\/www.linkedin.com\/school\/datascientest\/","user"],"jobTitle":"ing\u00e9nieur logiciel","worksFor":"DataScientest","url":"https:\/\/datascientest.com\/en\/author\/team-redac"}]}},"_links":{"self":[{"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/posts\/191636"}],"collection":[{"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/users\/45"}],"replies":[{"embeddable":true,"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/comments?post=191636"}],"version-history":[{"count":53,"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/posts\/191636\/revisions"}],"predecessor-version":[{"id":192617,"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/posts\/191636\/revisions\/192617"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/media\/191638"}],"wp:attachment":[{"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/media?parent=191636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/categories?post=191636"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/tags?post=191636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}