How do I get an empty table field type to display on the front-end so a user can update their profile?
As far as I know, I don't think that there is any built-in way to replicate the table fieldtype functionality on the front-end (i.e. with 'add row','remove row', etc.) I think that you would have to create your own buttons and then manipulate the dom using javascript.

In your template you would want something like this:

Provider Credentials
&lt;table class="js-providerCredentials"&gt;
    {% for row in currentUser.providerCredentials %}
        &lt;tr id="accreditingInstitution-{{ loop.index }}"&gt;
            &lt;td&gt;Institution&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" class="name-field" name="fields[providerCredentials][{{ loop.index }}][col1]" value="{{ row.accreditingInstitution }}"&gt;&lt;/td&gt;
        &lt;/tr&gt;
    {% endfor %}
&lt;/table&gt;
&lt;a class="button add-row" role="button"&gt;Add row&lt;/a&gt;


And in your javascript file:

$('.add-row').on('click', function(event){
    $(this).preventDefault();

    var rowCount = $('.js-providerCredentials').children('tr').length,
        newRow = '&lt;tr id="accreditingInstitution-' + (rowCount+1) + '"&gt;&lt;td&gt;Institution&lt;/td&gt;&lt;td&gt;&lt;input type="text" class="name-field" name="fields[providerCredentials][' + (rowCount+1) + '][col1]" value=""&gt;&lt;/td&gt;&lt;/tr&gt;';

    $('.js-providerCredentials').append(newRow);
})


Not sure how your table is set up exactly, but the principle should be the same. For another example of how to format the dom for form submission see the answer to this question,  editing a table field type from the front end.