Pset7 survey table not loading

Question

For Pset7 Survey, my table is not loading. My error checking is now working, but when I submit a form, it simply shows me an ugly list of all the <thead>. May somebody please help?

Application.py:

import cs50
import csv

from flask import Flask, jsonify, redirect, render_template, request

# Configure application
app = Flask(__name__)

# Reload templates when they are changed
app.config["TEMPLATES_AUTO_RELOAD"] = True


@app.after_request
def after_request(response):
    """Disable caching"""
    response.headers["Cache-Control"] = "no-cache, no-store, must-revalidate"
    response.headers["Expires"] = 0
    response.headers["Pragma"] = "no-cache"
    return response


@app.route("/", methods=["GET"])
def get_index():
    return redirect("/form")


@app.route("/form", methods=["GET"])
def get_form():
    return render_template("form.html")


@app.route("/form", methods=["POST"])
def post_form():
    name = request.form.get("name")
    address = request.form.get("address")
    phone = request.form.get("phone")
    with open("survey.csv", 'a') as file:
        writer = csv.writer(file)
        writer.writerow((name, address, phone))
    return redirect("/sheet")


@app.route("/sheet", methods=["GET"])
def get_sheet():
    items = []
    columns = ['name', 'address', 'phone']
    with open("survey.csv", 'r') as file:
        reader = csv.reader(file)
        for line in reader:
            items.append(line)
    return render_template('table.html', items=items, columns=columns)

table.html:

{% extends "layout.html" %}

{% block main %}
    <table>
        <thead>
            {% for column in columns %}
                <th>{{ column }}</th>
            {% endfor %}
        </thead>
        <tbody>
            {% for row in items %}
                <tr>
                    {% for column in columns %}
                        <td>{{ row[column] }}</td>
                    {% endfor %}
                </tr>
            {% endfor %}
        </tbody>
    </table>
{% endblock %}

Form.html:

{% extends "layout.html" %}

{% block main %}
    <!-- http://getbootstrap.com/docs/4.1/content/typography/ -->
    <!-- Title -->
    <h1 class="mb-3">Leave Application Form</h1>
    <!-- http://getbootstrap.com/docs/4.1/components/forms/ -->
    <!-- Provides a leave application form -->
    <form action="/form" method="post">
        <p>
            <!-- Name -->
            <input type="text" name="name" placeholder="Name" autocomplete="off" required>
        </p>
        <p>
            <!-- Address -->
            <textarea name="address" placeholder="Address during leave" autocomplete="off" required></textarea>
        </p>
        <p>
            <!-- Phone number -->
            <input type="tel" placeholder="Phone number" name="phone" pattern="09[0-9]{8}" required>
            Pattern - 8 numbers, starting with 09
        </p>
        <!-- http://getbootstrap.com/docs/4.1/components/buttons/ -->
        <!-- Submit -->
        <button class="btn btn-primary" type="submit">Submit</button>
    </form>
    <script>
        //From Bootstrap
        (function() {
            'use strict';
            window.addEventListener('load', function() {
                //Fetches all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.getElementsByClassName('needs-validation');
                //Loops over them and prevent submission
                var validation = Array.prototype.filter.call(forms, function(form) {
                    form.addEventListener('submit', function(event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                        }, false);
                });
            }, false);
        })();
    </script>
{% endblock %}

PS I have already checked the placement of files, all html files are in the templates folder.