Assessment: Structuring tabular planet data

I didn’t go below Project Brief and completed tabular data of planets, then after I saw Steps and Hints at MDN page.

First, start with links;

Here I see a difference. In MDN Example, first and second columns are Bold and Background Color is same as the table header, but I could only get bold text with lowest efforts though I could acheive this using inline CSS and that’s not a proper approach. Other than that, everything looks fine.

I need you to assess it. Thanks in advance…

Hi there @Murtaza_Abbasi!

First of all, well done on some really good work here. This is a pretty complicated table to put together, and you’ve got it very nearly perfect.

On to the difference you have observed — this is because we’ve used table heading (<th>) elements for the row headers as well as the column headers — this is perfectly allowed, and you should just use those, rather than putting in extra CSS to style your ceels based on their rowspan/colspan attributes, which aren’t particularly reliable anyway — you can’t guarantee they’ll always be there in every instance.

You only missed one other thing — scope attributes on the row <th> elements. These are there to tell screenreaders whether a header is a header for a row, column, or group of rows/columns. Have a look at the source code of our version so you can see what we did.

1 Like

Thanks for giving your time assessing my code.

I do have used scope attribute with col value in <th> element.

Yes, you did, and those uses were perfect. But you can also use scope="row" or scope="rowgroup" on the row headers (the extra <th> elements I was suggesting you put in, in the first part of my last response).