learning-area icon indicating copy to clipboard operation
learning-area copied to clipboard

Change order of tbody and tfoot in tables/advanced

Open Mallonbacka opened this issue 1 year ago • 1 comments

The matching MDN article has been updated to state the order that <thead>, <tbody> and <tfoot> should be in, according to the HTML spec. For some more background on this, take a look at https://github.com/mdn/content/pull/32909

Since this table appears in that page, it should be updated to follow the guidance in that page.

I looked at the other tables in this directory, and didn't see any more with a <tfoot>, so I think this is the only one.

Mallonbacka avatar Apr 03 '24 14:04 Mallonbacka

I think this might be a more involved change; it may be better to open an issue.

The larger problem is that html/tables/advanced/spending-record.html (the "starting point" for the lesson) has the SUM row right below the table header:

https://github.com/mdn/learning-area/blob/9efffba0655d331a079da3d178486ed53e547e42/html/tables/advanced/spending-record.html#L14-L26

And the content at https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced#active_learning_adding_table_structure implies outright asserts that you can simply wrap it in <tfoot> to change its position in the table:

  1. First of all, make a local copy of spending-record.html and minimal-table.css in a new folder.
  2. Try opening it in a browser — You'll see that it looks OK, but it could stand to be improved. The "SUM" row that contains a summation of the spent amounts seems to be in the wrong place, and there are some details missing from the code.
  3. Put the obvious headers row inside a <thead> element, the "SUM" row inside a <tfoot> element, and the rest of the content inside a <tbody> element.
  4. Save and refresh, and you'll see that adding the <tfoot> element has caused the "SUM" row to go down to the bottom of the table.

So, the lesson is "teaching" the wrong structure, leading to the bad code in spending-record-finished.html. Changing the end-point alone won't fix the lesson.

ferdnyc avatar Apr 03 '24 19:04 ferdnyc