Still practicing React - need help with <table>

JavaScript
1

Code here: https://codesandbox.io/s/vylnyolmk5?fontsize=14

Problem: I want to refactor code to have the Header of

be re-usable. But am running into an issue where the table displays content of table to the RIGHT of header of table.

What am I doing wrong?

Thank you!

2

It’s nothing to do with React, your HTML is wrong. An HTML table, in terms of how you structure the elements, looks basically like:

table
  caption // content, you can put anything **inside** this
  thead
    tr
      th // content, you can put anything **inside** these
  tbody
    tr
      td // content, you can put anything **inside** these
  tfoot
    tr
      td // content, you can put anything **inside** these

You can put divs or whatever inside the caption/th/td elements. You can’t wrap other bits of the table in divs or whatever though.

1 Like