Test your skills: tables -- help wanted

MDN Learn
1

Hello :slight_smile:

I attempted this assessment and I think I understood the lesson about this pretty well but I found the assessment a little difficult to be honest. I used the code that logically makes sense to me but my end result looks different to what it’s meant to look like.

I purposely used different colors just to differentiate. I mean in terms of alignment, my end result doesn’t look like how the example wants it to look like.

image
image721×803 91.4 KB

The top part of the image above is what the example should look like, if we just ignore that I used different colours and look at my ‘No of Albums’ column, it isn’t aligned like it should be in the example and I’m not sure why. Also my footer doesn’t match the example.

I’m happy with my ability to add borders at specific places, I’m happy with striping tables, but I don’t feel happy with my ability to align and use the ‘nth-child’ property in table spacing.

Any help with this is much appreciated :blush:

2

Hello @Ahmed1 :wave:
Welcome back!

It’s not possible to use comma notation inside :nth-child(). You have to use two selectors:

tr :nth-child(2),
tr :nth-child(3) {
  text-align: right;
}

I also changed the selector a bit so that it also applies to the <th> inside <thead> row. (We don’t have to use an element in front of :nth-child())

Because of the colspans in <tfoot> we only have two cells there. This means we can do something like this to align them:

tfoot tr :nth-child(1) {
  text-align: right;
}

tfoot tr :nth-child(2) {
  text-align: left;
}

I hope that helps :slightly_smiling_face:
Michael

1 Like
3

Ahh thanks, I didn’t know that we couldn’t use comma notation inside :nth-child()

Thank you for also fixing the tfoot and explaining that :slight_smile:

Have a good rest of your weekend Michael, you’ve been really helpful as always!

1 Like