First column not showing up in table with jekyll and csv into html

Question

Please pardon my question description as I'm new to coding and just learning. The first column of my csv does not generate in to the table according to this code. After a few hours, I figured out that it was not the column heading that was problem, it is just the very first column that it doesn't read it.

<table>
   <thead>
      <tr>
         <th>First Column</th>
         <th>Second Column</th>
         <th>Third Column</th>
         <th>Fourth Column</th>
      </tr>
   </thead>
   <tbody>
      {% for letter in site.data.testexcel %}
      <tr>
         <td>{{ letter.column1 }}</td>
         <td>{{ letter.column2 }}</td>
         <td>{{ letter.column3 }}</td>
         <td>{{ letter.column4 }}</td>
      </tr>
      {% endfor %}
   </tbody>
</table>

Answer 1

When you save a spreadsheet in Excel as "CSV UTF-8", it adds a 3-byte BOM (Byte Order Mark) to the beginning of the file (0xef 0xbb 0xbf) to indicate that the file's encoding is UTF-8. And I know that Jekyll (at least up through version 3.9.0) is oblivious to BOMs, so when it loads the CSV and parses the column headings, it includes the BOM as part of the first column heading, so any attempt to match that first heading will fail. Stripping the BOM from the CSV is the simplest fix.