18

Is it good practice to use CSS display: grid instead of the html tag <table>?

There are many times when <table> in responsive design is difficult to use. Especially for complex shop basket tables and handling colspan etc. However with css-grid it's an easy one.

I see some problems in styling rows like <tr> for table. There are ways with nth-child stuff. What do you think about it?

Jose V
  • 1,655
  • 1
  • 17
  • 31
kingmauri
  • 345
  • 1
  • 3
  • 9
  • 1
    The answer is, it depends. – Mr Lister Mar 30 '18 at 20:25
  • 1
    This question is either too broad, **opinion based** or requires discussion and so is off-topic for Stack Overflow. If you have a specific, answerable, programming issue, please provide full details. – Paulie_D Mar 30 '18 at 21:07
  • @Paulie_D All of those. – Rob Mar 30 '18 at 21:23
  • 3
    I don't see how it is opinion based, there are clear objectives that HTML tags and CSS aim to provide and based on these objectives we can determine whether HTML/CSS is being used as they were meant to, using these tools in ways that they were not meant to be used has objective consequences. Saying that this is opinion based is like saying that using semantically-meaningful HTML is "just an opinion". – Jose V Jun 24 '20 at 00:58
  • Maybe duplicate of https://stackoverflow.com/q/83073/2506522 – betontalpfa Jul 27 '20 at 16:33

1 Answers1

10

If you know CSS grid and are comfortable using it, there is no good reason not to use it. Support is good enough CSS grid support at this point

In fact I highly recommend using anything over <table> for layout. Tables should be used for tables with data in it. Flexbox is also a great option depending on the situation. Ideally you would know when CSS grid is appropriate and when flexbox is, or when both can be used in tangent.

In conclusion it is 2018 and tables should be used as little as possible for this purpose. Move towards the future with flexbox and CSS grid.

StefanBob
  • 4,857
  • 2
  • 32
  • 38
  • Isn't it better to use tables if you need data to be confined to a specific row or column which has a heading? I cannot see how a CSS grid can dynamically keep the fruit in the fruit column and meat in the meat column. If a new cell or info is added, how can a grid layout sort correctly? Wont everything fall apart? – Joshua Robison Jun 12 '23 at 04:33
  • 1
    “Tables should be used for tables with data in it.” – StefanBob Jun 13 '23 at 05:09