2272 lines
72 KiB
HTML
2272 lines
72 KiB
HTML
|
<!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>
|
||
|
|
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: <input name="yourName"><b><font color="#ff0000">text
|
||
|
|
field using </font><font color="#0000ff">default type=text</font></b>
|
||
|
|
<p>1. Enter your Address: <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: <input name="yourCity" size="19" type="text">3.
|
||
|
|
Enter your State: <input name="yourState" size="2" maxlength="2" type="text">4.
|
||
|
|
Enter your Country: <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: <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: <input name="One-byte" value="" size="1" maxlength="1" type="text"> <br>
|
||
|
|
</p>
|
||
|
|
<hr><b> 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> 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" &
|
||
|
|
"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 & 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 & 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 </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>
|
||
|
|
<li><font size="-0">listing item</font></li>
|
||
|
|
<ul>
|
||
|
|
<li><font size="-0">first sublevel</font></li>
|
||
|
|
<ul>
|
||
|
|
<li><font size="-0">look for the bullet on</font></li>
|
||
|
|
<ul>
|
||
|
|
<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"> 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 <dfn>&ltCharacter
|
||
|
|
Styles</dfn>> 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 <dfn><sup>&ltCharacter
|
||
|
|
Styles></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 </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>
|
||
|
|
<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"> </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>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<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"> </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> Table Cellpadding Test</b></center>
|
||
|
|
<hr width="100%">
|
||
|
|
<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>
|
||
|
|
<hr width="100%">
|
||
|
|
<p><b>Tables with different cellpaddings:</b>
|
||
|
|
<br>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<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"> </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"> </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 & a border:</b>
|
||
|
|
<table bgcolor="#ffdead" border="1" cellspacing="0">
|
||
|
|
<caption align="top"> </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>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<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> Tables Columnspan Test</b></center>
|
||
|
|
<hr><b>Table Header Cells spanning multiple columns:</b>
|
||
|
|
<ul>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
</ul>
|
||
|
|
<hr>
|
||
|
|
<br>
|
||
|
|
<b><font color="#333333">Table with data cells spanning multiple
|
||
|
|
columns:</font></b>
|
||
|
|
<ul>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
</ul>
|
||
|
|
<hr><b><font color="#000000">Table with nested header & data cells
|
||
|
|
spanning multiple columns:</font></b>
|
||
|
|
<ul>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
</ul>
|
||
|
|
<hr>
|
||
|
|
<br>
|
||
|
|
<center><b> Tables Rowspan Test</b></center>
|
||
|
|
<hr>
|
||
|
|
<ul>
|
||
|
|
<b>Table Header Cells spanning multiple rows:</b>
|
||
|
|
<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>
|
||
|
|
</ul>
|
||
|
|
<hr>
|
||
|
|
<ul>
|
||
|
|
<b>Table Data Cells spanning multiple rows:</b>
|
||
|
|
<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>
|
||
|
|
</ul>
|
||
|
|
<hr>
|
||
|
|
<br>
|
||
|
|
<b>Nested Table Header Cells & Data Cells spanning multiple rows:</b>
|
||
|
|
<ul>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
</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 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>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>
|
||
|
|
<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 & Data Cell with Word Wrapping:</b>
|
||
|
|
<table bgcolor="#ffe4c4" border="1" width="55%">
|
||
|
|
<caption align="top"> </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. </th>
|
||
|
|
<th width="15%">With the NOWRAP attribute, the browser assembles
|
||
|
|
the contents
|
||
|
|
of the cell onto a single line. </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. </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>
|
||
|
|
<br>
|
||
|
|
<b>Table Header & Data Cell with NOWRAP:</b>
|
||
|
|
<table bgcolor="#ffe4c4" border="1" width="55%">
|
||
|
|
<caption align="top"> </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>
|
||
|
|
<p>
|
||
|
|
</p>
|
||
|
|
<br>
|
||
|
|
<hr style="width: 100%; height: 2px;"><p><span style="font-weight: bold;">Multiple
|
||
|
|
<TBODY> in
|
||
|
|
<TABLE><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 def<br>
|
||
|
|
<br>
|
||
|
|
<br>
|
||
|
|
Case 6:empty block "<b></b>" in word (Bug)<br>
|
||
|
|
***********************************************<br>
|
||
|
|
<br>
|
||
|
|
<font size="2">6.1. Description: <br>
|
||
|
|
Check the html source, there's <b></b> 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
|
||
|
|
<b><i></i></b>
|
||
|
|
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 <HR><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>
|