HTML + Javascript

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tabela de Nomes e E-mails</title>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 5px;
        }
        .arrow {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <table id="tabela">
        <thead>
            <tr>
                <th>
                    Nome
                    <span class="arrow" onclick="ordenarNomes()">▲</span>
                </th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Maria</td>
                <td>maria@example.com</td>
            </tr>
            <tr>
                <td>Carlos</td>
                <td>carlos@example.com</td>
            </tr>
            <tr>
                <td>Ana</td>
                <td>ana@example.com</td>
            </tr>


            </tbody>
        </table>

        <script>
            var ordemCrescente = true; // Indica se a ordenação está em ordem crescente ou decrescente

            function ordenarNomes() {
                var tabela, linhas, i, x, y, trocar;
                tabela = document.getElementById("tabela");
                trocar = true;

                while (trocar) {
                    trocar = false;
                    linhas = tabela.rows;

                    for (i = 1; i < (linhas.length - 1); i++) {
                        x = linhas[i].getElementsByTagName("td")[0];
                        y = linhas[i + 1].getElementsByTagName("td")[0];

                        if (ordemCrescente) {
                            if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                                linhas[i].parentNode.insertBefore(linhas[i + 1], linhas[i]);
                                trocar = true;
                                break;
                            }
                        } else {
                            if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
                                linhas[i].parentNode.insertBefore(linhas[i + 1], linhas[i]);
                                trocar = true;
                                break;
                            }
                        }
                    }
                }

                // Altera a seta conforme a ordenação
                var seta = tabela.getElementsByTagName("span")[0];
                if (ordemCrescente) {
                    seta.innerHTML = "▼";
                    ordemCrescente = false;
                } else {
                    seta.innerHTML = "▲";
                    ordemCrescente = true;
                }
            }
        </script>
    </body>
    </html>