Saroj13
asked on
convert tables into <div> html, css
Hi all,
I am having difficuly in converting tables to <div>. Would you please convert all tables into <div> tags.
using HTMl and css.
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"> </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"/> <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>
You'll need to use JavaScript. HTML and CSS alone, cannot achieve what you are looking to do. Is JavaScript not an option?
ASKER
javascript part, i will do. I dont know how to convert all tables to <div>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.