<!DOCTYPE html PUBLIC "-//w3c//dtd html 4.0 transitional//en"> <html><head> <head><title>Table Test Page</title></head> <body> <h1>Tables</h1> <table border="5" cellspacing="2"> <tbody> <tr> <td>1</td> <td colspan="9">2</td> </tr> <tr> <td rowspan="2">3</td> <td>4</td> <td colspan="3" rowspan="2">5</td> <td colspan="3">6</td> <td colspan="2">7</td> </tr> <tr> <td>8</td> <td colspan="3" rowspan="5">9</td> <td colspan="2" rowspan="6">10</td> </tr> <tr> <td rowspan="5">11</td> <td colspan="4">12</td> </tr> <tr> <td rowspan="2">13</td> <td>14</td> <td rowspan="2">15</td> <td rowspan="2">16</td> </tr> <tr> <td>17</td> </tr> <tr> <td colspan="4">18</td> </tr> <tr> <td colspan="3">19</td> <td colspan="4">20</td> </tr> <tr> <td colspan="2" rowspan="2">21</td> <td colspan="5" rowspan="2">22</td> <td>23</td> <td>24</td> <td rowspan="2">25</td> </tr> <tr> <td>26</td> <td>27</td> </tr> <tr> <td colspan="10">28</td> </tr> <tr> <td>29</td> <td>30</td> <td>31</td> <td>32</td> <td>33</td> <td>34</td> <td>35</td> <td>36</td> <td>37</td> <td>38</td> </tr> </tbody> </table> <table border="1"> <tbody> <tr> <td>A</td> <td colspan="2" rowspan="2"> <table border="1"> <tbody> <tr> <td>a a</td> <td>b b</td> </tr> <tr> <td>c c</td> <td>d d</td> </tr> </tbody> </table> hello there</td> </tr> <tr> <td>D</td> </tr> <tr> <td>G</td> <td>H</td> <td>I</td> </tr> </tbody> </table> <table border="1"> <tbody> <tr> <td>A</td> <td> <table> <tbody> <tr> <td>a</td> <td>b</td> </tr> <tr> <td>c</td> <td>d</td> </tr> </tbody> </table> </td> </tr> <tr> <td>C</td> <td align="center">D</td> </tr> </tbody> </table> <table border="1"> <tbody> <tr> <td colspan="2" rowspan="2" align="center">A</td> <td>a</td> <td>b</td> </tr> <tr> <td>c</td> <td>d</td> </tr> <tr> <td colspan="2" rowspan="2" align="center">C</td> <td colspan="2" rowspan="2" align="center">D</td> </tr> </tbody> </table> <hr> <h1>Table showing text flow</h1> This is text placed above the table and <table bgcolor="#ffe4c4" border="1" width="25%"> <caption align="top">Table Title</caption> <tbody> <tr> <th>table head</th> <th>table head</th> <th>table head</th> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> </tr> </tbody> </table> continuing below the table!!! <hr> <h1>Table Border Tests</h1> <table bgcolor="#ffe4c4" border="1"> <caption align="top">Table with BORDER=1</caption> <tbody> <tr> <th>table head</th> <th>table head</th> <th>table head</th> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> </tr> </tbody> </table> <table bgcolor="#ffe4c4" border="2"> <caption align="top">Table with BORDER=2</caption> <tbody> <tr> <th>table head</th> <th>table head</th> <th>table head</th> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> </tr> </tbody> </table> <table bgcolor="#ffe4c4" border="3"> <caption align="top">Table with BORDER=3</caption> <tbody> <tr> <th>table head</th> <th>table head</th> <th>table head</th> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> </tr> </tbody> </table> <table bgcolor="#ffe4c4" border="4"> <caption align="top">Table with BORDER=4</caption> <tbody> <tr> <th>table head</th> <th>table head</th> <th>table head</th> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> </tr> </tbody> </table> <table bgcolor="#ffe4c4" border="5"> <caption align="top">Table with BORDER=5</caption> <tbody> <tr> <th>table head</th> <th>table head</th> <th>table head</th> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> </tr> </tbody> </table> <table bgcolor="#ffe4c4" border="6"> <caption align="top">Table with BORDER=6</caption> <tbody> <tr> <th>table head</th> <th>table head</th> <th>table head</th> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> </tr> </tbody> </table> <table bgcolor="#ffe4c4" border="30"> <caption align="top">Table with BORDER=30</caption> <tbody> <tr> <th>table head</th> <th>table head</th> <th>table head</th> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> </tr> </tbody> </table> <table bgcolor="#ffe4c4" border="0"> <caption align="top">Table with BORDER=0</caption> <tbody> <tr> <th>table head</th> <th>table head</th> <th>table head</th> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> </tr> </tbody> </table> <hr width="100%"><br> <h1>Table Cellpadding Test</h1> <table bgcolor="#ffe4c4" border="1"> <caption align="top"><b>Table with default cellpadding:</b> <br> </caption> <tbody> <tr> <th>table head</th> <th>table head</th> <th>table head</th> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> </tr> </tbody> </table> <table bgcolor="#ffe4c4" border="1"> <caption align="top">Table with CELLPADDING=1</caption> <tbody> <tr> <th>table head</th> <th>table head</th> <th>table head</th> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> </tr> </tbody> </table> <table bgcolor="#ffe4c4" border="1" cellpadding="2"> <caption align="top">Table with CELLPADDING=2</caption> <tbody> <tr> <th>table head</th> <th>table head</th> <th>table head</th> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> </tr> </tbody> </table> <table bgcolor="#ffe4c4" border="1" cellpadding="3"> <caption align="top">Table with CELLPADDING=3</caption> <tbody> <tr> <th>table head</th> <th>table head</th> <th>table head</th> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> </tr> </tbody> </table> <table bgcolor="#ffe4c4" border="1" cellpadding="4"> <caption align="top">Table with CELLPADDING=4</caption> <tbody> <tr> <th>table head</th> <th>table head</th> <th>table head</th> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> </tr> </tbody> </table> <table bgcolor="#ffe4c4" border="1" cellpadding="5"> <caption align="top">Table with CELLPADDING=5</caption> <tbody> <tr> <th>table head</th> <th>table head</th> <th>table head</th> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> </tr> </tbody> </table> <table bgcolor="#ffe4c4" border="1" cellpadding="10"> <caption align="top">Table with CELLPADDING=10</caption> <tbody> <tr> <th>table head</th> <th>table head</th> <th>table head</th> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> </tr> </tbody> </table> <table bgcolor="#ffe4c4" border="1" cellpadding="30"> <caption align="top">Table with CELLPADDING=30</caption> <tbody> <tr> <th>table head</th> <th>table head</th> <th>table head</th> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> </tr> </tbody> </table> <table bgcolor="#ffe4c4" border="1" cellpadding="0"> <caption align="top">Table with CELLPADDING=0</caption> <tbody> <tr> <th>table head</th> <th>table head</th> <th>table head</th> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> </tr> </tbody> </table> <hr> <h1>Table Cellspacing Test</h1> <table bgcolor="#ffdead" border="1"> <caption align="top">Table with default cellspacing</caption> <tbody> <tr> <th>table head</th> <th>table head</th> <th>table head</th> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> </tr> </tbody> </table> <table bgcolor="#ffdead" border="1" cellspacing="0"> <caption align="top">Table with CELLSPACING=0 and BORDER=1</caption> <tbody> <tr> <th>table head</th> <th>table head</th> <th>table head</th> <th>table head</th> <th>table head</th> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> <td>cell 4</td> <td>cell 5</td> </tr> </tbody> </table> <table bgcolor="#ffdead" border="1" cellspacing="3"> <caption align="top">Table with CELLSPACING=3</caption> <tbody> <tr> <th>table head</th> <th>table head</th> <th>table head</th> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> </tr> </tbody> </table> <table bgcolor="#ffdead" border="1" cellspacing="4"> <caption align="top">Table with CELLSPACING=4</caption> <tbody> <tr> <th>table head</th> <th>table head</th> <th>table head</th> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> </tr> </tbody> </table> <table bgcolor="#ffdead" border="1" cellspacing="5"> <caption align="top">Table with CELLSPACING=5</caption> <tbody> <tr> <th>table head</th> <th>table head</th> <th>table head</th> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> </tr> </tbody> </table> <table bgcolor="#ffdead" border="1" cellspacing="8"> <caption align="top">Table with CELLSPACING=8</caption> <tbody> <tr> <th>table head</th> <th>table head</th> <th>table head</th> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> </tr> </tbody> </table> <table bgcolor="#ffdead" border="1" cellspacing="10"> <caption align="top">Table with CELLSPACING=10</caption> <tbody> <tr> <th>table head</th> <th>table head</th> <th>table head</th> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> </tr> </tbody> </table> <table bgcolor="#ffdead" border="1" cellspacing="30"> <caption align="top">Table with CELLSPACING=30</caption> <tbody> <tr> <th>table head</th> <th>table head</th> <th>table head</th> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> </tr> </tbody> </table> <hr width="100%"> <h1>Tables Columnspan Test</h1> <table border="1"> <caption align="top"></caption> <tbody> <tr bgcolor="#ffe4c4"> <th colspan="2">Header 1 <br> span=2 cols</th> <th colspan="5">Header 2 <br> span=5 cols</th> <th colspan="10">Header 3 <br> span=10 cols</th> </tr> <tr> <td bgcolor="#ee82ee">row 1</td> <td bgcolor="#ee82ee">row 1</td> <td bgcolor="#90ee90">row 1</td> <td bgcolor="#90ee90">row 1</td> <td bgcolor="#90ee90">row 1</td> <td bgcolor="#90ee90">row 1</td> <td bgcolor="#90ee90">row 1</td> <td bgcolor="#add8e6">row 1</td> <td bgcolor="#add8e6">row 1</td> <td bgcolor="#add8e6">row 1</td> <td bgcolor="#add8e6">row 1</td> <td bgcolor="#add8e6">row 1</td> <td bgcolor="#add8e6">row 1</td> <td bgcolor="#add8e6">row 1</td> <td bgcolor="#add8e6">row 1</td> <td bgcolor="#add8e6">row 1</td> <td bgcolor="#add8e6">row 1</td> </tr> <tr> <td bgcolor="#ee82ee">row 2</td> <td bgcolor="#ee82ee">row 2</td> <td bgcolor="#90ee90">row 2</td> <td bgcolor="#90ee90">row 2</td> <td bgcolor="#90ee90">row 2</td> <td bgcolor="#90ee90">row 2</td> <td bgcolor="#90ee90">row 2</td> <td bgcolor="#add8e6">row 2</td> <td bgcolor="#add8e6">row 2</td> <td bgcolor="#add8e6">row 2</td> <td bgcolor="#add8e6">row 2</td> <td bgcolor="#add8e6">row 2</td> <td bgcolor="#add8e6">row 2</td> <td bgcolor="#add8e6">row 2</td> <td bgcolor="#add8e6">row 2</td> <td bgcolor="#add8e6">row 2</td> <td bgcolor="#add8e6">row 2</td> </tr> <tr> <td bgcolor="#ee82ee">row 3</td> <td bgcolor="#ee82ee">row 3</td> <td bgcolor="#90ee90">row 3</td> <td bgcolor="#90ee90">row 3</td> <td bgcolor="#90ee90">row 3</td> <td bgcolor="#90ee90">row 3</td> <td bgcolor="#90ee90">row 3</td> <td bgcolor="#add8e6">row 3</td> <td bgcolor="#add8e6">row 3</td> <td bgcolor="#add8e6">row 3</td> <td bgcolor="#add8e6">row 3</td> <td bgcolor="#add8e6">row 3</td> <td bgcolor="#add8e6">row 3</td> <td bgcolor="#add8e6">row 3</td> <td bgcolor="#add8e6">row 3</td> <td bgcolor="#add8e6">row 3</td> <td bgcolor="#add8e6">row 3</td> </tr> </tbody> </table> <table border="1"> <caption align="top"></caption> <tbody> <tr> <th bgcolor="#ee82ee">Head 1</th> <th bgcolor="#ee82ee">Head 1</th> <th bgcolor="#90ee90">Head 1</th> <th bgcolor="#90ee90">Head 1</th> <th bgcolor="#90ee90">Head 1</th> <th bgcolor="#90ee90">Head 1</th> <th bgcolor="#90ee90">Head 1</th> <th bgcolor="#add8e6">Head 1</th> <th bgcolor="#add8e6">Head 1</th> <th bgcolor="#add8e6">Head 1</th> <th bgcolor="#add8e6">Head 1</th> <th bgcolor="#add8e6">Head 1</th> <th bgcolor="#add8e6">Head 1</th> <th bgcolor="#add8e6">Head 1</th> <th bgcolor="#add8e6">Head 1</th> <th bgcolor="#add8e6">Head 1</th> <th bgcolor="#add8e6">Head 1</th> </tr> <tr bgcolor="#fffacd"> <td colspan="2">Data Cell 1 <br> span=2 cols</td> <td colspan="5">Data Cell 2 <br> span=5 cols</td> <td colspan="10">Data Cell 3 <br> span=10 cols</td> </tr> <tr> <td bgcolor="#ee82ee">row 1</td> <td bgcolor="#ee82ee">row 1</td> <td bgcolor="#90ee90">row 1</td> <td bgcolor="#90ee90">row 1</td> <td bgcolor="#90ee90">row 1</td> <td bgcolor="#90ee90">row 1</td> <td bgcolor="#90ee90">row 1</td> <td bgcolor="#add8e6">row 1</td> <td bgcolor="#add8e6">row 1</td> <td bgcolor="#add8e6">row 1</td> <td bgcolor="#add8e6">row 1</td> <td bgcolor="#add8e6">row 1</td> <td bgcolor="#add8e6">row 1</td> <td bgcolor="#add8e6">row 1</td> <td bgcolor="#add8e6">row 1</td> <td bgcolor="#add8e6">row 1</td> <td bgcolor="#add8e6">row 1</td> </tr> <tr> <td bgcolor="#ee82ee">row 2</td> <td bgcolor="#ee82ee">row 2</td> <td bgcolor="#90ee90">row 2</td> <td bgcolor="#90ee90">row 2</td> <td bgcolor="#90ee90">row 2</td> <td bgcolor="#90ee90">row 2</td> <td bgcolor="#90ee90">row 2</td> <td bgcolor="#add8e6">row 2</td> <td bgcolor="#add8e6">row 2</td> <td bgcolor="#add8e6">row 2</td> <td bgcolor="#add8e6">row 2</td> <td bgcolor="#add8e6">row 2</td> <td bgcolor="#add8e6">row 2</td> <td bgcolor="#add8e6">row 2</td> <td bgcolor="#add8e6">row 2</td> <td bgcolor="#add8e6">row 2</td> <td bgcolor="#add8e6">row 2</td> </tr> <tr> <td bgcolor="#ee82ee">row 3</td> <td bgcolor="#ee82ee">row 3</td> <td bgcolor="#90ee90">row 3</td> <td bgcolor="#90ee90">row 3</td> <td bgcolor="#90ee90">row 3</td> <td bgcolor="#90ee90">row 3</td> <td bgcolor="#90ee90">row 3</td> <td bgcolor="#add8e6">row 3</td> <td bgcolor="#add8e6">row 3</td> <td bgcolor="#add8e6">row 3</td> <td bgcolor="#add8e6">row 3</td> <td bgcolor="#add8e6">row 3</td> <td bgcolor="#add8e6">row 3</td> <td bgcolor="#add8e6">row 3</td> <td bgcolor="#add8e6">row 3</td> <td bgcolor="#add8e6">row 3</td> <td bgcolor="#add8e6">row 3</td> </tr> </tbody> </table> <table border="1"> <caption align="top"></caption> <tbody> <tr bgcolor="#ffe4c4"> <th colspan="8">Header 1 <br> span=8 cols</th> <th colspan="10">Header 2 <br> span=10 cols</th> </tr> <tr bgcolor="#fffacd"> <td colspan="3">Data Cell 1 <br> span=3 cols</td> <td colspan="5">Data Cell 2 <br> span=5 cols</td> <td colspan="7">Data Cell 3 <br> span=7 cols</td> <td colspan="3">Data Cell 4 <br> span=3 cols</td> </tr> <tr> <td bgcolor="#ee82ee">row 1</td> <td bgcolor="#ee82ee">row 1</td> <td bgcolor="#ee82ee">row 1</td> <td bgcolor="#90ee90">row 1</td> <td bgcolor="#90ee90">row 1</td> <td bgcolor="#90ee90">row 1</td> <td bgcolor="#90ee90">row 1</td> <td bgcolor="#90ee90">row 1</td> <td bgcolor="#add8e6">row 1</td> <td bgcolor="#add8e6">row 1</td> <td bgcolor="#add8e6">row 1</td> <td bgcolor="#add8e6">row 1</td> <td bgcolor="#add8e6">row 1</td> <td bgcolor="#add8e6">row 1</td> <td bgcolor="#add8e6">row 1</td> <td bgcolor="#ffff00">row 1</td> <td bgcolor="#ffff00">row 1</td> <td bgcolor="#ffff00">row 1</td> </tr> <tr> <td bgcolor="#ee82ee">row 2</td> <td bgcolor="#ee82ee">row 2</td> <td bgcolor="#ee82ee">row 2</td> <td bgcolor="#90ee90">row 2</td> <td bgcolor="#90ee90">row 2</td> <td bgcolor="#90ee90">row 2</td> <td bgcolor="#90ee90">row 2</td> <td bgcolor="#90ee90">row 2</td> <td bgcolor="#add8e6">row 2</td> <td bgcolor="#add8e6">row 2</td> <td bgcolor="#add8e6">row 2</td> <td bgcolor="#add8e6">row 2</td> <td bgcolor="#add8e6">row 2</td> <td bgcolor="#add8e6">row 2</td> <td bgcolor="#add8e6">row 2</td> <td bgcolor="#ffff00">row 2</td> <td bgcolor="#ffff00">row 2</td> <td bgcolor="#ffff00">row 2</td> </tr> <tr> <td bgcolor="#ee82ee">row 3</td> <td bgcolor="#ee82ee">row 3</td> <td bgcolor="#ee82ee">row 3</td> <td bgcolor="#90ee90">row 3</td> <td bgcolor="#90ee90">row 3</td> <td bgcolor="#90ee90">row 3</td> <td bgcolor="#90ee90">row 3</td> <td bgcolor="#90ee90">row 3</td> <td bgcolor="#add8e6">row 3</td> <td bgcolor="#add8e6">row 3</td> <td bgcolor="#add8e6">row 3</td> <td bgcolor="#add8e6">row 3</td> <td bgcolor="#add8e6">row 3</td> <td bgcolor="#add8e6">row 3</td> <td bgcolor="#add8e6">row 3</td> <td bgcolor="#ffff00">row 3</td> <td bgcolor="#ffff00">row 3</td> <td bgcolor="#ffff00">row 3</td> </tr> </tbody> </table> <table border="1" width="65%"> <caption align="top"></caption> <tbody> <tr> <th rowspan="2" bgcolor="#ffe4c4">Header 1 <br> span=2 rows</th> <td bgcolor="#ee82ee">col 1</td> <td bgcolor="#ee82ee">col 2</td> <td bgcolor="#ee82ee">col 3</td> <td bgcolor="#ee82ee">col 4</td> <td bgcolor="#ee82ee">col 5</td> <td bgcolor="#ee82ee">col 6</td> <td bgcolor="#ee82ee">col 7</td> <td bgcolor="#ee82ee">col 8</td> <td bgcolor="#ee82ee">col 9</td> </tr> <tr> <td bgcolor="#ee82ee">col 1</td> <td bgcolor="#ee82ee">col 2</td> <td bgcolor="#ee82ee">col 3</td> <td bgcolor="#ee82ee">col 4</td> <td bgcolor="#ee82ee">col 5</td> <td bgcolor="#ee82ee">col 6</td> <td bgcolor="#ee82ee">col 7</td> <td bgcolor="#ee82ee">col 8</td> <td bgcolor="#ee82ee">col 9</td> </tr> <tr> <th rowspan="5" bgcolor="#ffe4c4">Header 2 <br> span=5 rows</th> <td bgcolor="#90ee90">col 1</td> <td bgcolor="#90ee90">col 2</td> <td bgcolor="#90ee90">col 3</td> <td bgcolor="#90ee90">col 4</td> <td bgcolor="#90ee90">col 5</td> <td bgcolor="#90ee90">col 6</td> <td bgcolor="#90ee90">col 7</td> <td bgcolor="#90ee90">col 8</td> <td bgcolor="#90ee90">col 9</td> </tr> <tr> <td bgcolor="#90ee90">col 1</td> <td bgcolor="#90ee90">col 2</td> <td bgcolor="#90ee90">col 3</td> <td bgcolor="#90ee90">col 4</td> <td bgcolor="#90ee90">col 5</td> <td bgcolor="#90ee90">col 6</td> <td bgcolor="#90ee90">col 7</td> <td bgcolor="#90ee90">col 8</td> <td bgcolor="#90ee90">col 9</td> </tr> <tr bgcolor="#ffe4c4"> <td bgcolor="#90ee90">col 1</td> <td bgcolor="#90ee90">col 2</td> <td bgcolor="#90ee90">col 3</td> <td bgcolor="#90ee90">col 4</td> <td bgcolor="#90ee90">col 5</td> <td bgcolor="#90ee90">col 6</td> <td bgcolor="#90ee90">col 7</td> <td bgcolor="#90ee90">col 8</td> <td bgcolor="#90ee90">col 9</td> </tr> <tr> <td bgcolor="#90ee90">col 1</td> <td bgcolor="#90ee90">col 2</td> <td bgcolor="#90ee90">col 3</td> <td bgcolor="#90ee90">col 4</td> <td bgcolor="#90ee90">col 5</td> <td bgcolor="#90ee90">col 6</td> <td bgcolor="#90ee90">col 7</td> <td bgcolor="#90ee90">col 8</td> <td bgcolor="#90ee90">col 9</td> </tr> <tr> <td bgcolor="#90ee90">col 1</td> <td bgcolor="#90ee90">col 2</td> <td bgcolor="#90ee90">col 3</td> <td bgcolor="#90ee90">col 4</td> <td bgcolor="#90ee90">col 5</td> <td bgcolor="#90ee90">col 6</td> <td bgcolor="#90ee90">col 7</td> <td bgcolor="#90ee90">col 8</td> <td bgcolor="#90ee90">col 9</td> </tr> <tr> <th rowspan="3" bgcolor="#ffe4c4">Header 3 <br> span=3 rows</th> <td bgcolor="#add8e6">col 1</td> <td bgcolor="#add8e6">col 2</td> <td bgcolor="#add8e6">col 3</td> <td bgcolor="#add8e6">col 4</td> <td bgcolor="#add8e6">col 5</td> <td bgcolor="#add8e6">col 6</td> <td bgcolor="#add8e6">col 7</td> <td bgcolor="#add8e6">col 8</td> <td bgcolor="#add8e6">col 9</td> </tr> <tr> <td bgcolor="#add8e6">col 1</td> <td bgcolor="#add8e6">col 2</td> <td bgcolor="#add8e6">col 3</td> <td bgcolor="#add8e6">col 4</td> <td bgcolor="#add8e6">col 5</td> <td bgcolor="#add8e6">col 6</td> <td bgcolor="#add8e6">col 7</td> <td bgcolor="#add8e6">col 8</td> <td bgcolor="#add8e6">col 9</td> </tr> <tr> <td bgcolor="#add8e6">col 1</td> <td bgcolor="#add8e6">col 2</td> <td bgcolor="#add8e6">col 3</td> <td bgcolor="#add8e6">col 4</td> <td bgcolor="#add8e6">col 5</td> <td bgcolor="#add8e6">col 6</td> <td bgcolor="#add8e6">col 7</td> <td bgcolor="#add8e6">col 8</td> <td bgcolor="#add8e6">col 9</td> </tr> </tbody> </table> <table border="1" width="65%"> <caption align="top"></caption> <tbody> <tr> <th bgcolor="#ee82ee">Head</th> <td rowspan="2" bgcolor="#fffacd">Data 1 <br> span=2 rows</td> <td bgcolor="#ee82ee">col 1</td> <td bgcolor="#ee82ee">col 2</td> <td bgcolor="#ee82ee">col 3</td> <td bgcolor="#ee82ee">col 4</td> <td bgcolor="#ee82ee">col 5</td> <td bgcolor="#ee82ee">col 6</td> <td bgcolor="#ee82ee">col 7</td> <td bgcolor="#ee82ee">col 8</td> <td bgcolor="#ee82ee">col 9</td> </tr> <tr> <th bgcolor="#ee82ee">Head</th> <td bgcolor="#ee82ee">col 1</td> <td bgcolor="#ee82ee">col 2</td> <td bgcolor="#ee82ee">col 3</td> <td bgcolor="#ee82ee">col 4</td> <td bgcolor="#ee82ee">col 5</td> <td bgcolor="#ee82ee">col 6</td> <td bgcolor="#ee82ee">col 7</td> <td bgcolor="#ee82ee">col 8</td> <td bgcolor="#ee82ee">col 9</td> </tr> <tr> <th bgcolor="#90ee90">Head</th> <td rowspan="5" bgcolor="#fffacd">Data 2 <br> span=5 rows</td> <td bgcolor="#90ee90">col 1</td> <td bgcolor="#90ee90">col 2</td> <td bgcolor="#90ee90">col 3</td> <td bgcolor="#90ee90">col 4</td> <td bgcolor="#90ee90">col 5</td> <td bgcolor="#90ee90">col 6</td> <td bgcolor="#90ee90">col 7</td> <td bgcolor="#90ee90">col 8</td> <td bgcolor="#90ee90">col 9</td> </tr> <tr> <th bgcolor="#90ee90">Head</th> <td bgcolor="#90ee90">col 1</td> <td bgcolor="#90ee90">col 2</td> <td bgcolor="#90ee90">col 3</td> <td bgcolor="#90ee90">col 4</td> <td bgcolor="#90ee90">col 5</td> <td bgcolor="#90ee90">col 6</td> <td bgcolor="#90ee90">col 7</td> <td bgcolor="#90ee90">col 8</td> <td bgcolor="#90ee90">col 9</td> </tr> <tr> <th bgcolor="#90ee90">Head</th> <td bgcolor="#90ee90">col 1</td> <td bgcolor="#90ee90">col 2</td> <td bgcolor="#90ee90">col 3</td> <td bgcolor="#90ee90">col 4</td> <td bgcolor="#90ee90">col 5</td> <td bgcolor="#90ee90">col 6</td> <td bgcolor="#90ee90">col 7</td> <td bgcolor="#90ee90">col 8</td> <td bgcolor="#90ee90">col 9</td> </tr> <tr> <th bgcolor="#90ee90">Head</th> <td bgcolor="#90ee90">col 1</td> <td bgcolor="#90ee90">col 2</td> <td bgcolor="#90ee90">col 3</td> <td bgcolor="#90ee90">col 4</td> <td bgcolor="#90ee90">col 5</td> <td bgcolor="#90ee90">col 6</td> <td bgcolor="#90ee90">col 7</td> <td bgcolor="#90ee90">col 8</td> <td bgcolor="#90ee90">col 9</td> </tr> <tr> <th bgcolor="#90ee90">Head</th> <td bgcolor="#90ee90">col 1</td> <td bgcolor="#90ee90">col 2</td> <td bgcolor="#90ee90">col 3</td> <td bgcolor="#90ee90">col 4</td> <td bgcolor="#90ee90">col 5</td> <td bgcolor="#90ee90">col 6</td> <td bgcolor="#90ee90">col 7</td> <td bgcolor="#90ee90">col 8</td> <td bgcolor="#90ee90">col 9</td> </tr> <tr> <th bgcolor="#add8e6">Head</th> <td rowspan="3" bgcolor="#fffacd">Data 3 <br> span=3 rows</td> <td bgcolor="#add8e6">col 1</td> <td bgcolor="#add8e6">col 2</td> <td bgcolor="#add8e6">col 3</td> <td bgcolor="#add8e6">col 4</td> <td bgcolor="#add8e6">col 5</td> <td bgcolor="#add8e6">col 6</td> <td bgcolor="#add8e6">col 7</td> <td bgcolor="#add8e6">col 8</td> <td bgcolor="#add8e6">col 9</td> </tr> <tr> <th bgcolor="#add8e6">Head</th> <td bgcolor="#add8e6">col 1</td> <td bgcolor="#add8e6">col 2</td> <td bgcolor="#add8e6">col 3</td> <td bgcolor="#add8e6">col 4</td> <td bgcolor="#add8e6">col 5</td> <td bgcolor="#add8e6">col 6</td> <td bgcolor="#add8e6">col 7</td> <td bgcolor="#add8e6">col 8</td> <td bgcolor="#add8e6">col 9</td> </tr> <tr> <th bgcolor="#add8e6">Head</th> <td bgcolor="#add8e6">col 1</td> <td bgcolor="#add8e6">col 2</td> <td bgcolor="#add8e6">col 3</td> <td bgcolor="#add8e6">col 4</td> <td bgcolor="#add8e6">col 5</td> <td bgcolor="#add8e6">col 6</td> <td bgcolor="#add8e6">col 7</td> <td bgcolor="#add8e6">col 8</td> <td bgcolor="#add8e6">col 9</td> </tr> </tbody> </table> <table border="1" width="65%"> <caption align="top"></caption> <tbody> <tr> <th rowspan="7" bgcolor="#ffe4c4">Header 1 <br> span=7 rows</th> <td rowspan="2" bgcolor="#fffacd">Data 1 <br> span=2 rows</td> <td bgcolor="#ee82ee">col 1</td> <td bgcolor="#ee82ee">col 2</td> <td bgcolor="#ee82ee">col 3</td> <td bgcolor="#ee82ee">col 4</td> <td bgcolor="#ee82ee">col 5</td> <td bgcolor="#ee82ee">col 6</td> <td bgcolor="#ee82ee">col 7</td> <td bgcolor="#ee82ee">col 8</td> <td bgcolor="#ee82ee">col 9</td> </tr> <tr> <td bgcolor="#ee82ee">col 1</td> <td bgcolor="#ee82ee">col 2</td> <td bgcolor="#ee82ee">col 3</td> <td bgcolor="#ee82ee">col 4</td> <td bgcolor="#ee82ee">col 5</td> <td bgcolor="#ee82ee">col 6</td> <td bgcolor="#ee82ee">col 7</td> <td bgcolor="#ee82ee">col 8</td> <td bgcolor="#ee82ee">col 9</td> </tr> <tr> <td rowspan="5" bgcolor="#fffacd">Data 2 <br> span=5 rows</td> <td bgcolor="#90ee90">col 1</td> <td bgcolor="#90ee90">col 2</td> <td bgcolor="#90ee90">col 3</td> <td bgcolor="#90ee90">col 4</td> <td bgcolor="#90ee90">col 5</td> <td bgcolor="#90ee90">col 6</td> <td bgcolor="#90ee90">col 7</td> <td bgcolor="#90ee90">col 8</td> <td bgcolor="#90ee90">col 9</td> </tr> <tr> <td bgcolor="#90ee90">col 1</td> <td bgcolor="#90ee90">col 2</td> <td bgcolor="#90ee90">col 3</td> <td bgcolor="#90ee90">col 4</td> <td bgcolor="#90ee90">col 5</td> <td bgcolor="#90ee90">col 6</td> <td bgcolor="#90ee90">col 7</td> <td bgcolor="#90ee90">col 8</td> <td bgcolor="#90ee90">col 9</td> </tr> <tr> <td bgcolor="#90ee90">col 1</td> <td bgcolor="#90ee90">col 2</td> <td bgcolor="#90ee90">col 3</td> <td bgcolor="#90ee90">col 4</td> <td bgcolor="#90ee90">col 5</td> <td bgcolor="#90ee90">col 6</td> <td bgcolor="#90ee90">col 7</td> <td bgcolor="#90ee90">col 8</td> <td bgcolor="#90ee90">col 9</td> </tr> <tr> <td bgcolor="#90ee90">col 1</td> <td bgcolor="#90ee90">col 2</td> <td bgcolor="#90ee90">col 3</td> <td bgcolor="#90ee90">col 4</td> <td bgcolor="#90ee90">col 5</td> <td bgcolor="#90ee90">col 6</td> <td bgcolor="#90ee90">col 7</td> <td bgcolor="#90ee90">col 8</td> <td bgcolor="#90ee90">col 9</td> </tr> <tr> <td bgcolor="#90ee90">col 1</td> <td bgcolor="#90ee90">col 2</td> <td bgcolor="#90ee90">col 3</td> <td bgcolor="#90ee90">col 4</td> <td bgcolor="#90ee90">col 5</td> <td bgcolor="#90ee90">col 6</td> <td bgcolor="#90ee90">col 7</td> <td bgcolor="#90ee90">col 8</td> <td bgcolor="#90ee90">col 9</td> </tr> <tr> <th rowspan="3" bgcolor="#ffe4c4">Header 2 <br> span=3 rows</th> <td rowspan="3" bgcolor="#fffacd">Data 3 <br> span=3 rows</td> <td bgcolor="#add8e6">col 1</td> <td bgcolor="#add8e6">col 2</td> <td bgcolor="#add8e6">col 3</td> <td bgcolor="#add8e6">col 4</td> <td bgcolor="#add8e6">col 5</td> <td bgcolor="#add8e6">col 6</td> <td bgcolor="#add8e6">col 7</td> <td bgcolor="#add8e6">col 8</td> <td bgcolor="#add8e6">col 9</td> </tr> <tr> <td bgcolor="#add8e6">col 1</td> <td bgcolor="#add8e6">col 2</td> <td bgcolor="#add8e6">col 3</td> <td bgcolor="#add8e6">col 4</td> <td bgcolor="#add8e6">col 5</td> <td bgcolor="#add8e6">col 6</td> <td bgcolor="#add8e6">col 7</td> <td bgcolor="#add8e6">col 8</td> <td bgcolor="#add8e6">col 9</td> </tr> <tr> <td bgcolor="#add8e6">col 1</td> <td bgcolor="#add8e6">col 2</td> <td bgcolor="#add8e6">col 3</td> <td bgcolor="#add8e6">col 4</td> <td bgcolor="#add8e6">col 5</td> <td bgcolor="#add8e6">col 6</td> <td bgcolor="#add8e6">col 7</td> <td bgcolor="#add8e6">col 8</td> <td bgcolor="#add8e6">col 9</td> </tr> </tbody> </table> <hr> <h1>Tables Caption Test</h1> <table summary="This is the table's summary" title="table1" bgcolor="#ffffcc" border="5" frame="border" rules="groups" width="66%"> <caption>Caption at Top</caption> <tbody> <tr bgcolor="#9999ff"> <th abbr="blank" bgcolor="#ffffcc"><br> </th> <th abbr="button"><input name="button" value="Column1" onclick="test2( )" type="button"></th> <th abbr="column2">Column2 </th> <th abbr="column3">Column3 </th> </tr> </tbody><tbody> <tr> <th abbr="button2" bgcolor="#cc66cc" valign="top"><input name="button" value="Row1" onclick="test1( )" type="button"></th> <td valign="top">Row1 Column1<br> </td> <td valign="top">Row1 Column2<br> </td> <td bgcolor="#ffffff" valign="top">Row1 Column3<br> </td> </tr> <tr> <th abbr="text" bgcolor="#cc66cc" valign="top"><label for="text">text</label><input id="text" value="Row2" type="text"><br> </th> <td rowspan="1" colspan="2" valign="top">join (R2 C1) and (R2 C2)<br> </td> <td valign="top">Row2 Column3<br> </td> </tr> <tr> <th abbr="row3" bgcolor="#cc66cc" valign="top">Row3<br> </th> <td valign="top">Row3 Column1<br> </td> <td rowspan="2" colspan="1" valign="top">join (R3 C2) and (R4 C2)<br> </td> <td valign="top">Row3 Column3<br> </td> </tr> <tr> <th abbr="row4" bgcolor="#cc66cc"><label for="row4">Row4</label><input id="row4" type="checkbox"></th> <td valign="top">Row4 Column1<br> </td> <td valign="top">Row4 Column3<br> </td> </tr> </tbody> </table> <table summary="this is the second table" title="Table2" border="1" cellpadding="2" cellspacing="2"> <caption align="bottom">Caption at the Bottom</caption><tbody> <tr> <td valign="top"><a href="http://sceri.prc/desktop//Browser/QA/Test_Case/Accessibility/HTML/index.html#end"><img src="htmlpage_files/prize10050.gif" alt="gif" height="50" width="100"> </a> </td> <td valign="top"><label for="ch1">Checkbox1</label><input name="Checkbox1" id="ch1" value="ON" checked="checked" type="checkbox"></td> <td style="vertical-align: top;">Row1 Column3<br> </td> </tr> <tr> <td valign="top"> <table border="1" cellpadding="2" cellspacing="2" width="100%"> <caption>Embedded table</caption><tbody> <tr> <td valign="top"><label for="1checkbox1">1Checkbox1</label> <input id="1checkbox1" name="Checkbox1" value="ON" checked="checked" type="checkbox"><br> </td> <td valign="top">2<input name="button" value="Button" onclick="test3()" type="button"><br> </td> </tr> <tr> <td valign=" top="> 3<br> </td> <td valign="top">4<br> </td> </tr> <tr> <td rowspan="1" colspan="2" valign="top">5 6<br> </td> </tr> </tbody> </table> <br> </td> <td valign="top">Row3 Column2<br> </td> <td valign="top">Row3 Column3<br> </td> </tr> <tr> <td valign="top">Row5 Column1<br> </td> <td valign="top"> <label for="opt">options:</label> <select id="opt" name="option" size="1"> <option selected="selected" value="sina" checked="">option1 </option> <option value="href">option2 </option> <option value="avcn">option3 </option> <option value="newsft">option4</option> <option value="stock">option5</option> <option value="down">option6</option> <option value="game">option7 </option> <option value="dict">option8 </option> <option value="home">option9</option> </select> <br> </td> <td valign="top"><br> </td> </tr> </tbody> </table> <table summary="this is the second table" title="Table2" border="1" cellpadding="2" cellspacing="2"> <caption align="bottom"><input name="F1" size="20" value="Caption as Button on Bottom" onclick="alert('You have clicked the button which is the table caption')" type="button"><br> </caption><tbody> <tr> <td valign="top"><a href="http://sceri.prc/desktop//Browser/QA/Test_Case/Accessibility/HTML/index.html#end"><br> </a> </td> <td valign="top"><label for="ch1">Checkbox1</label><input name="Checkbox1" id="ch1" value="ON" checked="checked" type="checkbox"></td> <td style="vertical-align: top;">Row1 Column3<br> </td> </tr> <tr> <td valign="top"><label for="file>file</lable><input type=" file="" id="file" name="F1" size="20"><br> </label></td> <td valign="top">Row2 Column2<br> </td> <td valign="top"> <form method="post" action="http://survey.sina.com.cn/cgi-bin/internal/top/vote" onsubmit="windowOpener('')" target="surveywin"> Radiobuttons in Group A<br> <input name="A" value="1" id="radio1" type="radio"> <label for="radio1">RadioButton1</label><br> <input name="A" value="2" checked="checked" id="radio2" type="radio"> <label for="radio2">RadioButton2</label><br> <input name="A" value="3" id="radio3" type="radio"> <label for="radio3">RadioButton3</label></form> </td> </tr> <tr> <td valign="top"> <table border="1" cellpadding="2" cellspacing="2" width="100%"> <caption>Embedded table Caption<br> </caption><tbody> <tr> <td valign="top"><label for="1checkbox1">1Checkbox1</label> <input id="1checkbox1" name="Checkbox1" value="ON" checked="checked" type="checkbox"><br> </td> <td valign="top">2<input name="button" value="Button" onclick="test3()" type="button"><br> </td> </tr> <tr> <td valign=" top="> 3<br> </td> <td valign="top">4<br> </td> </tr> <tr> <td rowspan="1" colspan="2" valign="top">5 6<br> </td> </tr> </tbody> </table> <br> </td> <td valign="top">Row3 Column2<br> </td> <td valign="top">Row3 Column3<br> </td> </tr> <tr> <td valign="top">Row5 Column1<br> </td> <td valign="top"> <label for="opt2">options:</label> <select id="opt2" name="option" size="1"> <option selected="selected" value="sina" checked="">option1 </option> <option value="href">option2 </option> <option value="avcn">option3 </option> <option value="newsft">option4</option> <option value="stock">option5</option> <option value="down">option6</option> <option value="game">option7 </option> <option value="dict">option8 </option> <option value="home">option9</option> </select> <br> </td> <td valign="top"><br> </td> </tr> </tbody> </table> <table style="text-align: left;" border="1" cellpadding="2" cellspacing="2"> <caption align="left">Caption on the left</caption> <tbody> <tr> <td style="vertical-align: top;">Row1 Column1</td> <td style="vertical-align: top;">Row1 Column2</td> <td style="vertical-align: top;">Row1 Column3</td> </tr> <tr> <td style="vertical-align: top;">Row2 Column1</td> <td style="vertical-align: top;">Row2 Column2</td> <td style="vertical-align: top;">Row2 Column3</td> </tr> </tbody> </table> <table style="text-align: left;" border="1" cellpadding="2" cellspacing="2"> <caption align="right">Caption on the right</caption> <tbody> <tr> <td style="vertical-align: top;">Row1 Column1</td> <td style="vertical-align: top;">Row1 Column2</td> <td style="vertical-align: top;">Row1 Column3</td> </tr> <tr> <td style="vertical-align: top;">Row2 Column1</td> <td style="vertical-align: top;">Row2 Column2</td> <td style="vertical-align: top;">Row2 Column3</td> </tr> </tbody> </table> <hr> <h1>Table Header and Data Cell with Word Wrapping</b> <table bgcolor="#ffe4c4" border="1" width="55%"> <caption align="top">Data Cell with NOWRAP</caption> <tbody> <tr> <th nowrap="nowrap" width="15%">The <b>NOWRAP</b> attribute stops normal word wrapping that browsers automatically do to fill the allotted table cell space.</th> <th width="15%">With the NOWRAP attribute, the browser assembles the contents of the cell onto a single line.</th> </tr> <tr> <td nowrap="nowrap" width="15%">The <b>NOWRAP</b> attribute stops normal word wrapping that browsers automatically do to fill the allotted table cell space.</td> <td width="15%">With the NOWRAP attribute, the browser assembles the contents of the cell onto a single line.</td> </tr> </tbody> </table> <hr> <h1>Multiple <TBODY> in <TABLE></h1> <table border="1" cellpadding="4" cellspacing="0"> <tbody> <tr> <td>body1,row1,col1</td> <td>body1,row1,col2</td> </tr> <tr> <td>body1,row2,col1</td> <td>body1,row2,col2</td> </tr> <tr> <td>body1,row3,col1</td> <td>body1,row3,col2</td> </tr> </tbody><tbody> <tr> <td>body2,row1,col1</td> </tr> <tr> <td>body2,row2,col1</td> </tr> </tbody><tbody> <tr> <td>body3,row1,col1</td> <td>body3,row1,col2</td> <td>body3,row1,col3</td> </tr> <tr> <td>body3,row2,col1</td> <td>body3,row2,col2</td> <td>body3,row2,col3</td> </tr> <tr> <td>body3,row3,col1</td> <td>body3,row3,col2</td> <td>body3,row3,col3</td> </tr> <tr> <td>body3,row4,col1</td> <td>body3,row4,col2</td> <td>body3,row4,col3</td> </tr> <tr> <td>body3,row5,col1</td> <td>body3,row5,col2</td> <td>body3,row5,col3</td> </tr> </tbody> </table> <hr> <h1>Headers not in the same column and row as the data cell</h1> <table border="1"> <caption>Travel Expense Report</caption> <tbody> <tr> <th><br> </th> <th id="header2" axis="expenses">Meals </th> <th id="header3" axis="expenses">Hotels </th> <th id="header4" axis="expenses">Transport </th> <td>subtotals</td> </tr> <tr> <th id="header6" axis="location">San Jose </th> <th> <br> </th> <th> <br> </th> <th> <br> </th> <td> <br> </td> </tr> <tr> <td id="header7" axis="date">25-Aug-97 </td> <td headers="header6 header7 header2">37.74 </td> <td headers="header6 header7 header3">112.00 </td> <td headers="header6 header7 header4">45.00 </td> <td> <br> </td> </tr> <tr> <td id="header8" axis="date">26-Aug-97 </td> <td headers="header6 header8 header2">27.28 </td> <td headers="header6 header8 header3">112.00 </td> <td headers="header6 header8 header4">45.00 </td> <td> <br> </td> </tr> <tr> <td>subtotals </td> <td>65.02 </td> <td>224.00 </td> <td>90.00 </td> <td>379.02 </td> </tr> <tr> <th id="header10" axis="location">Seattle </th> <th> <br> </th> <th> <br> </th> <th> <br> </th> <td> <br> </td> </tr> <tr> <td id="header11" axis="date">27-Aug-97 </td> <td headers="header10 header11 header2">96.25 </td> <td headers="header10 header11 header3">109.00 </td> <td headers="header10 header11 header4">36.00 </td> <td> <br> </td> </tr> <tr> <td id="header12" axis="date">28-Aug-97 </td> <td headers="header10 header12 header2">35.00 </td> <td headers="header10 header12 header3">109.00 </td> <td headers="header10 header12 header4">36.00 </td> <td> <br> </td> </tr> <tr> <td>subtotals </td> <td>131.25 </td> <td>218.00 </td> <td>72.00 </td> <td>421.25 </td> </tr> <tr> <th>Totals </th> <td>196.27 </td> <td>442.00 </td> <td>162.00 </td> <td>800.27 </td> </tr> </tbody> </table> </body></html>