I'm a lover of spreadsheets. They're the first real tool I learned how to use, and kind of my natural segway into programming, so I have a bit of an appreciation for them. What we're going over isn't a spreadsheet, and doesn't have the functionality of one, but I imagine it is the closest to a spreadsheet that I can get at this level (I mean, if google can do it with Sheets, I'm sure I can get there, right?)

Like all things html, there are tags for this:

<table></table> - these are the table tags, and they surround the table's inner elements along their content, defining the start and end of the table.
<th></th> - these are used to create the table headers, or, the name each column.
<tr></tr> - these are used to create the table rows
<td></td> - these are used to put data into each row.

The way this works is you start with the table tags, put in table rows, and enter the table headers as the first row's data. The table header tags are kind of interchangeable with the table data tags, in that you can use either to fill in a table row for example:

<table>
<tr>
     <th>product</th>
     <th>cost</th>
</tr>
<tr>
     <td>Milk</td>
     <td>$6.16</td>
</tr>
</table>

This will look like:

I can switch the table data and table header tags too, making the table a little weird...

And If I want to add borders, I can! I just have to put an attribute <border> into the opening table element, equaling a pixel amount like so:

<table border="1">
<tr>
<th>product</th>
<th>cost</th>
</tr>
<tr>
<td>Milk</td>
<td>$6.16</td>
</tr>
<tr>
<td>Keebler Sandies Pecan Shortbread Cookies</td>
<td>$3.28</td>
</tr>
</table>

Here is what this looks like:

ONWARD!!!