<head>

<style>

body, table { font-family: "Lucida Grande"; font-size: 10px }

</style>

<script>

function labelRows()
{
    rows = document.getElementsByTagName("tr");
    for (i = 0; i < rows.length; ++i)
        rows[i].innerHTML += "<td>" + rows[i].id + "</td><td>rowIndex = " + rows[i].rowIndex + "</td>"
}

</script>

</head>

<body onload="labelRows()">

<p>This tests rowIndex, in particular in cases where the table sections are in different orders.</p>

<p>A: This table has the header and footer before the body ("normal" order).</p>

<table border=1>
    <thead><tr id="table A, header"></tr></thead>
    <tfoot><tr id="table A, footer"></tr></tfoot>
    <tbody><tr id="table A, body"></tr></tbody>
</table>

<p>B: This table has the footer before the body and both before the header.</p>

<table border=1>
    <tfoot><tr id="table B, footer"></tr></tfoot>
    <tbody><tr id="table B, body"></tr></tbody>
    <thead><tr id="table B, header"></tr></thead>
</table>

<p>C: This table has two footers before two bodies before two heads. The rows inside the extra footers and heads don't get row indices at all.</p>

<table border=1>
    <tfoot><tr id="table C, footer A row A"></tr><tr id="table C, footer A row B"></tr></tfoot>
    <tfoot><tr id="table C, footer B row A"></tr><tr id="table C, footer B row B"></tr></tfoot>
    <tbody><tr id="table C, body A row A"></tr><tr id="table C, body A row B"></tr></tfoot>
    <tbody><tr id="table C, body B row A"></tr><tr id="table C, body B row B"></tr></tfoot>
    <thead><tr id="table C, header A row A"></tr><tr id="table C, header A row B"></tr></tfoot>
    <thead><tr id="table C, header B row A"></tr><tr id="table C, header B row B"></tr></tfoot>
</table>

</body>
