• 基本的な表の作成
• 表のヘッダーとフッター
• セルの結合
• 罫線を追加する
• レスポンシブ対応の表
• ソート可能な表

基本的な表の作成

HTMLでは、<table> 要素を使用して表を作成します。

<table>
    <tr>
        <td>セル1</td>
        <td>セル2</td>
    </tr>
    <tr>
        <td>セル3</td>
        <td>セル4</td>
    </tr>
</table>

セル1	セル2
セル3	セル4

表のヘッダーとフッター

<thead> や <tfoot> を使うことで、ヘッダーやフッターを定義できます。

<table>
    <thead>
        <tr>
            <th>見出し1</th>
            <th>見出し2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>データ1</td>
            <td>データ2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">表のフッター</td>
        </tr>
    </tfoot>
</table>

セルの結合

colspan（横方向）や rowspan（縦方向）を使ってセルを結合できます。

<table>
    <tr>
        <td colspan="2">横に結合</td>
    </tr>
    <tr>
        <td rowspan="2">縦に結合</td>
        <td>データ1</td>
    </tr>
    <tr>
        <td>データ2</td>
    </tr>
</table>

罫線を追加する

HTMLだけでは罫線が表示されないため、CSSを使います。

<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
</style>

<table>
    <tr>
        <td>データ1</td>
        <td>データ2</td>
    </tr>
</table>

レスポンシブ対応の表

小さい画面でもスクロールできるようにするには、<div> を使います。

<div style="overflow-x:auto;">
    <table>
        <tr>
            <th>見出し1</th>
            <th>見出し2</th>
            <th>見出し3</th>
        </tr>
        <tr>
            <td>データ1</td>
            <td>データ2</td>
            <td>データ3</td>
        </tr>
    </table>
</div>

ソート可能な表

JavaScriptを使って列をソートできるようにします。

<script>
function sortTable(n) {
    var table, rows, switching, i, x, y, shouldSwitch;
    table = document.getElementById("sortableTable");
    switching = true;
    while (switching) {
        switching = false;
        rows = table.rows;
        for (i = 1; i < rows.length - 1; i++) {
            shouldSwitch = false;
            x = rows[i].getElementsByTagName("TD")[n];
            y = rows[i + 1].getElementsByTagName("TD")[n];
            if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                shouldSwitch = true;
                break;
            }
        }
        if (shouldSwitch) {
            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
            switching = true;
        }
    }
}
</script>

<table id="sortableTable">
    <tr>
        <th onclick="sortTable(0)">名前▼</th>
        <th onclick="sortTable(1)">年齢▼</th>
    </tr>
    <tr>
        <td>田中</td>
        <td>25</td>
    </tr>
    <tr>
        <td>佐藤</td>
        <td>30</td>
    </tr>
    <tr>
        <td>鈴木</td>
        <td>22</td>
    </tr>
</table>

これで、クリックすると列のデータが昇順に並び替わります。