Assessment required for styling tables skill test

MDN Learn
1

Hi, everyone reading this! I’m a new member to the community.

I would like some feedback on my solution to the tables styling task:

I downloaded the html template file provided as a resource, but I’ll paste the whole thing, not only the css. So here’s my code:

Please, point me if I made mistakes regarding structuring, approach or something code/css related.

Thanks in advance. :slight_smile:

2

All good bro, you just forgot to add the padding-left in No. of Albums…
and it would look better if the whole table were in center of the page

3

Hi, thanks for the response. I’m not sure what you mean, though.
Maybe, I should have put it in a CodePen or Glitch editor and wrote comments for better orientation.

In short, the whole table is in a figure element, which has side margin of auto, so it should be centered. And also there is padding applied to all the cells in the table. It’s just that it is considered a better practice to align text content to the left, numerical data to the right and the corresponding headings respectively. There’s an external article provided as a resourse in the task assesment page, contributed to styling tables.

I’m posting the css code only:
Here is the link.

4

This is ur code:

there’s only one small detail that is the padding-left

this is the one that i modify

thead th:nth-child(3) {
min-width: 15%;
text-align: right;
padding-left: 40px;
}

figure {
display: flex;
justify-content: center;
max-width: 50%;
margin: 3em auto;
overflow-x: auto;
}

in ur code it seem’s that when the screen is bigger than 1460 width pixels, the figure block will not be in the center.

you can always check if the layout will be in the right place in bigger or smaller screens, this will be explained further so you do have to worry now how to do it for now.

5

Yeah, I see now. My screen is smaller and the header cells behave as expected. When trying to emulate the same conditions as on your device (1460px) I don’t see this particular “clustering” of the text in the cells, though.

With your screensize it should have produced a wider gap in these cells. Because I’ve used “min-width”. This was the idea. But, apparently, there are some weird things going on with the proportions.
50% max-width of the parent container (figure element) >> 15 % min-width of the second and third cell (th element) from the thead section of the table.

I will play around with the width, maybe, using just the width property, instead of min-/max-width. And see what happens. :slight_smile:

Thanks for the feedback, again! :slight_smile: