What Is The Best HTML Layout Technique? DIVs Vs Tables

I find using tables as the backbone easier to manipulate, specially when aligning things vertically. But I only seem to find code samples using DIV with heaps of CSS that looks lik

Solution 1:

Using <table> for layout is considered a hack.

Layouts used to be done with <table> a long time ago before CSS was around. Nowadays, it common practice to separate out the structure, styling, and behavior of your project into HTML, CSS, and JavaScript, respectively.

With HTML5, there has been a push for using semantic tags such as <article>, <section>, and so on in place of <div>. Nonetheless, <div> is still fine and 100% preferable over <table> unless you're specifically working with tabular data. Even then, the actual layout styling should still take place in your CSS.

Solution 2:

current best practices is to use <div> instead of <table> for layout.

main reasons are:

• <table> are inflexible, in the sense that a table layout is embedded in the html structure of the table element and his childs (ie <tr><td>)

• <div> allows lots of freedom on layout with css regardless of their html structure

• <table> layout can be easly achieved using with css

note that for tabular data the best practice is to use <table>

also note that semantic HTML5 elements like <header> <nav> <article> <section> <footer> are consider a better choice for markup than <div>

Solution 3:

<table> is an HTML element that should be used to display formatted data, tabular data. We used it to make web layouts, but we tried to stop it 15 years ago.

Why ?

Because <table> is not designed to make website layouts, just to display and sort data (that's logically what a table would do). But CSS is. CSS can provide you many ways to think your layout: box model, flexbox, and some stuff like display: table that you should find useful.

Remember : HTML provides and structures data, CSS puts the style.

Solution 4:

Back in days when there was no CSS3 and flexbox tables layouts was good because it' provided most of modern css functionality.

Modern programmers uses <div> and CSS3 and/or flexbox.

Currently when we have HTML5 even <div> is not so good solution as all elements in your page has some meaning. Now we have elements like <nav>, <section>, <aside> and much more

Don't use table for layout as it has different meaning than div, and you can achieve same (or maybe better) results with CSS