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).