matrix.html in CS50 2017 Pset6 Similarities (more comfortable)

matrix.html

<table class="table table-sm">
    <thead>
        <tr>
            <!--There are three empty cell in the first header-->
            <th></th>
            <th></th>
            <th></th>
            <!--s2 is the string2, according to application.py-->
            {% for character in s2 %}
                <th>{{character}}</th>
            {% endfor %}
        </tr>
        <tr>
            <!--Two empty cell in the second header-->
            <th></th>
            <th></th>
            {% for i in range((s2)|length + 1) %}
                <th>{{i}}</th>
            {% endfor %}
        </tr>
    </thead>
    <tbody>
        <tr>
            <th></th>
            <th>0</th>
            {% for i in matrix[0] %}
                <th>{{i[0]}}</th>
            {% endfor %}
        </tr>
        {% for t in range(s1|length) %}
            <tr>
                <th>{{s1[t]}}</th>
                <th>{{t + 1}}</th>
                {% for i in matrix[t + 1] %}
                    <td>{{ i[0] }}</td>
                {% endfor %}
            </tr>
        {% endfor %}
    </tbody>
</table>

Can you explain why you are using
range((s2)|length + 1)
Specifically what is length?