Add live final version to styling tables article #41405
Conversation
|
|
||
| - A {{cssxref("table-layout")}} value of `fixed` is generally a good idea to set on your table, as it makes the table behave a bit more predictably by default. Normally, table columns tend to be sized according to how much content they contain, which produces some strange results. With `table-layout: fixed`, you can size your columns according to the width of their headings, and then deal with their content as appropriate. Chris Coyier discusses this technique in more detail in [Fixed Table Layouts](https://css-tricks.com/fixing-tables-long-strings/). | ||
|
|
||
| - We've coupled the fixed layout with a {{cssxref("width")}} of `80%`, a {{cssxref("min-width")}} of `1000px`, and a {{cssxref("margin")}} of `0 auto`. These settings mean that the table will mostly fill a wider viewport and be centered horizontally, while on narrow viewports the table will stay at a legible width and extend off the screen. Mobile users, for example, can then scroll to read the whole table. This is preferable to having the table stretch the width of a narrow screen and be cramped and unreadable. |
There was a problem hiding this comment.
You changed this above.
I think this is the only "have to" fix in the doc.
There was a problem hiding this comment.
Good call; I've updated that text to fit with the new code. I've removed the bit about mobile responsiveness, as it didn't seem that relevant to the main thrust of the article, and it made the live example look crappy.
| {{embedlivesample("styled", "", "500")}} | ||
| {{embedlivesample("punk-style", "", "500")}} | ||
|
|
||
| However, this design is rather garish. In this article, we'll get you to mark it up using some best practices for table design — as outlined in [Web Typography: designing tables to be read not looked at](https://alistapart.com/article/web-typography-tables/). |
There was a problem hiding this comment.
FWIW I'm not really sure why this example exists at all, except perhaps as a segue to the how to design article.
There was a problem hiding this comment.
That was the design I originally went with on this article, but I didn't want to throw it away completely. I decided to keep it as an example to show that you can do quite a lot when styling a table if you want to, and then show the reader how to build up a slightly more normal "best practice" example.
|
|
||
| Let's work through styling our table example together. | ||
|
|
||
| 1. To start with, make a local copy of the [sample markup](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/styling-tables/punk-bands-unstyled.html) and save it in a working directory somewhere on your local computer. |
There was a problem hiding this comment.
This is not a challenge or test, but in those you have somewhat standardized the explanation of the workflow where they copy-paste the example. If you want to do it this way then fine but noting that it is a different approach.
There was a problem hiding this comment.
There isn't much harm in a little bit of variation, but I would prefer to keep the source code all available on the page rather than linking out to the learning-area repo, which we are trying to reduce our reliance on.
To fix this, I've replaced the external repo link with a relative link to the section earlier on that lists the source HTML.
Description
I decided to update the Styling tables article to make a few small styling updates and add a live version of the finished design for readers to compare their work against.
Motivation
Additional details
Related issues and pull requests