Assessment wanted for styling a table

MDN Learn
#1

Hello! I’ve completed Test your skills: tables and would like to be assessed.

Link to the code in Glitch

#2

Hello @Arittra

you doing great well done and have a nice day :slight_smile:

#3

Hello @Arittra, once again great job :ok_hand: Everything looks fine to me but there are a few things that I wouldn’t have done the exact same way as you did.

:hash: :one:

All the text is aligned on the left, BUT the text in columns that have numeric values (Year formed and No. of album). For that reason, you could set text-align: left directly on the table and text-align: right on the other, more specific parts. I would go even further and group all these more specific part to set text-align: right on them with a single CSS rule, that way I don’t have to repeat it. It would result in something like that:

table {
  /* I omitted other rules such as border-collapse
  to go straight to the point */
  text-align: left;
}

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

:hash: :two:

Sometimes you just can’t change the HTML, and add special id attributes to the elements you want to target easily. That is why I encourage you to find a way to build a selector that has a higher specificity without changing the HTML.
You can do so by following these steps:
1: try finding which previously written selector S1 currently determines the style of the element you want to target
2: calculate the specifity of the selector S1
3: write a selector s2 that has a stronger specificity
Here are the selectors I would use (and the rules that go with them) to style the footer of the table:

tfoot th {
  text-align: right;
}
tfoot td:nth-child(2) {
  text-align: left;
}

:hash: :three:
Have a great day! :partying_face:

1 Like
#4

nice catch @louisono

i missed that well done and have a nice day :slight_smile:

#5

@louisono, thank you for your vivid explanation of this topic.

I did realize that changing the HTML is not the best solution but I didn’t know how to do it without assigning an id to the <tfoot> tag. Thanks for showing the way for doing it!

Also, your code is much less complicated and more efficient!

1 Like