Solved

convert tables into <div> html, css

Posted on 2009-04-07
3
1,377 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

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
how i fix Remove render-blocking JavaScript 3 56
jquery datepciker end date add 6 days 6 38
Best way to minify CSS with out breaking it 7 36
asp.net mvc5 6 17
This article discusses four methods for overlaying images in a container on a web page
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

777 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