Assessment needed for Test Your Skills - Styling Tables

MDN Learn
#1

I think my finished table looks a lot like the one in the image provided, but this is a task that’s a bit more difficult to self assess. https://codepen.io/SnakeWhisperer/pen/mdWbprp Looks a bit different in codepen, actually, but much more similar in the MDN page.

I would also like to ask a question about border-collapse, if I can.

Why can’t I define borders for <tbody> or <tfoot>, or even <tr> without border-collapse set—or border-collapse: separate? I know it’s better to collapse them and it’s the idea of the task, but I noticed this and I’m trying to understand it. I had forgotten to set border-collapse: collapse and realized that the whole table took its borders, but not the <tfoot>. Tried with border-bottom for <tbody> but didn’t work either. <tr>s didn’t work either.

I know there is a separation between cells with border-collapse: separate; however, if <tr> is still a single element, what happens to its borders? Same goes for <tbody> and <tfoot>.

Thanks in advance.

#2

Hi @SnakeWhisperer

What a great name that is! :sunglasses:
I think I answered this question before. Does the below help?
“assessment help needed for tables task”

Ran

2 Likes
#3

i would agree with what @Ran said and after you read his comment

here is mine
that my guess also and i think if they allow it without bordercollapse and let us say someone tried the following
table,tfoot,tr,td,th{
border : whatever;
}

just imagine the number of boxes inside each other i think from view point it will be like 4 boxes inside each other which i am not sure if that would looks good and help the end user to see such thing and i think it would confus him more by not knowing which border surround which cell/tr/tfoot/table

but it just a thought so not sure why it does not work that way

hope that help and have a nice day both of you :slight_smile:

2 Likes
#4

Thanks, @Ran and @justsomeone. I appreciate your replies. And yeah, this is a name I chose when I started learning Python.

I also noticed that thing with the borders of <td> and <th> inside the <tfoot> in my efforts to make that top border work before realizing I hadn’t set border-collapse: collapse. That, in fact, worsened my confusion about this. In my reasoning, which I think is a bit similar to @Ran’s when he says, “My hunch is that a table element would be a box in itself and then the td (table data) and tr (table row) would creat boxes within this,” if the <td>, the <th>, and their direct ancestor <tr> inside the <tfoot> are actual boxes, they should all probably take borders, irrespective of their separation. The separated borders of the <th> and the <td> make perfect sense with the initial value of separate for border-collapse when it’s not set. Different story with <tr>.

Now, considering @justsomeone’s comment, it also makes a lot of sense. I see it would enable developers to end up with all those borders one inside the other.

2 Likes