test_headers_table.html (21715B)
1 <!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en"> 2 <html> 3 <head> 4 <title>Table header information cells for HTML table</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <link rel="stylesheet" type="text/css" 7 href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 8 9 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 10 11 <script type="application/javascript" 12 src="../common.js"></script> 13 <script type="application/javascript" 14 src="../table.js"></script> 15 16 <script type="application/javascript"> 17 18 function doTest() { 19 // //////////////////////////////////////////////////////////////////////// 20 // column header from thead and row header from @scope inside of tfoot 21 22 var headerInfoMap = [ 23 { 24 cell: "table1_cell_1", 25 rowHeaderCells: [], 26 columnHeaderCells: [ "table1_weekday", "table1_date" ], 27 }, 28 { 29 cell: "table1_cell_2", 30 rowHeaderCells: [], 31 columnHeaderCells: [ "table1_day", "table1_date" ], 32 }, 33 { 34 cell: "table1_cell_3", 35 rowHeaderCells: [], 36 columnHeaderCells: [ "table1_qty" ], 37 }, 38 { 39 cell: "table1_cell_4", 40 rowHeaderCells: [], 41 columnHeaderCells: [ "table1_weekday", "table1_date" ], 42 }, 43 { 44 cell: "table1_cell_5", 45 rowHeaderCells: [], 46 columnHeaderCells: [ "table1_day", "table1_date" ], 47 }, 48 { 49 cell: "table1_cell_6", 50 rowHeaderCells: [], 51 columnHeaderCells: [ "table1_qty" ], 52 }, 53 { 54 cell: "table1_cell_7", 55 rowHeaderCells: [ "table1_total" ], 56 columnHeaderCells: [ "table1_qty" ], 57 }, 58 ]; 59 60 testHeaderCells(headerInfoMap); 61 62 // //////////////////////////////////////////////////////////////////////// 63 // column and row headers from thead and @scope 64 65 headerInfoMap = [ 66 { 67 cell: "table2_cell_2", 68 rowHeaderCells: [ "table2_rh_1" ], 69 columnHeaderCells: [ "table2_ch_2" ], 70 }, 71 { 72 cell: "table2_cell_3", 73 rowHeaderCells: [ "table2_rh_1" ], 74 columnHeaderCells: [ "table2_ch_3" ], 75 }, 76 { 77 cell: "table2_cell_5", 78 rowHeaderCells: [ "table2_rh_2" ], 79 columnHeaderCells: [ "table2_ch_2" ], 80 }, 81 { 82 cell: "table2_cell_6", 83 rowHeaderCells: [ "table2_rh_2" ], 84 columnHeaderCells: [ "table2_ch_3" ], 85 }, 86 { 87 cell: "table2_rh_1", 88 rowHeaderCells: [], 89 columnHeaderCells: [ "table2_ch_1" ], 90 }, 91 { 92 cell: "table2_rh_2", 93 rowHeaderCells: [], 94 columnHeaderCells: [ "table2_ch_1" ], 95 }, 96 ]; 97 98 testHeaderCells(headerInfoMap); 99 100 // //////////////////////////////////////////////////////////////////////// 101 // column headers from @headers 102 103 headerInfoMap = [ 104 { 105 cell: "table3_cell_1", 106 rowHeaderCells: [], 107 columnHeaderCells: [ "table3_ch_1" ], 108 }, 109 { 110 cell: "table3_cell_2", 111 rowHeaderCells: [], 112 columnHeaderCells: [ "table3_ch_2" ], 113 }, 114 ]; 115 116 testHeaderCells(headerInfoMap); 117 118 // //////////////////////////////////////////////////////////////////////// 119 // table consisted of one column 120 121 headerInfoMap = [ 122 { 123 cell: "table4_cell", 124 rowHeaderCells: [], 125 columnHeaderCells: [ "table4_ch" ], 126 }, 127 ]; 128 129 testHeaderCells(headerInfoMap); 130 131 // //////////////////////////////////////////////////////////////////////// 132 // table consisted of one row 133 134 headerInfoMap = [ 135 { 136 cell: "table5_cell", 137 rowHeaderCells: [ "table5_rh" ], 138 columnHeaderCells: [ ], 139 }, 140 ]; 141 142 testHeaderCells(headerInfoMap); 143 144 // //////////////////////////////////////////////////////////////////////// 145 // @headers points to table cells 146 147 headerInfoMap = [ 148 { 149 cell: "table6_cell", 150 rowHeaderCells: [ "table6_rh" ], 151 columnHeaderCells: [ "table6_ch" ], 152 }, 153 ]; 154 155 testHeaderCells(headerInfoMap); 156 157 // //////////////////////////////////////////////////////////////////////// 158 // @scope="rowgroup" and @scope="row" 159 160 headerInfoMap = [ 161 { 162 cell: "t7_r1c1", 163 rowHeaderCells: [ "t7_Mary", "t7_Females" ], 164 columnHeaderCells: [ "t7_1km" ], 165 }, 166 { 167 cell: "t7_r1c2", 168 rowHeaderCells: [ "t7_Mary", "t7_Females" ], 169 columnHeaderCells: [ "t7_5km" ], 170 }, 171 { 172 cell: "t7_r1c3", 173 rowHeaderCells: [ "t7_Mary", "t7_Females" ], 174 columnHeaderCells: [ "t7_10km" ], 175 }, 176 { 177 cell: "t7_r2c1", 178 rowHeaderCells: [ "t7_Betsy", "t7_Females" ], 179 columnHeaderCells: [ "t7_1km" ], 180 }, 181 { 182 cell: "t7_r2c2", 183 rowHeaderCells: [ "t7_Betsy", "t7_Females" ], 184 columnHeaderCells: [ "t7_5km" ], 185 }, 186 { 187 cell: "t7_r2c3", 188 rowHeaderCells: [ "t7_Betsy", "t7_Females" ], 189 columnHeaderCells: [ "t7_10km" ], 190 }, 191 { 192 cell: "t7_r3c1", 193 rowHeaderCells: [ "t7_Matt", "t7_Males" ], 194 columnHeaderCells: [ "t7_1km" ], 195 }, 196 { 197 cell: "t7_r3c2", 198 rowHeaderCells: [ "t7_Matt", "t7_Males" ], 199 columnHeaderCells: [ "t7_5km" ], 200 }, 201 { 202 cell: "t7_r3c3", 203 rowHeaderCells: [ "t7_Matt", "t7_Males" ], 204 columnHeaderCells: [ "t7_10km" ], 205 }, 206 { 207 cell: "t7_r4c1", 208 rowHeaderCells: [ "t7_Todd", "t7_Males" ], 209 columnHeaderCells: [ "t7_1km" ], 210 }, 211 { 212 cell: "t7_r4c2", 213 rowHeaderCells: [ "t7_Todd", "t7_Males" ], 214 columnHeaderCells: [ "t7_5km" ], 215 }, 216 { 217 cell: "t7_r4c3", 218 rowHeaderCells: [ "t7_Todd", "t7_Males" ], 219 columnHeaderCells: [ "t7_10km" ], 220 }, 221 ]; 222 223 testHeaderCells(headerInfoMap); 224 225 // //////////////////////////////////////////////////////////////////////// 226 // @scope="colgroup" and @scope="col" 227 228 headerInfoMap = [ 229 { 230 cell: "t8_r1c1", 231 rowHeaderCells: [ "t8_1km" ], 232 columnHeaderCells: [ "t8_Mary", "t8_Females" ], 233 }, 234 { 235 cell: "t8_r1c2", 236 rowHeaderCells: [ "t8_1km" ], 237 columnHeaderCells: [ "t8_Betsy", "t8_Females" ], 238 }, 239 { 240 cell: "t8_r1c3", 241 rowHeaderCells: [ "t8_1km" ], 242 columnHeaderCells: [ "t8_Matt", "t8_Males" ], 243 }, 244 { 245 cell: "t8_r1c4", 246 rowHeaderCells: [ "t8_1km" ], 247 columnHeaderCells: [ "t8_Todd", "t8_Males" ], 248 }, 249 { 250 cell: "t8_r2c1", 251 rowHeaderCells: [ "t8_5km" ], 252 columnHeaderCells: [ "t8_Mary", "t8_Females" ], 253 }, 254 { 255 cell: "t8_r2c2", 256 rowHeaderCells: [ "t8_5km" ], 257 columnHeaderCells: [ "t8_Betsy", "t8_Females" ], 258 }, 259 { 260 cell: "t8_r2c3", 261 rowHeaderCells: [ "t8_5km" ], 262 columnHeaderCells: [ "t8_Matt", "t8_Males" ], 263 }, 264 { 265 cell: "t8_r2c4", 266 rowHeaderCells: [ "t8_5km" ], 267 columnHeaderCells: [ "t8_Todd", "t8_Males" ], 268 }, 269 { 270 cell: "t8_r3c1", 271 rowHeaderCells: [ "t8_10km" ], 272 columnHeaderCells: [ "t8_Mary", "t8_Females" ], 273 }, 274 { 275 cell: "t8_r3c2", 276 rowHeaderCells: [ "t8_10km" ], 277 columnHeaderCells: [ "t8_Betsy", "t8_Females" ], 278 }, 279 { 280 cell: "t8_r3c3", 281 rowHeaderCells: [ "t8_10km" ], 282 columnHeaderCells: [ "t8_Matt", "t8_Males" ], 283 }, 284 { 285 cell: "t8_r3c4", 286 rowHeaderCells: [ "t8_10km" ], 287 columnHeaderCells: [ "t8_Todd", "t8_Males" ], 288 }, 289 ]; 290 291 testHeaderCells(headerInfoMap); 292 293 // //////////////////////////////////////////////////////////////////////// 294 // spanned table header cells (v1), @headers define header order 295 296 headerInfoMap = [ 297 { 298 cell: "t9_r1c1", 299 rowHeaderCells: [ "t9_females", "t9_mary" ], 300 columnHeaderCells: [ "t9_1km" ], 301 }, 302 { 303 cell: "t9_r1c2", 304 rowHeaderCells: [ "t9_females", "t9_mary" ], 305 columnHeaderCells: [ "t9_5km" ], 306 }, 307 { 308 cell: "t9_r1c3", 309 rowHeaderCells: [ "t9_females", "t9_mary" ], 310 columnHeaderCells: [ "t9_10km" ], 311 }, 312 { 313 cell: "t9_r2c1", 314 rowHeaderCells: [ "t9_females", "t9_betsy" ], 315 columnHeaderCells: [ "t9_1km" ], 316 }, 317 { 318 cell: "t9_r2c2", 319 rowHeaderCells: [ "t9_females", "t9_betsy" ], 320 columnHeaderCells: [ "t9_5km" ], 321 }, 322 { 323 cell: "t9_r2c3", 324 rowHeaderCells: [ "t9_females", "t9_betsy" ], 325 columnHeaderCells: [ "t9_10km" ], 326 }, 327 { 328 cell: "t9_r3c1", 329 rowHeaderCells: [ "t9_males", "t9_matt" ], 330 columnHeaderCells: [ "t9_1km" ], 331 }, 332 { 333 cell: "t9_r3c2", 334 rowHeaderCells: [ "t9_males", "t9_matt" ], 335 columnHeaderCells: [ "t9_5km" ], 336 }, 337 { 338 cell: "t9_r3c3", 339 rowHeaderCells: [ "t9_males", "t9_matt" ], 340 columnHeaderCells: [ "t9_10km" ], 341 }, 342 { 343 cell: "t9_r4c1", 344 rowHeaderCells: [ "t9_males", "t9_todd" ], 345 columnHeaderCells: [ "t9_1km" ], 346 }, 347 { 348 cell: "t9_r4c2", 349 rowHeaderCells: [ "t9_males", "t9_todd" ], 350 columnHeaderCells: [ "t9_5km" ], 351 }, 352 { 353 cell: "t9_r4c3", 354 rowHeaderCells: [ "t9_males", "t9_todd" ], 355 columnHeaderCells: [ "t9_10km" ], 356 }, 357 ]; 358 359 testHeaderCells(headerInfoMap); 360 361 // //////////////////////////////////////////////////////////////////////// 362 // spanned table header cells (v2), @headers define header order 363 364 headerInfoMap = [ 365 { 366 cell: "t10_r1c1", 367 rowHeaderCells: [ "t10_1km" ], 368 columnHeaderCells: [ "t10_females", "t10_mary" ], 369 }, 370 { 371 cell: "t10_r1c2", 372 rowHeaderCells: [ "t10_1km" ], 373 columnHeaderCells: [ "t10_females", "t10_betsy" ], 374 }, 375 { 376 cell: "t10_r1c3", 377 rowHeaderCells: [ "t10_1km" ], 378 columnHeaderCells: [ "t10_males", "t10_matt" ], 379 }, 380 { 381 cell: "t10_r1c4", 382 rowHeaderCells: [ "t10_1km" ], 383 columnHeaderCells: [ "t10_males", "t10_todd" ], 384 }, 385 { 386 cell: "t10_r2c1", 387 rowHeaderCells: [ "t10_5km" ], 388 columnHeaderCells: [ "t10_females", "t10_mary" ], 389 }, 390 { 391 cell: "t10_r2c2", 392 rowHeaderCells: [ "t10_5km" ], 393 columnHeaderCells: [ "t10_females", "t10_betsy" ], 394 }, 395 { 396 cell: "t10_r2c3", 397 rowHeaderCells: [ "t10_5km" ], 398 columnHeaderCells: [ "t10_males", "t10_matt" ], 399 }, 400 { 401 cell: "t10_r2c4", 402 rowHeaderCells: [ "t10_5km" ], 403 columnHeaderCells: [ "t10_males", "t10_todd" ], 404 }, 405 { 406 cell: "t10_r3c1", 407 rowHeaderCells: [ "t10_10km" ], 408 columnHeaderCells: [ "t10_females", "t10_mary" ], 409 }, 410 { 411 cell: "t10_r3c2", 412 rowHeaderCells: [ "t10_10km" ], 413 columnHeaderCells: [ "t10_females", "t10_betsy" ], 414 }, 415 { 416 cell: "t10_r3c3", 417 rowHeaderCells: [ "t10_10km" ], 418 columnHeaderCells: [ "t10_males", "t10_matt" ], 419 }, 420 { 421 cell: "t10_r3c4", 422 rowHeaderCells: [ "t10_10km" ], 423 columnHeaderCells: [ "t10_males", "t10_todd" ], 424 }, 425 ]; 426 427 testHeaderCells(headerInfoMap); 428 429 // //////////////////////////////////////////////////////////////////////// 430 // Ensure correct column headers after colspan in a previous row. 431 headerInfoMap = [ 432 { 433 cell: "t11r1c1", 434 columnHeaderCells: [], 435 rowHeaderCells: [], 436 }, 437 { 438 cell: "t11r1c2", 439 columnHeaderCells: [], 440 rowHeaderCells: [], 441 }, 442 { 443 cell: "t11r2c1_2", 444 columnHeaderCells: ["t11r1c1"], 445 rowHeaderCells: [], 446 }, 447 { 448 cell: "t11r3c1", 449 columnHeaderCells: ["t11r1c1"], 450 rowHeaderCells: [], 451 }, 452 { 453 cell: "t11r3c2", 454 columnHeaderCells: ["t11r1c2"], 455 rowHeaderCells: [], 456 }, 457 ]; 458 testHeaderCells(headerInfoMap); 459 460 SimpleTest.finish(); 461 } 462 463 SimpleTest.waitForExplicitFinish(); 464 addA11yLoadEvent(doTest); 465 </script> 466 </head> 467 468 <body> 469 <a target="_blank" 470 title="implement IAccessibleTable2" 471 href="https://bugzilla.mozilla.org/show_bug.cgi?id=512424"> 472 Bug 512424 473 </a> 474 <a target="_blank" 475 title="Table headers not associated when header is a td element with no scope" 476 href="https://bugzilla.mozilla.org/show_bug.cgi?id=704465"> 477 Bug 704465 478 </a> 479 <a target="_blank" 480 title="Support rowgroup and colgroup HTML scope" 481 href="https://bugzilla.mozilla.org/show_bug.cgi?id=1141978"> 482 Bug 1141978 483 </a> 484 485 <p id="display"></p> 486 <div id="content" style="display: none"></div> 487 <pre id="test"> 488 </pre> 489 490 <table id="table1" border="1"> 491 <thead> 492 <tr> 493 <th id="table1_date" colspan="2">Date</th> 494 <th id="table1_qty" rowspan="2">Qty</th> 495 </tr> 496 <tr> 497 <th id="table1_weekday">Weekday</th> 498 <th id="table1_day">Day</th> 499 </tr> 500 </thead> 501 <tbody> 502 <tr> 503 <td id="table1_cell_1">Mon</td> 504 <td id="table1_cell_2">1</td> 505 <td id="table1_cell_3">20</td> 506 </tr> 507 <tr> 508 <td id="table1_cell_4">Thu</td> 509 <td id="table1_cell_5">2</td> 510 <td id="table1_cell_6">15</td> 511 </tr> 512 </tbody> 513 <tfoot> 514 <tr> 515 <th id="table1_total" scope="row" colspan="2">Total</th> 516 <td id="table1_cell_7">35</td> 517 </tr> 518 </tfoot> 519 </table> 520 521 <table id="table2" border="1"> 522 <thead> 523 <tr> 524 <th id="table2_ch_1">col1</th> 525 <th id="table2_ch_2">col2</th> 526 <td id="table2_ch_3" scope="col">col3</td> 527 </tr> 528 </thead> 529 <tbody> 530 <tr> 531 <th id="table2_rh_1">row1</th> 532 <td id="table2_cell_2">cell1</td> 533 <td id="table2_cell_3">cell2</td> 534 </tr> 535 <tr> 536 <td id="table2_rh_2" scope="row">row2</td> 537 <td id="table2_cell_5">cell3</td> 538 <td id="table2_cell_6">cell4</td> 539 </tr> 540 </tbody> 541 </table> 542 543 <table id="table3" border="1"> 544 <tr> 545 <td id="table3_cell_1" headers="table3_ch_1">cell1</td> 546 <td id="table3_cell_2" headers="table3_ch_2">cell2</td> 547 </tr> 548 <tr> 549 <td id="table3_ch_1" scope="col">col1</td> 550 <td id="table3_ch_2" scope="col">col2</td> 551 </tr> 552 </table> 553 554 <table id="table4"> 555 <thead> 556 <tr> 557 <th id="table4_ch">colheader</th> 558 </tr> 559 </thead> 560 <tbody> 561 <tr> 562 <td id="table4_cell">bla</td> 563 </tr> 564 </tbody> 565 </table> 566 567 <table id="table5"> 568 <tr> 569 <th id="table5_rh">rowheader</th> 570 <td id="table5_cell">cell</td> 571 </tr> 572 </table> 573 574 <table id="table6"> 575 <tr> 576 <td>empty cell</th> 577 <td id="table6_ch">colheader</td> 578 </tr> 579 <tr> 580 <td id="table6_rh">rowheader</th> 581 <td id="table6_cell" headers="table6_ch table6_rh">cell</td> 582 </tr> 583 </table> 584 585 <table id="table7" class="data complex" border="1"> 586 <caption>Version 1 with rowgroup</caption> 587 <thead> 588 <tr> 589 <td colspan="2"> </td> 590 <th id="t7_1km" scope="col">1 km</th> 591 <th id="t7_5km" scope="col">5 km</th> 592 <th id="t7_10km" scope="col">10 km</th> 593 </tr> 594 </thead> 595 <tbody> 596 <tr> 597 <th id="t7_Females" rowspan="2" scope="rowgroup">Females</th> 598 <th id="t7_Mary" scope="row">Mary</th> 599 <td id="t7_r1c1">8:32</td> 600 <td id="t7_r1c2">28:04</td> 601 <td id="t7_r1c3">1:01:16</td> 602 </tr> 603 <tr> 604 <th id="t7_Betsy" scope="row">Betsy</th> 605 <td id="t7_r2c1">7:43</td> 606 <td id="t7_r2c2">26:47</td> 607 <td id="t7_r2c3">55:38</td> 608 </tr> 609 <tr> 610 <th id="t7_Males" rowspan="2" scope="rowgroup">Males</th> 611 <th id="t7_Matt" scope="row">Matt</th> 612 <td id="t7_r3c1">7:55</td> 613 <td id="t7_r3c2">27:29</td> 614 <td id="t7_r3c3">57:04</td> 615 </tr> 616 <tr> 617 <th id="t7_Todd" scope="row">Todd</th> 618 <td id="t7_r4c1">7:01</td> 619 <td id="t7_r4c2">24:21</td> 620 <td id="t7_r4c3">50:35</td> 621 </tr> 622 </tbody> 623 </table> 624 625 <table id="table8" class="data complex" border="1"> 626 <caption>Version 2 with colgroup</caption> 627 <thead> 628 <tr> 629 <td rowspan="2"> </td> 630 <th id="t8_Females" colspan="2" scope="colgroup">Females</th> 631 <th id="t8_Males" colspan="2" scope="colgroup">Males</th> 632 </tr> 633 <tr> 634 <th id="t8_Mary" scope="col">Mary</th> 635 <th id="t8_Betsy" scope="col">Betsy</th> 636 <th id="t8_Matt" scope="col">Matt</th> 637 <th id="t8_Todd" scope="col">Todd</th> 638 </tr> 639 </thead> 640 <tbody> 641 <tr> 642 <th id="t8_1km" scope="row">1 km</th> 643 <td id="t8_r1c1">8:32</td> 644 <td id="t8_r1c2">7:43</td> 645 <td id="t8_r1c3">7:55</td> 646 <td id="t8_r1c4">7:01</td> 647 </tr> 648 <tr> 649 <th id="t8_5km" scope="row">5 km</th> 650 <td id="t8_r2c1">28:04</td> 651 <td id="t8_r2c2">26:47</td> 652 <td id="t8_r2c3">27:27</td> 653 <td id="t8_r2c4">24:21</td> 654 </tr> 655 <tr> 656 <th id="t8_10km" scope="row">10 km</th> 657 <td id="t8_r3c1">1:01:16</td> 658 <td id="t8_r3c2">55:38</td> 659 <td id="t8_r3c3">57:04</td> 660 <td id="t8_r3c4">50:35</td> 661 </tr> 662 663 </tbody> 664 </table> 665 666 <table id="table9" border="1"> 667 <caption> 668 Example 1 (row group headers): 669 </caption> 670 <tr> 671 <td colspan="2"><span class="offscreen">empty</span></td> 672 <th id="t9_1km" width="40">1 km</th> 673 <th id="t9_5km" width="35">5 km</th> 674 <th id="t9_10km" width="42">10 km</th> 675 </tr> 676 <tr> 677 <th id="t9_females" width="56" rowspan="2">Females</th> 678 <th id="t9_mary" width="39">Mary</th> 679 <td id="t9_r1c1" headers="t9_females t9_mary t9_1km">8:32</td> 680 <td id="t9_r1c2" headers="t9_females t9_mary t9_5km">28:04</td> 681 <td id="t9_r1c3" headers="t9_females t9_mary t9_10km">1:01:16</td> 682 </tr> 683 <tr> 684 <th id="t9_betsy">Betsy</th> 685 <td id="t9_r2c1" headers="t9_females t9_betsy t9_1km">7:43</td> 686 <td id="t9_r2c2" headers="t9_females t9_betsy t9_5km">26:47</td> 687 <td id="t9_r2c3" headers="t9_females t9_betsy t9_10km">55:38</td> 688 </tr> 689 <tr> 690 <th id="t9_males" rowspan="2">Males</th> 691 <th id="t9_matt">Matt</th> 692 <td id="t9_r3c1" headers="t9_males t9_matt t9_1km">7:55</td> 693 <td id="t9_r3c2" headers="t9_males t9_matt t9_5km">27:29</td> 694 <td id="t9_r3c3" headers="t9_males t9_matt t9_10km">57:04</td> 695 </tr> 696 <tr> 697 <th id="t9_todd">Todd</th> 698 <td id="t9_r4c1" headers="t9_males t9_todd t9_1km">7:01</td> 699 <td id="t9_r4c2" headers="t9_males t9_todd t9_5km">24:21</td> 700 <td id="t9_r4c3" headers="t9_males t9_todd t9_10km">50:35</td> 701 </tr> 702 </table> 703 704 <table id="table10" border="1"> 705 <caption> 706 Example 2 (column group headers): 707 </caption> 708 <tr> 709 <td rowspan="2"><span class="offscreen">empty</span></td> 710 <th colspan="2" id="t10_females">Females</th> 711 <th colspan="2" id="t10_males">Males</th> 712 </tr> 713 <tr> 714 <th width="40" id="t10_mary">Mary</th> 715 <th width="35" id="t10_betsy">Betsy</th> 716 <th width="42" id="t10_matt">Matt</th> 717 <th width="42" id="t10_todd">Todd</th> 718 </tr> 719 <tr> 720 <th width="39" id="t10_1km">1 km</th> 721 <td headers="t10_females t10_mary t10_1km" id="t10_r1c1">8:32</td> 722 <td headers="t10_females t10_betsy t10_1km" id="t10_r1c2">7:43</td> 723 <td headers="t10_males t10_matt t10_1km" id="t10_r1c3">7:55</td> 724 <td headers="t10_males t10_todd t10_1km" id="t10_r1c4">7:01</td> 725 </tr> 726 <tr> 727 <th id="t10_5km">5 km</th> 728 <td headers="t10_females t10_mary t10_5km" id="t10_r2c1">28:04</td> 729 <td headers="t10_females t10_betsy t10_5km" id="t10_r2c2">26:47</td> 730 <td headers="t10_males t10_matt t10_5km" id="t10_r2c3">27:29</td> 731 <td headers="t10_males t10_todd t10_5km" id="t10_r2c4">24:21</td> 732 </tr> 733 <tr> 734 <th id="t10_10km">10 km</th> 735 <td headers="t10_females t10_mary t10_10km" id="t10_r3c1">1:01:16</td> 736 <td headers="t10_females t10_betsy t10_10km" id="t10_r3c2">55:38</td> 737 <td headers="t10_males t10_matt t10_10km" id="t10_r3c3">57:04</td> 738 <td headers="t10_males t10_todd t10_10km" id="t10_r3c4">50:35</td> 739 </tr> 740 </table> 741 742 <table id="table11"> 743 <tr> 744 <th id="t11r1c1">a</th> 745 <th id="t11r1c2">b</th> 746 </tr> 747 <tr> 748 <td id="t11r2c1_2" colspan="2"></td> 749 </tr> 750 <tr> 751 <td id="t11r3c1">e</td> 752 <td id="t11r3c2">f</td> 753 </tr> 754 </table> 755 </body> 756 </html>