Is CSS Table Layout Dead and Gone?

HTML & CSS
1

Hi all. There are many articles out there reminding us that Flexbox isn’t dead because of the advent of Grid. They are both tools in our toolbox that have essentially different purposes, even though there’s some overlap in what they can do.

I’ve been wondering lately about CSS Table layout, though. It’s another tool, but I’m struggling to think of something it can do that can’t be done (probably better) by Grid. Each time I think of something Table layout might be better at, I find a simple way to do it in Grid.

It’s funny that there’s basically no info online about CSS Table layout any more — even in some of the big CSS references like MDN. It’s like it’s disappeared off the map. Even if you google “Is CSS Table layout dead?”, nothing comes up (at least that I could find).

So I’m really here to discuss this, and see if anyone can come up with a use case where CSS Tables can do something better than Grid. Or should we just try to forget that CSS Table layout ever existed? :lol:

(Note to those who’ve never heard of CSS Table layout: it’s not the same as HTML table layout. CSS Table layout was an attempt to wean us off HTML table layout, so that we could use semantic HTML and still have complex, grid-like layouts. It was quite revolutionary in its day, and finally came into its own — to some extent — once it was supported in IE8. But it never really took off like Grid has. It was best suited, it seems, to certain elements within a layout than for doing an entire layout, although it was perfectly capable of doing that.)

EDIT:

Here’s the actual specification, and the CSS CSS Box Alignment Module Level 3 mentions table layout throughout, along with Flex, Grid and normal block layout. It’s interesting to compare properties that apply to display: table and those that apply to flex and grid, and which they occasionally share.

Table layout won’t be removed from CSS, of course (as it always aims to be backwards-compatible), but my question still stands: is there really anything CSS table layout can do either better than Flexbox or Grid, or that they can’t do at all?

2 Likes
2

I have never used CSS Table Layout so it was dead to me, but I have used a mix of table and grid. I e set table column width using grid.

tbody tr {
  display: grid;
  grid-template-columns: 50px auto 56px;
}
2 Likes
3

I could not resist asking chatGPT (as I never had heard of it):

The “table-layout” property in CSS is used to control the algorithm that the browser uses to lay out the table cells in an HTML table. There are several benefits of using the “table-layout” property:

  1. Improved rendering performance: By setting the “table-layout” property to “fixed”, you can enhance the rendering performance of large tables. This is because the browser can determine the table layout based on the first row of data, allowing it to render the table more quickly.

  2. Consistent column widths: When “table-layout” is set to “fixed”, the browser assigns equal widths to all columns based on the width of the first row of cells. This ensures that the column widths remain consistent throughout the table, even if the content in some cells is larger or smaller than others. It helps create a more visually balanced and structured table layout.

  3. Easier styling and responsive design: With “table-layout: fixed”, you can set explicit widths for columns, making it easier to style the table and align content precisely. Additionally, this property facilitates responsive design because you can define specific column widths for different screen sizes, ensuring optimal display across various devices.

  4. Improved accessibility: Using the “table-layout” property can improve accessibility by allowing assistive technologies to accurately interpret and navigate the table structure. The consistent column widths and predictable layout enhance the overall usability for users who rely on screen readers or other assistive technologies.

  5. Better control over table layout: By explicitly defining the table layout algorithm with “table-layout”, you have more control over how the table is rendered. This can be useful when working with complex tables that require specific column widths or alignment.

Overall, the “table-layout” property provides greater control, performance improvements, and consistent rendering for HTML tables, making it a valuable tool for creating well-structured and visually appealing table layouts.

4

@sibertius this has nothing to do with CSS tables. It is referring to the CSS table-layout property for laying out HTML tables.

2 Likes
5

I am also interesting to explore this, but the answer about CSS Table Layout was from ChatGPT. Not mine, as I have no clue :slight_smile:

1 Like
6

Haha, yes, it’s amazing that the web searches I was doing could only handle CSS properties for styling HTML tables. The internet seems to have forgotten that there is/was a whole CSS Table Layout module that was just for styling divs and the like in a way that mimicked HTML tables. I’ve been out of the game for a while, so I’m amazed to step back into CSS and find a general amnesia regarding CSS Table Layout!

7

Is not this what you are talking about?

8

No, those are properties for styling an HTML table. CSS Table layout starts with something like div {display: table;}, just as you would nowadays set a container to div {display: flex;} or div {display: grid;}.

Other property/value pairs include display: table-row and display: table-cell. None of this relates to HTML tables at all, but is for styling any element, just as you would do with Flexbox or Grid.

So CSS table layout was offering what Grid offers today, some fifteen years ago, but just with just a fraction of the power and options offered by Grid.

9

As I said, this is completely new to me, so I asked ChatGPT again. Is this what you mean?

<style>
  .table-wrapper {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  .table-row {
    display: table-row;
  }

  .table-cell {
    display: table-cell;
    padding: 8px;
    border: 1px solid black;
  }

  .column1 {
    width: 25%;
  }

  .column2 {
    width: 50%;
  }

  .column3 {
    width: 25%;
  }
</style>

<div class="table-wrapper">
  <div class="table-row">
    <div class="table-cell column1">Column 1</div>
    <div class="table-cell column2">Column 2</div>
    <div class="table-cell column3">Column 3</div>
  </div>
  <div class="table-row">
    <div class="table-cell column1">Content 1</div>
    <div class="table-cell column2">Content 2</div>
    <div class="table-cell column3">Content 3</div>
  </div>
  <div class="table-row">
    <div class="table-cell column1">Longer Content 1</div>
    <div class="table-cell column2">Longer Content 2</div>
    <div class="table-cell column3">Longer Content 3</div>
  </div>
  <div class="table-row">
    <div class="table-cell column1">Short 1</div>
    <div class="table-cell column2">Short 2</div>
    <div class="table-cell column3">Short 3</div>
  </div>
</div>
1 Like
10

Yes, that’s more like it. :slight_smile:

Here’s the actual spec: https://www.w3.org/TR/CSS21/tables.html

I’m just reading now about layout modules and what replaces what. Table layout is still listed along with block, grid and flex in the alignment module: https://www.w3.org/TR/css-align-3/

11

It looks ugly to me. The traditional <table> is easier to follow and using less space. I tend to avoid <div> if I can. I was not aware of <div> table before and I have no intention to wake up this beast.

On the other hand I have not a good relation to grids either. Except from styling <table tr> :-).

But I guess this is a personal preference rather than a coding issue?

IMHO you could consider this as an option :slight_smile:

12

Yes, the code GPT code above is quite ugly (there’s a whole lot of unnecessary classes), but CSS table layout looks quite similar to Flexbox or Grid layout. But I do think there were more HTML elements needed to make table layout work compared with Flexbox and Grid.

13

I still use display:table when the need arises because it is a shrink to fit algorithm. You don’t need a width for margin:auto to work so you can centre widthless boxes more easily than other methods.

It’s still the best way to lay out an image and caption where the caption automatically wraps at the width of the image.

However, most other uses can be duplicated with grid or flex so it just depends on what you are familiar with some times.

Grid and flex have things in common also and some layouts could use either without detriment so I don’t see that one is better than the other really means anything.

2 Likes
14

Nice examples, Paul! I knew there must still be some good uses for display: table, as there are for float. :slight_smile:

1 Like
15

There’s always going to be something awkward and I find that you can usually bend the older rules to do something they weren’t meant to do unlike the new rules which have more defined behaviours,

This is an old demo that creates a layout that flex could not do (without having the html arranged differently (and neither could grid)).

(Resize the screen smaller to see the effect)

Best to remember that in CSS there is usually more than one way to do the same thing. :slight_smile:

3 Likes
16

The whole point of CSS tables was to get people away from the old ways of uing actual HTML tables for laying out content that isn’t tabular data, as in the non-semantic use of tables from the 90s (though it carried on much later).
It gave you the ablitiy to use proper semantic HTML mark-up appropriate to the content, but style it just like an HTML table. It doesn’t have to use <div> you can table style any element you choose. So it could be used for multi colunm layouts and suchlike.
So it was pretty good for that kind of thing.
Now we have flex and grid which can do a lot more.

2 Likes
17

Was that before the template area specs came out? Because you can do that layout in grid (relatively easily too)

1 Like
18

Yes grid can do that one - I should have checked. :slight_smile:

I was looking at the [old thread](https://www.sitepoint.com/community/t/can-flexbox-do-this-2-column-setup/285440/13) that the demo came from and saw that I mentioned that grid couldn’t do it but didn’t notice the original had an extra sidebar wrapper which meant you couldn’t move the side-top and side-bottom as they would be nested items and not part of the grid (nested grid could probably do it now).

2 Likes
19

@PaulOB — That box-to-the-right Pen is a lot of fun. I’m sure there are more Grid versions that could be added, such as these:

.wrap53 {display: grid; grid-template-columns: 1fr 50px; grid-template-areas: ". box";}
.wrap53 .box {grid-area: box;}

.wrap54 {display: grid; grid-template-columns: 1fr;}
.wrap54 .box {grid-column: -1;}

.wrap55 {display: grid; grid-template-columns: 1fr;}
.wrap55 .box {margin-left: auto;}

.wrap56 {display: flex;}
.wrap56 .box {margin-left: auto;}

<p>Example 53: Grid<br> 
<code>.wrap53 {display: grid; grid-template-columns: 1fr 50px; grid-template-areas: ". box";}<br>
.wrap53 .box {grid-area: box;}</code></p>

<div class="wrap wrap53">
  <div class="box">53</div>
</div>

<p>Example 54: Grid<br> 
<code>.wrap54 {display: grid; grid-template-columns: 1fr;}<br>
  .wrap54 .box {grid-column: -1;}</code></p>

<div class="wrap wrap54">
  <div class="box">54</div>
</div>

<p>Example 55: Grid<br> 
<code>.wrap55 {display: grid; grid-template-columns: 1fr;}<br>
  .wrap55 .box {margin-left: auto;}</code></p>

<div class="wrap wrap55">
  <div class="box">55</div>
</div>

<p>Example 56 (simpler version of 39): Flex<br> 
<code>.wrap56 {display: flex;}<br>
  .wrap56 .box {margin-left: auto;}</code></p>

<div class="wrap wrap56">
  <div class="box">56</div>
</div>
2 Likes
20

Thanks Ralph :slight_smile:

I’ve added them to the demo thanks.

Note that 55 and 56 are really the same as my very first number one in that margin-left:auto will push a block element to the right. We could do that for some of the other block type displays but it would still be the margin auto that was the main trick but does still show that there are many variations still. :slight_smile:

1 Like