Let's say I want a two column layout that takes up the full width of my page with each column taking up half the space. Using tables and no grid, I'd have to do something like:
I'd also have to adjust the border spacing and cell padding in CSS or as an attribute on the table because the default style for tables in every browser I know of adds them by default.
Compared to using a grid system (12 columns for the sake of example):
One less nesting level, but no big deal. Now, let's say I want to have a responsive design whereby if there isn't enough room to display the columns side by side, the second column will reflow to be below the first. With my grid, all I have to do is add a media query to my CSS: my markup can be left untouched.
With the table, well, you're out of luck. The table markup determines layout, and you can't reflow table columns to make them table rows using CSS. I suppose you could use some JavaScript to rewrite the table on the fly, but just using a grid in the first place seems a lot easier.
Another benefit of a grid is that if you do care about semantics, you don't have to use meaningless divs: you can use any block-level element. This would work just as well as the grid example above:
With a table-based layout, if you want to take advantage of semantics, you'd have to nest those inside each of the tds.
A third example: let's say you have the two column layout, but you want to dynamically add or remove the second column. If you're using a grid, no problem: the second column can be hidden or shown without affecting the first column's width.
If you're using a table, the first td will reflow because table columns will take up the entire width of the table. To get the same effect, you'd either have to adjust the width of the table or remove the contents of the second column's td instead.
The above also applies if you just want to change the width of the second column: if, say, you wanted to make the second column 25% width and leave the first at 50%, it's no problem with a grid: just change the second column's class to "span3". With a table, if you change the second column's width to 25%, the first column will expand to take the rest of the table's width. You'd either have to add a third td as a placeholder or resize the table itself.
There are a lot of use cases like these where having a grid winds up being a lot simpler than using a table. The benefit of a table-based layout was that creating a cross-platform grid was hard, and there wasn't a whole lot of prior art, so a lot of times you might have to start from scratch. But if you already have a grid-based system available, there's not much point to forgo that and use a table.
Compared to using a grid system (12 columns for the sake of example):
One less nesting level, but no big deal. Now, let's say I want to have a responsive design whereby if there isn't enough room to display the columns side by side, the second column will reflow to be below the first. With my grid, all I have to do is add a media query to my CSS: my markup can be left untouched.With the table, well, you're out of luck. The table markup determines layout, and you can't reflow table columns to make them table rows using CSS. I suppose you could use some JavaScript to rewrite the table on the fly, but just using a grid in the first place seems a lot easier.
Another benefit of a grid is that if you do care about semantics, you don't have to use meaningless divs: you can use any block-level element. This would work just as well as the grid example above:
With a table-based layout, if you want to take advantage of semantics, you'd have to nest those inside each of the tds.A third example: let's say you have the two column layout, but you want to dynamically add or remove the second column. If you're using a grid, no problem: the second column can be hidden or shown without affecting the first column's width.
If you're using a table, the first td will reflow because table columns will take up the entire width of the table. To get the same effect, you'd either have to adjust the width of the table or remove the contents of the second column's td instead.
The above also applies if you just want to change the width of the second column: if, say, you wanted to make the second column 25% width and leave the first at 50%, it's no problem with a grid: just change the second column's class to "span3". With a table, if you change the second column's width to 25%, the first column will expand to take the rest of the table's width. You'd either have to add a third td as a placeholder or resize the table itself.
There are a lot of use cases like these where having a grid winds up being a lot simpler than using a table. The benefit of a table-based layout was that creating a cross-platform grid was hard, and there wasn't a whole lot of prior art, so a lot of times you might have to start from scratch. But if you already have a grid-based system available, there's not much point to forgo that and use a table.