Assessment wanted for table skill test

MDN Learn
#1

Hi guys, I just completed the table skill test, here is the link to my code https://codepen.io/daisymzh/pen/ExozREb and here is the link to the task page https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Tables_tasks . Please let me know if I did the task right or need some improvments. One thing bothers me is that I think I write too much CSS to achieve “align numbers right and align text left”, but I don’t know any other way to do it with less CSS. Hope I can get your advice.

#2

Hello There,

Well, First Great Work :tada: Keep it up.

I previously, did this exercise :grinning:.

I think you did it well but you could improve on your CSS and try to find some ways of doing it so that someone could easily understand what you did. It may be hard fora beginner to understand at first sight what you did.

You can check my Code. Let me know if this helped.

2 Likes
#3

Thank you, your code shows another way to do the task and that inspires me.

1 Like
#4

Hey @Disney and @daisymzh95,

Nice work both of you! A quick tip when writing CSS. Think about what the default style is that the browser applies and only override when you want something different.

For example, looking at the following code:

thead th:nth-child(1),tbody th:nth-child(1){
    text-align: left;
}
thead th:nth-child(2),tbody td:nth-child(2){
    text-align: right;
}
thead th:nth-child(3),tbody td:nth-child(3){
    text-align: right;
}
thead th:nth-child(4),tbody td:nth-child(4){
    text-align: left;
}

Text in td elements are left by default so, we can update the above to the following:

thead th:nth-child(1),tbody th:nth-child(1){
    text-align: left;
}
thead th:nth-child(2),tbody td:nth-child(2){
    text-align: right;
}
thead th:nth-child(3),tbody td:nth-child(3){
    text-align: right;
}
thead th:nth-child(4) {
    text-align: left;
}

Next we can change the first rule block to the following:

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

We can also remove the last rule:

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

And lastly we can combine the remaining :nth-child rules to avoid duplication. This results in the following:

th {
    text-align: left;
}

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

–
Schalk
Staff Community Manager - MDN Web Docs

1 Like
#5

I think we can even make it simpler. Since all these second and third children are inside rows (<tr>), we can write it like this:

th {
    text-align: left;
}

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

Without an element in front of :nth-child() it targets any element that is a child of tr.

3 Likes
#6

You are 100% correct, @mikoMK :tada:

2 Likes
#7

Thank you very much, very clear deduction.

1 Like