Table Data Challenge

Create an HTML table with at least 3 columns and a header row. Above the table, place one input for each column, and an "Add" button. When the user enters information into the inputs, and clicks "Add", the JavaScript code should append a new row to the table. Each cell of the new row should contain the text from one of the inputs. After a new row is entered, the inputs should all be cleared.

Ideas

The table can contain any type of data. One example could be a Basketball Stats table. Each row could represent a player, and there could be columns for name, position, height, career points, career rebounds, etc.

Styles

Make sure the table looks nice. At the very least, it should have some borders so that each cell is distinct.

Extra Challenge

To make it even more challenging, try to build the entire page in JavaScript. The HTML file should start with only a button saying "Create Page". When that button is clicked, it should create the table, the inputs, and the "Add" button, and put them all on the webpage. It should also remove the initial "Create Page" button.

Extra Extra Challenge (Extremely Hard)

Allow the user to re-sequence the rows in the table.