?
Solved

convert tables into <div> html, css

Posted on 2009-04-07
3
Medium Priority
?
1,394 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 1500 total points
ID: 24094498
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
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…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

589 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