storm/cthulhu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
3f1eb6e5af
cthulhu/test/html/htmlpage.html

2272 lines
72 KiB
HTML
Raw Blame History

<!DOCTYPE html PUBLIC "-//w3c//dtd html 4.0 transitional//en">
<html><head>
<title>HTML test page</title>
</head><body>
<b><a href="#Text_Formats">Test Formats</a><br>
<a href="#Alignment">Alignment Text</a><br>
<a href="#Indent">Indent Text</a><br>
<a href="#HTML">HTML Forms and Widgets</a><br>
<a href="#List">List</a><br>
<a href="#Tag">Tag</a><br>
<a href="#Table">Table</a><br>
<br>
<a href="#Test_Cases">Test Cases (from bugs)</a><br>
<br>
</b>
<hr style="width: 100%; height: 2px;"><b><a name="Text_Formats"></a>Text
Formats</b><br>
<b><br>
</b><b>This sentence is bold.</b>
<p><i>This sentence is italicized.</i>
</p>
<p><u>This sentence is underlined.</u>
</p>
<p><strike>This sentence uses strikethrough.</strike>
</p>
<p>This <sup>sentence </sup>has the words <sup>sentence </sup>in
superscript.
</p>
<p>This <sub>sentence </sub>has the word <sub>sentence </sub>in
subscript.
</p>
<h1>This is a Heading 1.</h1>
<h2>
This is a Heading 2.</h2>
<h3>
This is a Heading 3.</h3>
<h4>
This is a Heading 4.</h4>
<h5>
This is a Heading 5.</h5>
<h6>
This is a Heading 6.</h6>
<font face="Arial">This sentence is in Arial font.</font>
<p><font face="Comic Sans MS">1This sentence is in Comic Sans MSl font.</font>
<br>
<font face="Courier New,Courier">2This sentence is in Courier New Font.</font>
<br>
<font face="Garamond">3This sentence is in Garamondl font.</font>
<br>
<font face="Impact">4This sentence is in Impact font.</font>
<br>
<font face="Lucida Console">5This sentence is in Lucida Console font.</font>
<br>
<font face="Sydnie">6This sentence is in Sydnie font.</font>
<br>
<font face="Tahoma">7This sentence is in Tahoma font.</font>
<br>
<font face="Times New Roman,Times">8This sentence is in Times New Roman
font.</font>
</p>
<p><font size="+2">9This sentence is in font size 18 on a PC or font
size
+2.</font>
<br>
<font size="-1">aThis sentence is in font size 10 on a PC.</font>
</p>
<p><font color="#00cc00">bThis sentence is green.</font>
</p>
<address>cThis sentence is in address format.</address>
<blink>dThis sentence is blinking.</blink>
<pre>eThis sentence contains preformatted plain text.<br><br></pre>
<hr style="width: 100%; height: 2px;"><a name="Alignment"></a>Alignment<br>
<h3>From Shakespeare's Hamlet</h3>
<p align="left">I have of late but<br>
wherefore I know not lost all my mirth,<br>
forgone all custom of exercises;<br>
and indeed, it goes so heavily with<br>
my disposition that this goodly frame,<br>
the earth, seems to me a sterile promontory;<br>
this most excellent canopy, the air, look you,<br>
this brave o'erhanging firmament,<br>
this majestical roof fretted with golden fire<br>
why, it appeareth no other thing to me than a foul<br>
and pestilent congregation of vapours.<br>
What a piece of work is a man!<br>
how noble in reason! how infinite in faculties!<br>
in form and moving how express and admirable!<br>
in action how like an angel!<br>
in apprehension how like a god!<br>
the beauty of the world, the paragon of animals!
</p>
<p align="center">I have of late but<br>
wherefore I know not lost all my mirth,<br>
forgone all custom of exercises;<br>
and indeed, it goes so heavily with<br>
my disposition that this goodly frame,<br>
the earth, seems to me a sterile promontory;<br>
this most excellent canopy, the air, look you,<br>
this brave o'erhanging firmament,<br>
this majestical roof fretted with golden fire<br>
why, it appeareth no other thing to me than a foul<br>
and pestilent congregation of vapours.<br>
What a piece of work is a man!<br>
how noble in reason! how infinite in faculties!<br>
in form and moving how express and admirable!<br>
in action how like an angel!<br>
in apprehension how like a god!<br>
the beauty of the world, the paragon of animals!
</p>
<p align="right">I have of late but<br>
wherefore I know not lost all my mirth,<br>
forgone all custom of exercises;<br>
and indeed, it goes so heavily with<br>
my disposition that this goodly frame,<br>
the earth, seems to me a sterile promontory;<br>
this most excellent canopy, the air, look you,<br>
this brave o'erhanging firmament,<br>
this majestical roof fretted with golden fire<br>
why, it appeareth no other thing to me than a foul<br>
and pestilent congregation of vapours.<br>
What a piece of work is a man!<br>
how noble in reason! how infinite in faculties!<br>
in form and moving how express and admirable!<br>
in action how like an angel!<br>
in apprehension how like a god!<br>
the beauty of the world, the paragon of animals!<br>
</p>
<hr style="width: 100%; height: 2px;"><a name="Indent"></a>Indent<br>
&nbsp;&nbsp;&nbsp; by Wislawa Szymborska - 1972
<blockquote>I am a tranquilizer. <br>
I am effective at home, <br>
I work well at the office, <br>
I take exams, <br>
I appear in court, <br>
I carefully mend broken crockery - <br>
all you need do is take me, <br>
dissolve me under the tongue, <br>
all you need do is swallow me, <br>
just wash me down with water.
<p>I know how to cope with misfortune, <br>
how to endure bad news, <br>
take the edge of injustice, <br>
make up for the absence of God, <br>
help pick out your widow's weeds. <br>
What are you waiting for - <br>
have faith in chemistry's compassion. </p>
<p>You're still a young man/woman, <br>
you really should settle down somehow. <br>
Who said <br>
life must be lived courageously? </p>
<p>Hand your abyss over to me - <br>
I will line it up with soft sleep, <br>
you'll be grateful for <br>
the four-footed landing. </p>
<p>Sell me your soul. <br>
There's no other buyer likely to turn up. </p>
</blockquote>
<p style="margin-left: 40px;">There's no other devil left.<br>
</p>
<hr style="width: 100%; height: 2px;"><a name="HTML"></a>HTML Form and
Widgets<br>
<br>
<b>Textfield :</b>
<form method="post" action="cgi.cgi">Enter your Name:&nbsp;<input name="yourName"><b><font color="#ff0000">text
field using </font><font color="#0000ff">default type=text</font></b>
<p>1. Enter your Address:&nbsp;<input name="yourAddress" size="50" maxlength="180" type="text"><b>text
field using <font color="#0000ff">SIZE</font> and <font color="#0000ff">MAXLENGTH</font></b> </p>
<p>2. Enter your City:&nbsp;<input name="yourCity" size="19" type="text">3.
Enter your State:&nbsp;<input name="yourState" size="2" maxlength="2" type="text">4.
Enter your Country:&nbsp;<input name="yourCountry" size="2" maxlength="2" value="US" type="text"><img src="htmlpage_files/red_arrow_l.html" height="13" width="13"><b><font color="#ff0000">text
field using </font><font color="#0000ff">value</font></b> </p>
<p>5. Enter your Zip:&nbsp;<input name="yourZip" size="10" maxlength="10" type="text"> </p>
<p>6. What happens when a fixed-width font(the default) is used for a
one-byte
text input area, let's try it.. Enter one character:&nbsp;<input name="One-byte" value="" size="1" maxlength="1" type="text"> <br>
</p>
<hr><b>&nbsp;CheckBox:</b>
<h2>What are your favorite pets?</h2>
<input name="bird" value="bird" type="checkbox">bird <br>
<input name="fish" value="fish" type="checkbox">fish <br>
<input name="wild" value="wild animal" type="checkbox">wild animal <br>
<hr width="100%"> <br>
<b>Radio Buttons:</b>
<h2>Would type of wine do you like?</h2>
<input name="wine" value="cabernet sauvignon" checked="checked" type="radio">cabernet
sauvignon <br>
<input name="wine" value="merlot" type="radio">merlot <br>
<input name="wine" value="nebbiolo" type="radio">nebbiolo <br>
<input name="wine" value="pinot noir" type="radio">pinot noir <br>
<input name="wine" value="none" type="radio">don't drink wine <br>
</form>
<hr><b>&nbsp;Password Field:</b>
<h2>Who are you?</h2>
<form method="post" action="cgi-bin/post-query.cgi"><b>Enter your
Password:</b><input name="passwd" type="password">
<hr>
<h2><font size="-0">Submit Buttons:</font></h2>
<input type="submit"><b><font color="#ff0000">submit
button using </font><font color="#0000ff"><i>default</i> "VALUE"</font></b>
<p><input value="Click Here" type="submit"><b><font color="#ff0000">submit
button using </font><font color="#0000ff"><i>assigned</i> "VALUE", <i>no</i>
"NAME"</font></b> </p>
<p><input name="send" value="Send Out" type="submit"><b><font color="#ff0000">submit
button using </font><font color="#0000ff"><i>assigned</i> "NAME" &amp;
"VALUE"</font></b> </p>
<hr>
<h2><font size="-0">Form Multiline Text Areas:</font></h2>
<font size="+1">Enter any
Comments you have about this Web page following:</font>
<p><textarea name="comment1" rows="7" cols="50"></textarea><img src="htmlpage_files/red_arrow_l.html" height="13" width="13"><b><font color="#ff0000">multiline text area
with </font><font color="#0000ff"><i>default</i>
WRAP=NO WRAP</font></b> </p>
<p><textarea name="comment2" rows="7" cols="50" wrap="soft"></textarea><img src="htmlpage_files/red_arrow_l.html" height="13" width="13"><b><font color="#ff0000">multiline text area
with </font><font color="#0000ff">WRAP=SOFT</font></b> </p>
<p><textarea name="comment3" rows="7" cols="50" wrap="hard"></textarea><img src="htmlpage_files/red_arrow_l.html" height="13" width="13"><b><font color="#ff0000">multiline text area
with </font><font color="#0000ff">WRAP=HARD</font></b> </p>
<hr>
<h2><font size="-0">Pulldown menus:</font></h2>
<font size="+1">Regular
Pizza order?
<select name="pizza">
<option>Three Cheeses</option>
<option>Vegetarian</option>
<option>Pepperoni</option>
<option>Canadian
Bacon &amp; Pinapple</option>
</select>
<b><font color="#ff0000">selection </font><font color="#0000ff">without
"multiple"</font><font color="#ff0000"> act as a pull-down menu</font></b>
</font>
<p><font size="+1"><font size="+1">Gourmet Pizza order?
<select name="gourmet" multiple="multiple">
<option>Italian
Garlic Supreme</option>
<option>Chicken &amp; Garlic Gourmet</option>
<option selected="selected">Vegetarian
Gourmet</option>
<option>Gourmet Combo</option>
<option>Hawaiian Shrimp</option>
<option>Sante Fe Style</option>
<option>Tex
Mex</option>
</select>
<b><font color="#ff0000">selection </font><font color="#0000ff">with
"multiple"</font><font color="#ff0000"> act as a scrolling list</font></b>
<br>
<spacer type="horizontal" size="403"><b><font color="#ff0000">and has
a </font><font color="#0000ff"><i>pre-selected</i> "option"</font></b>
</font></font></p>
<p><font size="+1"><font size="+1"><font size="+1">Extra Pizza Add-On
order?
<select name="extra" size="3">
<option>cheese</option>
<option>tomato</option>
<option selected="selected">mushrooms</option>
<option>onion</option>
<option>olives</option>
<option>anchovy</option>
</select>
<b><font color="#ff0000">selection
with </font><font color="#0000ff">size=3 with/without "multiple"</font><font color="#ff0000">
act as a scrolling list</font></b> <br>
<spacer type="horizontal" size="343"><b><font color="#ff0000">and has
a </font><font color="#0000ff"><i>pre-selected</i> "option"</font></b>
</font></font></font></p>
<p><font size="+1"><font size="+1"><font size="+1"><font size="+1">Drink
order?
<select name="drink" size="1">
<option>coke</option>
<option>pepsi&nbsp;</option>
<option value="diet" selected="selected">diet
coke</option>
<option value="diet">diet sprite</option>
</select>
</font></font></font></font></p>
<hr></form>
<br>
<hr style="width: 100%; height: 2px;"><a name="List"></a>List<br>
<br>
<b><font size="+1">Welcome to a list of lists</font></b>
<br>
Lists are not only fun to make, they are fun to use. They help us:
<ol>
<li>remember what the heck we are doing each day</li>
<li>arrange long and arbitrary lines of text into ordered lists that
are pleasing
to the eye and suggest some sense of priority, even if it is artificial</li>
<li>look really cool when we carry them around on yellow Post-Its<font size="-2">
tm.</font></li>
<li><font size="-0">and that other thing I keep forgetting.</font></li>
</ol>
<font size="-0">Your ordered lists can start at a strange number, like</font>
<ol start="6" type="I">
<li><font size="-0">And use roman numerals,</font></li>
<li type="a"><font size="-0">You might try using letters as well,</font></li>
<li type="A"><font size="-0">Maybe you prefer Big Letters,</font></li>
<li type="i"><font size="-0">or small roman numerals</font></li>
<li type="disc"><font size="-0">But discs belong to unordered lists</font></li>
<li value="50" type="1"><font size="-0">Though you can set the value
in a list item!</font></li>
</ol>
<font size="-0">Unordered list :</font>
<ul>
&nbsp; <li><font size="-0">listing item</font></li>
<ul>
&nbsp; <li><font size="-0">first sublevel</font></li>
<ul>
&nbsp; <li><font size="-0">look for the bullet on</font></li>
<ul>
&nbsp; <li><font size="-0">each sublevel</font></li>
<li><font size="-0">they should all be different, except here.</font></li>
</ul>
<li><font size="-0">second sublevel</font></li>
</ul>
<li type="square"><font size="-0">or you can specify a square</font></li>
<ul>
<li type="circle"><font size="-0">if your TYPE is circle</font></li>
<li type="disc"><font size="-0">or even a disc</font></li>
</ul>
</ul>
<li type="square"><font size="-0">Franz Liszt</font></li>
<ul>
<li><font size="-0">was a composer who was not square</font></li>
<li type="disc"><font size="-0">would have liked the Who</font></li>
</ul>
</ul>
<ul type="circle">
<li><font size="-0">feeling listless. TYPE=CIRCLE</font></li>
<li color="#FFFF00" type="square"><font size="-0">blah, blah, blah
(square)</font></li>
<li type="disc"><font size="-0">whine, whine, whine(disc)</font></li>
</ul>
<br>
<hr style="width: 100%; height: 2px;"><font color="#ff0000"><span style="color: rgb(0, 0, 0);"><a name="Tag"></a>Tag</span><br>
Bold Tag with other Physical Character
Style Tags.</font>
<p><u><font size="+2">Bold Tag with :</font></u>
</p>
<ul>
<li><font size="+1"><font color="#0000ff">Big : </font><b>This line
has both
Bold tag and the Big tag. </b>(outside the Bold tag)</font></li>
<li><font color="#0000ff"><font size="+1">Blink : </font></font><blink><b>This
line has both the Bold tag and the Blink tag. </b>(outside the Bold
tag)</blink></li>
<li><font color="#0000ff"><font size="+1">Font : </font></font><font face="Courier"><font color="#006400"><font size="-1"><b>This
line has the Bold tag and the Font face tag set to "Courier"
,color=darkgreen
and size =-1.</b>(outside the Bold tag)</font></font></font></li>
<li><font color="#0000ff"><font size="+1">Italics : </font></font><i><b>Text
that is both Bold and Italic. </b>(outside the Bold tag)</i></li>
<li><font color="#0000ff"><font size="+1">Small : </font></font><font size="-1"><b>This
line has both Bold tag and the Small tag; hence I should be smaller !! </b>(outside
the Bold tag)</font></li>
<li><font color="#0000ff"><font size="+1">Strikethrough : </font></font><strike><b>I
should be Bold and Strikethroughed. </b>(outside the Bold tag)</strike></li>
<li><font color="#0000ff"><font size="+1">Subscript : </font></font><b>I'm
bold
and I have a<sub>subscript</sub></b></li>
<li><font color="#0000ff"><font size="+1">Superscript : </font></font><b>I'm
bold too and I have a <sup>superscript</sup></b></li>
<li><font color="#0000ff"><font size="+1">Typewriter : </font></font><tt><b>This
line has the Bold tag and the Typewriter tag. </b>(outside the Bold
tag)</tt></li>
<li><font color="#0000ff"><font size="+1">Underline : </font></font><u><b>I'm
bold and I should be underlined. </b>(outside the Bold tag)</u></li>
</ul>
<hr>
<center><font color="#ff0000">&nbsp;Bold Tag with Content Character
Style
Tags</font></center>
<u><font size="+2">Bold Tag with :</font></u>
<ul>
<li><font color="#006400"><font size="+1">Cite :</font></font><b> The
part after
the exclamation is in Cite Tags !!!! <i>(Chitra, 1996)</i> </b><i>(outside
the Bold tag)</i></li>
<li><font color="#006400"><font size="+1">Code :</font></font><tt><b>
#include
"main.h"</b>(outside the Bold tag)</tt></li>
<li><font color="#006400"><font size="+1">Definition :</font></font><b>
The word&nbsp;<dfn>&amp;ltCharacter
Styles</dfn>&gt; are surrounded by the definition tag.</b></li>
<li><font color="#006400"><font size="+1">Emphasis :</font></font> <i><b>I
am
using the Bold and the Emphasis tag. </b>(outside the Bold tag)</i></li>
<li><font color="#006400"><font size="+1">Keyboard :</font></font><tt><b>
Inside
bold and keyboard tags. </b>(outside the Bold tag)</tt></li>
<li><font color="#006400"><font size="+1">Sample :</font></font><tt><b>
Well
!! I'm using the bold and the sample Tag. </b>(outside the Bold tag)</tt></li>
<li><font color="#006400"><font size="+1">Strong :</font></font><b> I
have the
Bold and the Strong tags around me !!(outside the Bold tag)</b></li>
<li><font color="#006400"><font size="+1">Variable : </font></font><i><b>you_tell_me.
Yup !! the Bold and Variable tag. </b>(outside the Bold tag)</i></li>
</ul>
<hr>
<center><font color="#ff0000">Superscript Tag with other Physical
Character
Style Tags:</font></center>
<p><u><font size="+2">Superscript Tag with :</font></u>
</p>
<ul>
<li><font color="#0000ff"><font size="+1">Bold : </font></font><b>This
line has
both Bold tag and <sup>the Superscript tag.</sup> (outside the
Superscript
tag)</b></li>
<li><font size="+1"><font color="#0000ff">Big : </font>This line has
both Big
tag and<sup>I'm the Superscript.</sup> (outside the Superscript tag)</font></li>
<li><font color="#0000ff"><font size="+1">Blink : </font></font><blink>This
line
has both the Blink tag and <sup>Superscriptt tag.</sup> (outside the
Superscript
tag)</blink></li>
<li><font color="#0000ff"><font size="+1">Font : </font></font><font face="Courier"><font color="#006400"><font size="-1">This
line has the <sup>Superscript tag and the Font face tag set to
"Courier"
,color=darkgreen and size =-1.</sup>(outside the Superscript tag)</font></font></font></li>
<li><font color="#0000ff"><font size="+1">Italics : </font></font><i>Text
that
is Italic and <sup>has a Superscript.</sup>(outside the Superscript
tag)</i></li>
<li><font color="#0000ff"><font size="+1">Small : </font></font><font size="-1">This
line has both <sup>Superscript tag and the Small tag;</sup> hence I
should
be smaller !!(outside the Superscript tag)</font></li>
<li><font color="#0000ff"><font size="+1">Strikethrough : </font></font><strike>I
should have a <sup>Superscript and be Strikethroughed.</sup>(outside
the
Superscript tag)</strike></li>
<li><font color="#0000ff"><font size="+1">Subscript : </font></font>I
have a<sub>
subscript and it has a <sup>Superscript</sup></sub></li>
<li><font color="#0000ff"><font size="+1">Superscript : </font></font>I
have
a <sup>superscript and it again has a SUPERSCRIPT</sup></li>
<li><font color="#0000ff"><font size="+1">Typewriter : </font></font><tt>This
line has the <sup>Superscript tag and the Typewriter tag. </sup>(outside
the Superscript tag)</tt></li>
<li><font color="#0000ff"><font size="+1">Underline : </font></font><u>I'm
<sup>Superscript
and I should be underlined. </sup>(outside the Superscript tag)</u></li>
</ul>
<hr>
<center><font color="#ff0000">Superscript Tag with Content Character
Style
Tags</font></center>
<u><font size="+2">Superscript Tag with :</font></u>
<ul>
<li><font color="#006400"><font size="+1">Cite :</font></font> The
part after
the exclamation is in Cite Tags and is a Sup !!!! <i><sup>(Chitra,
1996) </sup>(outside the Superscript tag)</i></li>
<li><font color="#006400"><font size="+1">Code :</font></font> I have
a <sup>Superscript<tt>
#include "main.h"</tt>(outside the Superscript tag)</sup></li>
<li><font color="#006400"><font size="+1">Definition :</font></font>
The word&nbsp;<dfn><sup>&amp;ltCharacter
Styles&gt;</sup></dfn> are surrounded by the definition tag and is a
Sup.</li>
<li><font color="#006400"><font size="+1">Emphasis :</font></font> <i>I
am using
the <sup>Superscript and the Emphasis tag. </sup>(outside the
Superscript
tag)</i></li>
<li><font color="#006400"><font size="+1">Keyboard :</font></font><tt>
I have
the <sup>Superscript and keyboard tags. </sup>(outside the
Superscript
tag)</tt></li>
<li><font color="#006400"><font size="+1">Sample :</font></font><tt>
Well !!
I'm using the<sup> Superscript and the sample Tag. </sup>(outside the
Superscript
tag)</tt></li>
<li><font color="#006400"><font size="+1">Strong :</font></font><b> I
have the <sup>Superscript and the Strong tags !!</sup>(outside the
Superscript tag)</b></li>
<li><font color="#006400"><font size="+1">Variable : </font></font><i>you_tell_me.<sup>
Yup !! the Superscript and Variable tag. </sup>(outside the
Superscript
tag)</i></li>
</ul>
<hr><a name="Table"></a>Table<br>
<br>
<table border="5" cellspacing="2">
<tbody>
<tr>
<td>1&nbsp;</td>
<td colspan="9">2&nbsp;</td>
</tr>
<tr>
<td rowspan="2">3&nbsp;</td>
<td>4&nbsp;</td>
<td colspan="3" rowspan="2">5&nbsp;</td>
<td colspan="3">6&nbsp;</td>
<td colspan="2">7&nbsp;</td>
</tr>
<tr>
<td>8&nbsp;</td>
<td colspan="3" rowspan="5">9&nbsp;</td>
<td colspan="2" rowspan="6">10&nbsp;</td>
</tr>
<tr>
<td rowspan="5">11&nbsp;</td>
<td colspan="4">12&nbsp;</td>
</tr>
<tr>
<td rowspan="2">13&nbsp;</td>
<td>14&nbsp;</td>
<td rowspan="2">15&nbsp;</td>
<td rowspan="2">16&nbsp;</td>
</tr>
<tr>
<td>17&nbsp;</td>
</tr>
<tr>
<td colspan="4">18&nbsp;</td>
</tr>
<tr>
<td colspan="3">19&nbsp;</td>
<td colspan="4">20&nbsp;</td>
</tr>
<tr>
<td colspan="2" rowspan="2">21&nbsp;</td>
<td colspan="5" rowspan="2">22&nbsp;</td>
<td>23&nbsp;</td>
<td>24&nbsp;</td>
<td rowspan="2">25&nbsp;</td>
</tr>
<tr>
<td>26&nbsp;</td>
<td>27&nbsp;</td>
</tr>
<tr>
<td colspan="10">28&nbsp;</td>
</tr>
<tr>
<td>29&nbsp;</td>
<td>30&nbsp;</td>
<td>31&nbsp;</td>
<td>32&nbsp;</td>
<td>33&nbsp;</td>
<td>34&nbsp;</td>
<td>35&nbsp;</td>
<td>36&nbsp;</td>
<td>37&nbsp;</td>
<td>38&nbsp;</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>
<p>
</p>
<hr width="100%">
<h4 style="text-align: center;">Table showing text flow:</h4>
<hr style="width: 100%; height: 2px;">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!!!
<br>
<hr width="100%">
<center><b>Table Border Tests</b>
<hr width="100%"></center>
<b>Table showing the default table BORDER=1 :</b>
<table bgcolor="#ffe4c4" border="1">
<caption align="top">&nbsp;</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>
<br>
<b><font color="#000000">Tables showing different border values:</font></b>
<br>
&nbsp;
<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>
<br>
&nbsp;
<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>
<hr>
<br>
<b><font color="#000000">Table showing BORDER=0 :</font></b>
<table bgcolor="#ffe4c4" border="0">
<caption align="top">&nbsp;</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>
<p>
</p>
<hr width="100%"><br>
<center><b>&nbsp;Table Cellpadding Test</b></center>
<hr width="100%">
<table bgcolor="#ffe4c4" border="1">
<caption align="top"><b>Table with default cellpadding:</b> <br>
&nbsp;</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%">
<p><b>Tables with different cellpaddings:</b>
<br>
&nbsp;
<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>
<br>
&nbsp;
<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>
</p>
<hr><br>
<b>Table with cellpadding =0 :</b>
<table bgcolor="#ffe4c4" border="1" cellpadding="0">
<caption align="top">&nbsp;</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>
<p>
</p>
<hr><b>Table Cellspacing Test</b>
<hr><b>Table with default cellspacing:</b>
<table bgcolor="#ffdead" border="1">
<caption align="top">&nbsp;</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>
<br>
<b>Table with CELLSPACING=0 &amp; a border:</b>
<table bgcolor="#ffdead" border="1" cellspacing="0">
<caption align="top">&nbsp;</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>
<hr>
<br>
<b>Tables showing different cellspacing values:</b>
<br>
&nbsp;
<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>
<br>
&nbsp;
<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>
<p>
</p>
<hr width="100%">
<center><b>&nbsp;Tables Columnspan Test</b></center>
<hr><b>Table Header Cells spanning multiple columns:</b>
<ul>
&nbsp;
<table border="1">
<caption align="top">&nbsp;</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>
</ul>
<hr>
<br>
<b><font color="#333333">Table with data cells spanning multiple
columns:</font></b>
<ul>
&nbsp;
<table border="1">
<caption align="top">&nbsp;</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>
</ul>
<hr><b><font color="#000000">Table with nested header &amp; data cells
spanning multiple columns:</font></b>
<ul>
&nbsp;
<table border="1">
<caption align="top">&nbsp;</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>
</ul>
<hr>
<br>
<center><b>&nbsp;Tables Rowspan Test</b></center>
<hr>
<ul>
<b>Table Header Cells spanning multiple rows:</b>
<table border="1" width="65%">
<caption align="top">&nbsp;</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>
</ul>
<hr>
<ul>
<b>Table Data Cells spanning multiple rows:</b>
<table border="1" width="65%">
<caption align="top">&nbsp;</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>
</ul>
<hr>
<br>
<b>Nested Table Header Cells &amp; Data Cells spanning multiple rows:</b>
<ul>
&nbsp;
<table border="1" width="65%">
<caption align="top">&nbsp;</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>
</ul>
<hr>
<div style="text-align: center;"><b>Tables Caption Test</b><br>
</div>
<hr style="width: 100%; height: 2px;"><span style="font-weight: bold;">Caption
align to top of a table.</span><br>
<br>
<table summary="This is the table's summary" title="table1" bgcolor="#ffffcc" border="5" frame="border" rules="groups" width="66%">
<caption>This is the Table1's Caption</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>
<br>
<hr style="width: 100%; height: 2px;"><span style="font-weight: bold;">Caption
align to bottom of table<br>
</span><span style="font-weight: bold;"><br>
</span><br>
<table summary="this is the second table" title="Table2" border="1" cellpadding="2" cellspacing="2">
<caption align="bottom">Table's caption on 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 &nbsp;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>
<br>
<span style="font-weight: bold;">Table Caption in the table<br>
<br>
</span>
<table summary="this is the second table" title="Table2" border="1" cellpadding="2" cellspacing="2">
<caption align="bottom"><input name="F1" size="20" value="Table's Caption on the 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&gt;file&lt;/lable&gt;&lt;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 &nbsp;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>
<br>
<span style="font-weight: bold;"><br>
</span>
<hr style="width: 100%; height: 2px;"><span style="font-weight: bold;">Caption
align to left of table</span><br>
<br>
<table style="text-align: left;" border="1" cellpadding="2" cellspacing="2">
<caption align="left">Table's 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>
<br>
<hr style="width: 100%; height: 2px;"><span style="font-weight: bold;">Caption
align to right of table</span><br>
<br>
<table style="text-align: left;" border="1" cellpadding="2" cellspacing="2">
<caption align="right">Table's 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>
<br>
<hr style="width: 100%; height: 2px;"><b>Tables Nowrap Test</b>
<hr><br>
<b>Table Header &amp; Data Cell with Word Wrapping:</b>
<table bgcolor="#ffe4c4" border="1" width="55%">
<caption align="top">&nbsp;</caption> <tbody>
<tr>
<th width="15%">The <b>NOWRAP</b> attribute stops normal word
wrapping
that browsers automatically do to fill the allotted table cell
space.&nbsp;</th>
<th width="15%">With the NOWRAP attribute, the browser assembles
the contents
of the cell onto a single line.&nbsp;</th>
</tr>
<tr>
<td width="15%">The <b>NOWRAP</b> attribute stops normal word
wrapping
that browsers automatically do to fill the allotted table cell
space.&nbsp;</td>
<td width="15%">With the NOWRAP attribute, the browser assembles
the contents
of the cell onto a single line.&nbsp;</td>
</tr>
</tbody>
</table>
<hr>
<br>
<b>Table Header &amp; Data Cell with NOWRAP:</b>
<table bgcolor="#ffe4c4" border="1" width="55%">
<caption align="top">&nbsp;</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.&nbsp;</th>
<th width="15%">With the NOWRAP attribute, the browser assembles
the contents
of the cell onto a single line.&nbsp;</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.&nbsp;</td>
<td width="15%">With the NOWRAP attribute, the browser assembles
the contents
of the cell onto a single line.&nbsp;</td>
</tr>
</tbody>
</table>
<p>
</p>
<br>
<hr style="width: 100%; height: 2px;"><p><span style="font-weight: bold;">Multiple
&lt;TBODY&gt; in
&lt;TABLE&gt;<br>
<br>
</span></p>
<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>
<br>
<hr style="width: 100%; height: 2px;"><span style="font-weight: bold;">Headers
are not</span><span style="font-family: monospace; font-weight: bold;">
</span><span style="font-weight: bold;">in the same column and row as
the data cell</span><br style="font-weight: bold;">
<br>
<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>
<br>
<br>
<hr width="100%"><a name="Test_Cases"></a>Test Cases<br>
<br>
Case 1: word wrap without BR (Bug)<br>
***************************************<br>
<br>
<font size="2">Description: <br>
Press ctrl+right in following paragraph.<br>
Actual Result: When caret stops at end of last word in line, press
ctrl+right, caret doesn't move; press ctrl+right again, caret goes to
beginning of first word in next line.<br>
Expected Result: When caret stops at end of last word in line, press
ctrl+right, caret goes to end of first word in next line.</font><br>
<br>
Is there some bug that really bothers you? As well as reporting it,
feel free to fix it. Fixing bugs in Mozilla is far easier than in many
other applications, because you can fix bugs (such as those in our
cross-platform front end, written in XUL, our XML-based User-interface
Language, CSS and Javascript) using only the build you are running
right now. <br>
<br>
<br>
Case 2: word wrap with BR (Bug)<br>
**********************************<br>
<br>
<font size="2">Description: <br>
Press ctrl+right in following lines.<br>
Actual Result: Caret doesn't stop at end of the last word in line, but
stops at beginning of next line.<br>
Expected Result: Caret should stop at end of the last word in line and
should not stop at beginning of next line.</font><br>
<br>
line one<br>
line two<br>
line three<br>
<br>
<br>
Case 3: word with different styles (It's OK)<br>
********************************************<br>
<br>
<font size="2">Description: <br>
If there's no space, it should be considered as one word. ("cd" in
"abcdef" is italic and bold)<br>
</font><br>
ab<span style="font-style: italic; font-weight: bold;">cd</span>ef ab<span style="font-weight: bold; font-style: italic;">cd</span>ef ab<span style="font-weight: bold; font-style: italic;">cd</span>ef<br>
<br>
<br>
Case 4: next word with different styles (Bug)<br>
**********************************************<br>
<br>
<font size="2">Description: <br>
Press ctrl+right in following line.<br>
Actual Result: Caret doesn't stop at end of "def".</font><br>
<br>
abc <span style="font-weight: bold; font-style: italic;">def</span> ghi<br>
<br>
<br>
Case 5: several white spaces between words (Bug)<br>
***************************************************<br>
<br>
<font size="2">Description: <br>
Press ctrl+right in following line.<br>
Actual Result: Caret stops serveral times between "abc" and "def".<br>
Expected Result: There should be no stop at white space.<br>
</font><br>
abc&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; def<br>
<br>
<br>
Case 6:empty block "&lt;b&gt;&lt;/b&gt;" in word (Bug)<br>
***********************************************<br>
<br>
<font size="2">6.1. Description: <br>
Check the html source, there's &lt;b&gt;&lt;/b&gt; between "c" and "d".<br>
Caret should not stops after "c".</font><br>
<br>
abcdef<br>
<br>
<br>
<font size="2">6.2. Description: </font><a href="http://dtsw.eng.sun.com/cgi-bin/bugtraq_showbug?bugid=5087972"><u>5087972</u></a>.<br>
<font size="2">Check the html source, there's
&lt;b&gt;&lt;i&gt;&lt;/i&gt;&lt;/b&gt;
between "c" and "d".<br>
Caret should not stops after "c".</font><br>
<br>
abcdef <br>
<br>
<br>
Case 7: layout.word_select.stop_at_punctuation (Bug)<br>
*****************************************************<br>
<br>
<font size="2">Description: <br>
set layout.word_select.stop_at_punctuation to true<br>
Press ctrl+right in following line.<br>
Actual Result: Caret doesn't stops between "-" and "p". (Press
ctrl+left, you'll see the difference)</font><br>
<br>
cross-platform cross-platform cross-platform <br>
<br>
<br>
Case 8: text navigation after &lt;HR&gt;<br>
************************************<br>
<small>8.1Description:<br>
Use righ arrow go through the following text.<br>
Expected Result: all the text should be navigated.<br>
Actural Result: one line is skipped, caret goes to ^Line4.</small><br>
<br>
Line1<br>
Line2<br>
<hr style="width: 100%; height: 2px;">Line3<br>
Line4<br>
<br>
<small>8.2Description:<br>
Use righ arrow go through the following text.<br>
Expected Result: all the text should be navigated.<br>
Actural Result: one line and a character are skipped, caret goes to
L^ine4.</small><br>
<br>
Line1<br>
Line2<br>
<hr style="width: 100%; height: 2px;"><br>
Line4(Line3 is empty BR)<br>
<br>
<br>
<br>
<br>
</body></html>
Reference in New Issue View Git Blame Copy Permalink