Help: Structuring planet data assesment

Hi, I’m having trouble setting a border around the whole ‘Name’ column in this HTML table.

It should look like this: https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html

My codepen is here: https://codepen.io/bshanz/pen/Vwyvzym

Any help is appreciated!

Hey Brian, You gotta add a <cologroup> element after the <caption> element and before the <thead> element of the table, and add <col> as it’s child elements like this:

<colgroup>
<col>
<col>
</colgroup>

Note that you have to add as many <col>'s as there are columns in your table or you can simply use the span attribute to ease up things a bit and add minimum <col> elements. Then you can add style of your choice to that particular <col> that happens to be the column you wish to tweak. For example:

<colgroup>
<col span="2">
<col style="border: 2px solid black">
</colgroup>

You can check this code pen of mine if you could’nt get the desired output. Hope my post helped you.

2 Likes

Amazing – thanks for your help, Dinesh!

1 Like