1573 lines
44 KiB
HTML
1573 lines
44 KiB
HTML
<!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> |