HTML tables have been heavily used ever since web pages started to pop up in the early days of the Internet. However, in recent years, there have been other alternatives you can use instead, and there are people who now say that tables in HTML is bad practice.\n\n\n\nSo the question is;\n\n\n\nShould I Use Tables in HTML? You can still use tables in HTML. The key benefit for using tables is that you can create a beautiful layout fast and straightforward. However, HTML tables are not useful for responsive design. So if you want your web application to look good on multiple devices, you should not use tables.\n\n\n\nPreviously, quite a lot of web designers\/developers made use of HTML tables to structure a web page as that was the only flexible way to achieve their design aim. \n\n\n\nThe reason why HTML tables have been so popular is that all the cells\/data in a row or a column stretches altogether as you further expand the row or column.\n\n\n\nWhile HTML tables have been very useful for the old time's web developer and designers, the advent of CSS is somewhat making the need to use tables in HTML redundant. \n\n\n\nIn this article, you will get to know everything as regards to using tables in HTML; whether it is still relevant for this-time development or an outcast you should ignore. \n\n\n\nAlso, you will see a better alternative to present your data instead of struggling with HTML table elements\/syntaxes. Well, there are shortcuts to creating HTML tables, you know? Read on to see.\n\n\n\nWhat exactly is a table in HTML?\n\n\n\nWhat else could a table be if not a set of defined columns and rows containing relevant data inside? However, in HTML, tables are presented using a specific element <table><\/table>, including this element in an HTML code will tell the system that you\u2019re making a table. Also, HTML tables require several other element tags such as one or more <tr>, <th>, <tbody>, and <td>.\n\n\n\n<tr> stands for table rows: this is what you use to define the number of rows your table should have\n\n\n\n<td> stands for table data\n\n\n\n<th> or <thead> stands for table header\n\n\n\n<tf> or <tfoot> stands for table footer\n\n\n\n<tbody> stands for table body\n\n\n\nA table in HTML is used to elaborate more about certain information or used for layout design in rare cases. Tables help to present information in a more explainable pattern so that anyone who can access the information gets the exact interpretation. \n\n\n\nIt is very important in HTML except for making layout designs which are now preferred to be done using other simpler methods like CSS.\n\n\n\nBelow are some examples of HTML tables; the outcome and source code;\n\n\n\nHTMLTablesinlinecontent \n\n\n\nThe table above was designed with the source code below.\n\n\n\n<table>\n <tbody>\n <tr>\n <td>HTML<\/td>\n <td>Tables<\/td>\n <\/tr>\n <tr>\n <td>inline<\/td>\n <td>content<\/td>\n <\/tr>\n <tr>\n <td><\/td>\n <td><\/td>\n <\/tr>\n <\/tbody>\n<\/table>\n\n\n\nThis is just a simple HTML table. Now, take a look at a more complex HTML example; take note of the elements - <tr>, <td>, etc.\n\n\n\nWeb developmentFrontendCMSBackendcodesDesigningHTMLCSSJAVA\n\n\n\nThe source code for this table is presented below;\n\n\n\n<table>\n <tbody>\n <tr>\n <td colspan="2" rowspan="2" width="319">Web development<\/td>\n <td width="160">Frontend<\/td>\n <td width="160">CMS<\/td>\n <\/tr>\n <tr>\n <td width="160">Backend<\/td>\n <td width="160">codes<\/td>\n <\/tr>\n <tr>\n <td width="160">Designing<\/td>\n <td width="160">HTML<\/td>\n <td width="160">CSS<\/td>\n <td width="160">JAVA<\/td>\n <\/tr>\n <\/tbody>\n<\/table>\n\n\n\n\nIf you noticed, there are new elements introduced on the second HTML table; the elements are the \u201ccolspan\u201d and \u201crowspan\u201d. They are the elements we use to span columns or rows on HTML.\n\n\n\nYou can virtually create any kind of table using HTML codes, only what you need is to know the various elements to use and implement the table style.\n\n\n\nThe shortcut to creating HTML tables?\n\n\n\nThis will work if you have access to Wordpress Editor (text\/visual) or any other flexible editor. You could use the pre-defined table templates on Microsoft word to create any kind of complex table you want. It is easier to create complex tables with Microsoft word, then, copy it to WP editor and toggle to the text editor mode. The screenshots below will explain it better.\n\n\n\nCreate the table on Microsoft Word using a template or draw it manually\n\n\n\n\n\n\n\nCopy the table from MS Word and paste to a Wordpress editor\n\n\n\n\n\n\n\nNow, switch to the \u201ctext\u201d module to get the HTML code of the above table\n\n\n\n\n\n\n\nThis shortcut will help newbie developers who are not experienced with the various HTML table elements. However, you must have access to a WP editor for this technique to work.\n\n\n\nWhy is it considered bad to use Tables in HTML?\n\n\n\nThis does not apply to general HTML tables, instead, it is only applicable to designing layouts. Using tables for layout in HTML is not a good practice.\n\n\n\nHere are a few points to back up this claim;\n\n\n\nTypically, tables are bulky: they have more bytes of markup which also involves traffic bytes for the hostThey are inaccessible: naturally, screen readers interpret web pages as displayed in the HTML backend code; on the other hand, screen readers find it a bit difficult to analyze table layouts in HTML. As suspected, this is due to the tons of elements which must be used for creating such tables plus extra nested tables. It is very hard for screen readers to parse table layout designs in HTML.Difficult to redesign: when using tables, you may have to split one image into multiple images. When this is done, it makes redesign a troublesome task for another developer\/designer. Also, it increases web page load time in form of more HTTP requests.Tables are tricky: maintaining a website designed using tables for layout is quite difficult. Unless it\u2019s just a single, simple web page, you\u2019ll find it extremely difficult to deal with pages structured using tables.\n\n\n\nHow are tables tricky?\n\n\n\nWhile designing the tables, it appears very easy. But, once you\u2019re done, then, you\u2019ll discover you\u2019ve just designed something that will stress the hell out of you to maintain. Remembering how you nested tables, added many cells into certain rows, etc. all these will weaken you each time you go back to the design for maintenance.\n\n\n\nCSS designs load faster on the frontend: apparently, there is just one way to achieve a unique layout design using tables in HTML which is by nesting the tables; that is, inserting tables into another. Now, the more nested tables that is in your design, the longer time it will require for the page to load on a server.\n\n\n\nWhen compared with CSS, you find out that you\u2019ll use a few elements to design complex tables which would load faster than the same similar design done with tables in HTML.\n\n\n\nTables in HTML are not SEO friendly: When using tables, naturally, the first content to load is the one placed on the left navigation sidebar. Therefore search engines bots do not see such pages as importan. Meanwhile, with CSS, you can place the important contents first in your HTML design.\n\n\n\nIn summary, HTML tables do not guarantee a responsive design, plus, they are heavy to load. It is very bad to use Tables in HTML because the repercussions are quite unbearable for designer\/developers. Just go and use the alternatives, do not waste your precious time with tables.\n\n\n\nAlternatives to using tables in HTML\n\n\n\nSince it is bad for one to use tables in HTML, what are the alternatives to this? Yeah, there are quite a bunch of alternatives for you to use instead of HTML tables for layout designing\/structuring. These alternatives are even simpler, less-bulky, and load fast on the front-end when executed on a browser.\n\n\n\nUse divs\n\n\n\nIn this era when responsive designs are the trend, divs are better off to use in place of HTML table elements for structuring layouts. For a layout like the one below; using Divs is the best way to achieve it flawlessly.\n\n\n\n\n\n\n\nHere is the div code;\n\n\n\n<body>\n <div style="border: 1px solid; float: right; width: 25%; height: 1000px;" id="1">one<\/div>\n <div style="border: 1px solid; height: 250px; width: 74%;" id="1">two<\/div>\n <div style="border: 1px solid; width: 35%; float: right; height: 750px;" id="1">three<\/div>\n <div style="border: 1px solid; width: 35%; height: 750px;" id="1">four<\/div>\n<\/body>\n\n\n\nIt is easier and shorter with Divs than <table>.\n\n\n\nThis is one of the best alternatives for web designers.\n\n\n\nCSS Grid\n\n\n\nCSS grid layout shortened as CSS grid is a web development technique used by developers to structure even complex responsive web design layouts much faster than other techniques. Unlike the Div method, this technique offers an excellent and unique grid-based layout, with rows and columns, without the developer using floats and positioning.\n\n\n\nFlexbox\n\n\n\nThis is yet another Cascading Styles Sheet technique for styling layout. It is as well one of the best alternatives to tables in HTML.\n\n\n\nAre there some cases where using tables is a good choice?\n\n\n\nSure, you need tables to present certain data in HTML. Tables are only not good for layout designs, asides layout structuring the use of tables in HTML totally acceptable.\n\n\n\nConclusion\n\n\n\nYou can still use tables in your HTML but not for layout designs. You\u2019ve just read the side-effects of using tables for layouts; instead of tables, CSS Grid is the best, or, you could even use Divs.