4 ms·

I started learning web development back in the day of IE6 and table-based layouts. It's actually incredible how many modern designs I see today that are portray

I started learning web development back in the day of IE6 and table-based layouts. It's actually incredible how many modern designs I see today that are portraying a table, but have recreated the <table> element (and its associated <tr> and <td> elements) in a soup of flex layout divs and such. With that said, centering is not difficult. The difficulty comes in not realizing that flex layout is essentially the same rows and columns you used before, but with better controls for wrapping elements (tables can't do that easily). Edit: Some more nostalgia: Cutting out rounded corners and shadows in Photoshop with the slice tool because there was no border-radius or box-shadow at the time :)

blondin 5y ago
wait. flex-based layout has not fixed centering. nothing which has been done since table-based layout has an intuitive and cross-browser way for doing vertical and horizontal centering. that's what i think GP meant. i do not want to see tables back but i do admit that they did exactly, and intuitively, what you would expect of them.
- trs8080 5y ago
  ??? .box { display: flex; align-items: center; justify-content: center; width: 500px; height: 500px; } .box div { width: 100px; height: 100px; } <div class="box"> <div>this is centered vertically and horizontally</div> </div> also, using tables for layout isn't semantically correct. it's like using `map` as a for loop. also, consider folks with disabilities who rely on screen readers.
- eyelidlessness 5y ago
  Centering has been an easily solved problem with both flex and grid for years. If you’re having trouble with conflicting styles, you can revert them with, well, revert. You can even revert all of them with revert: all. But I don’t recommend that. If you’re still having trouble centering things I’d recommend getting familiar with the cascade and removing styles that conflict with what you’re centering.
  - eyelidlessness 5y ago
    Can’t edit now but I’d be remiss if I didn’t correct myself. You can revert all styles with `all: revert`, but I still don’t recommend that.
dylan604 5y ago
>Cutting out rounded corners and shadows in Photoshop with the slice tool because there was no border-radius or box-shadow at the time :) Dreamweaver and it's auto-slicing and table layout function was insane. So many bad web designs were created by me with it.
- egeozcan 5y ago
  I was having so much fun also with Coffee Cup HTML Editor and its "DHTML" widgets. Slice in Dreamweaver, export, open in Coffee, add useless widgets, re-export, drag and drop the horrendously generated HTML file in random ftp program and voila, you have something that maybe works on a specific version of IE but a lot of fun.
Bilal_io 5y ago
The reason I personally prefer using divs with flexbox is responsiveness, and it gives me more control overall. I've always hated tables, even for tables, let alone to structure a whole page.
- wildrhythms 5y ago
  Tables are special. The width of a cell is determined by the widest cell in the column. The height of a cell is determined by the tallest cell in the row. I have yet to see a convincing replication of the simplicity of the native <table> element with a flex layout. Consider the colspan and rowspan attributes for additional complexity. You are right that flex offers much more... flexibility. But tables adhere to a certain set of rules that I don't think is easily implemented with flexbox.
  - Bilal_io 5y ago
    "The width of a cell is determined by the widest cell in the column. The height of a cell is determined by the tallest cell in the row" I've achieved the same with css grid. I genuinely don't think table are needed anymore, unless you're building a page to display data and don't care about responsiveness.
    - wildrhythms 5y ago
      To my knowledge, there is no implementation for rowspan or colspan attributes in a flex grid. Also, to note, I am not advocating for table-based layouts for non-tabular data.
      - JimDabell 5y ago
        Parent was talking about grid. You seem to be talking about flexbox but calling it “flex grid” instead – you know grid and flexbox are two separate things, right? Grid definitely has the equivalent of rowspan/colspan.
        deleted 5y ago
deergomoo 5y ago
> It's actually incredible how many modern designs I see today that are portraying a table, but have recreated the <table> element (and its associated <tr> and <td> elements) in a soup of flex layout divs and such To play devil’s advocate, <table> can be frustratingly inadequate even for tabular data, if you want to add some bells and whistles. Things like resizable/reorderable columns aren’t too tricky, but if you want things like sticky rows or columns things get very messy very quickly. I’m convinced that the negative qualities of modern web development stem from the built-in controls being largely stuck in 1995.
- egeozcan 5y ago
  Just a heads up (pun maybe subconsciously intended): "position: sticky" works surprisingly well on table-headers. Demo: https://jsfiddle.net/Lkye3cpq/ https://jsfiddle.net/Lkye3cpq/
- paulryanrogers 5y ago
  As a counterpoint Firefox can select and copy columns or rows from traditional tables.

blondin 5y ago

wait. flex-based layout has not fixed centering. nothing which has been done since table-based layout has an intuitive and cross-browser way for doing vertical and horizontal centering. that's what i think GP meant. i do not want to see tables back but i do admit that they did exactly, and intuitively, what you would expect of them.

trs8080 5y ago
??? .box { display: flex; align-items: center; justify-content: center; width: 500px; height: 500px; } .box div { width: 100px; height: 100px; } <div class="box"> <div>this is centered vertically and horizontally</div> </div> also, using tables for layout isn't semantically correct. it's like using `map` as a for loop. also, consider folks with disabilities who rely on screen readers.
eyelidlessness 5y ago
Centering has been an easily solved problem with both flex and grid for years. If you’re having trouble with conflicting styles, you can revert them with, well, revert. You can even revert all of them with revert: all. But I don’t recommend that. If you’re still having trouble centering things I’d recommend getting familiar with the cascade and removing styles that conflict with what you’re centering.
- eyelidlessness 5y ago
  Can’t edit now but I’d be remiss if I didn’t correct myself. You can revert all styles with `all: revert`, but I still don’t recommend that.

dylan604 5y ago

>Cutting out rounded corners and shadows in Photoshop with the slice tool because there was no border-radius or box-shadow at the time :) Dreamweaver and it's auto-slicing and table layout function was insane. So many bad web designs were created by me with it.

egeozcan 5y ago
I was having so much fun also with Coffee Cup HTML Editor and its "DHTML" widgets. Slice in Dreamweaver, export, open in Coffee, add useless widgets, re-export, drag and drop the horrendously generated HTML file in random ftp program and voila, you have something that maybe works on a specific version of IE but a lot of fun.

Bilal_io 5y ago

The reason I personally prefer using divs with flexbox is responsiveness, and it gives me more control overall. I've always hated tables, even for tables, let alone to structure a whole page.

wildrhythms 5y ago
Tables are special. The width of a cell is determined by the widest cell in the column. The height of a cell is determined by the tallest cell in the row. I have yet to see a convincing replication of the simplicity of the native <table> element with a flex layout. Consider the colspan and rowspan attributes for additional complexity. You are right that flex offers much more... flexibility. But tables adhere to a certain set of rules that I don't think is easily implemented with flexbox.
- Bilal_io 5y ago
  "The width of a cell is determined by the widest cell in the column. The height of a cell is determined by the tallest cell in the row" I've achieved the same with css grid. I genuinely don't think table are needed anymore, unless you're building a page to display data and don't care about responsiveness.
  - wildrhythms 5y ago
    To my knowledge, there is no implementation for rowspan or colspan attributes in a flex grid. Also, to note, I am not advocating for table-based layouts for non-tabular data.
    - JimDabell 5y ago
      Parent was talking about grid. You seem to be talking about flexbox but calling it “flex grid” instead – you know grid and flexbox are two separate things, right? Grid definitely has the equivalent of rowspan/colspan.
      - deleted 5y ago

deergomoo 5y ago

> It's actually incredible how many modern designs I see today that are portraying a table, but have recreated the <table> element (and its associated <tr> and <td> elements) in a soup of flex layout divs and such To play devil’s advocate, <table> can be frustratingly inadequate even for tabular data, if you want to add some bells and whistles. Things like resizable/reorderable columns aren’t too tricky, but if you want things like sticky rows or columns things get very messy very quickly. I’m convinced that the negative qualities of modern web development stem from the built-in controls being largely stuck in 1995.

egeozcan 5y ago
Just a heads up (pun maybe subconsciously intended): "position: sticky" works surprisingly well on table-headers. Demo: https://jsfiddle.net/Lkye3cpq/ https://jsfiddle.net/Lkye3cpq/
paulryanrogers 5y ago
As a counterpoint Firefox can select and copy columns or rows from traditional tables.