Solved

convert tables into <div> html, css

Posted on 2009-04-07
3
1,375 Views
Last Modified: 2012-05-06
Hi all,

I am having difficuly in converting tables to <div>. Would you please convert all tables into <div> tags.
using HTMl and css.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

 

<html>

<head>

    <style type="text/css">

        .style1

        {

            width: 206px;

        }

    </style>

</head>

 

<body>

 

  <div id="content">

    

<div class="bodyPos" >

<div id="LinksArea">

	<table cellpadding="2" cellspacing="2" >

		<tr>

			<td colspan="4" class="MainHeading">Details

			</td>

		</tr> 

		<tr>

			<td colspan="2"  valign=Top>					

	

				<form name="UsedLinks">

				

					<div id="UsedLinks">

 

					<table id="tUsedLinks" cellspacing="0" rules="all" border="1"  >

						<tr id="UsedLinksLeftHeading">

							<th scope="col" class="UsedLinksLeftHeading">&nbsp;</th>

							<th scope="col" style="color:black;">Title</th>

						</tr>

						<tr id="row" onclick="highlight(this)">

						

							<td><a href="#" id="link" onClick="return SelectedDocRow('11','link1','1223')" >Select</a></td>

							<td class="UsedLinks"><a href="#" class="Title">Link1</a></td>

						</tr>

							  

							  

						<tr id="row" onclick="highlight(this)">

								<td class="UsedLinks"><a href="#" id="link" onClick="return SelectedDocRow('792','link2','233')" >Select</a></td>

							<td class="UsedLinks"><a href="#" class="Title">Link2</a></td>

						</tr>

							  

 

				 </table>

				 </div> 

				 </form>

				  

			

		</td>

 

<td  valign=Top>

<table>			

<tr id="FormView" style="display:block;">

	<td class="style1">

		<form name="UsedLinks" >

			<table cellspacing="0" border="1" >

				<caption align="Left">Details</caption>

				<tr class="UsedLinksRightAreaHeading">

					<td colspan="2" >Details

					</td>

				</tr>

				<tr valign="top">

					<td colspan="2">

						<table class="UsedLinksRightArea">

							<tr style="display:none;">

								<td class="UsedLinksRightAreaCol1"><b>ID:</b></td>

								<td class="UsedLinksRightAreaCol2"><input type="text" id="txtID" name="txtID" style="border:0;" value="ghjh"/>&nbsp;<br />

								</td>

							</tr>   

							<tr>

								<td class="UsedLinksRightAreaCol1"><b></b></td>

								<td class="UsedLinksRightAreaCol2"></td>	

							</tr>                             

							<tr id="rTitle" style="display:none;">

								<td class="UsedLinksRightAreaCol1"><b>Title:</b></td>

								<td class="UsedLinksRightAreaCol2"><div id ="txtUrlTitle">test</div>

								</td>

							</tr>

							<tr id="rUrl"  style="display:none;">

								<td class="UsedLinksRightAreaCol1"><b>Url:</b></td>

								<td class="UsedLinksRightAreaCol2"><div id ="txturl">ssss</div>

								</td>

							</tr>                                      

							

						</table>  

					<br/>

 

						<input type="submit" value="Edit" id="Edit" language="javascript" />   

					</td>

				</tr>

			</table>

		</form>

	</td>

</tr>

 

 

<tr id="DeleteView" style="display:block;" > 

	<td class="style1">   

	<form name="DeleteUsedLinks" method="post" >

		<input type="hidden" name="temp" value="" />					

 

		<table class="UsedLinksRightArea" cellspacing="0" border="0" style="border-style:Ridge;border-collapse:collapse;">

			<caption align="Left">Details</caption>

				<tr class="UsedLinksRightAreaHeading">

					<td colspan="2" style="height: 21px">Details</td>

				</tr>

				<tr valign="top">

					<td colspan="2">

						<table class="UsedLinksRightArea">

							<tr style="display:none;">

								<td class="UsedLinksRightAreaInsertCol1" style="height: 22px"><b>ID:</b></td>

								<td style="height: 22px"><input type="text" id="txtID" name="UrlID" style=" border:0;" readonly="readonly"/>

								</td>

							</tr>   

							<tr>

								<td class="UsedLinksRightAreaInsertCol1"><b></b></td>

								<td align="left">

								</td>

							</tr>   

							<tr id="rDeleteTitle" style="display:none;">

								<td class=UsedLinksRightAreaInsertCol1" style="height: 22px"><b>Title:</b></td>

								<td style="height: 22px"><input type="text" name="Title" style="border:0;" readonly="readonly"/>

								</td>

							</tr>   

							                    

						</table>  

						<br/>

						<input type="submit" value="Delete" id="delete" language="javascript"  />

						<input type="reset" value="Cancel" id="CancelBtn" language="javascript" onclick="return CancelBtn_onclick()"  />   

					</td>

				</tr>

			</table>

		</form>

	</td>

</tr>

</table>

 

	<p align="justify" style="left:80pc;"></p>

	<span id="lblResult" style="color:DarkRed;font-weight:bold;"></span>

</td>

</tr>

</table>

</DIV>

</div>

 

 

  </div>

</body>

</html>

Open in new window

0
Comment
Question by:Saroj13
3 Comments
 
LVL 12

Expert Comment

by:alien109
ID: 24093024
You'll need to use JavaScript. HTML and CSS alone, cannot achieve what you are looking to do. Is JavaScript not an option?
0
 

Author Comment

by:Saroj13
ID: 24093549
javascript part, i will do. I dont  know how to convert all tables to <div>
0
 
LVL 13

Accepted Solution

by:
qwerty021600 earned 500 total points
ID: 24094498
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now