Replacing <table> with <div> in an existing page

Question: I need direction as to how to replace the table in this html with div?

The use is desktop only (not for smartphone etc).

The following html is followed by css it is using:
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title><link rel="stylesheet" type="text/css" href=".\styles\resumeStyle.css" /></head>

<body>
    <form method="post" action="Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="ZVQg5fbdJ4eUOAFnP7Wiye5Zz2oABwFD/MDfbk+p4kYZ/MSyNUHmZrGmvDHlBoSlVQY91SIVmsyG4Xx6FEsh1JCGLZlaPD6Q4T81yfxCkyA=" />
</div>

<div class="aspNetHidden">

      <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="CA0B0334" />
</div>
    <div class="center">
  
<table  >
    <tr >
        <td class="contentText">  
               <span >&nbsp;</span> <br />       
                <span class="boldblue2"> Contact:   </span><br>
                <span id="email">email: MEghtebas@gmail.com</span><br/>
               <span>Phone: (949) 533-8239</span><br/>
        </td>
        <td >&nbsp;</td>
        <td class="blueline">&nbsp;</td>
        <td >&nbsp;</td>
        <td class="nameAlignment" colspan="3">
              <span class="name"">Mike M Eghtebas</span><br/>
              <span class="title">Database Application Developer</span>
        </td>
    </tr>
    <tr  class="blueline"><td  colspan="7"></td></tr>
   
   <tr >
        <td rowspan="20" class="contentText">
            <span class="boldblue2"> Location:</span><br />
            <span>Los Angeles, CA 90024</span><br/><br/>
            <span class="boldblue2">Web &amp; Git:</span><br/>
            <span>Datapassion.net</span><br/>
            <span>Github.com/Eghtebas</span><br/><br/>
            <span class="boldblue2">Education:</span><br/>
            <span><b>University Of Oklahoma</b></span><br/>
            <span>BS Mechanical Engineering</span><br/>
            <span><b>Santa Monica College</b></span><br/>
            <span> Web Programing (4.0 GPA)</span><br/><br/>
            <span  class="boldblue2" id="programing">Programing:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
            <img width=175 height=176  src="..\images\piechart.png"><br/>
            <span class="others"><b>Others:</b> MySQL, Java, PHP</span><br/><br/>
            <span class="boldblue2">Certifications:</span><br/>
            <span><b>SQL Server, MTA 98-364</b></span><br/>
            <span>Passed Jan/26/2015</span><br/><br/>
            <span><b>Professional Engineer, PE</b></span><br/>
            <span>License M-27236, active</span><br/><br/>
            <span><b>DPIC Liability IQ Cert.</b> </span><br/>
            <span>(Design Prof. Insurance Co)</span><br/><br/>
            <span><b>Microsoft Solutions MSF</b> </span><br/>
            <span>Software development cycle</span><br/><br/>
            <span class="boldblue2">Societies:</span><br/>
            <span><b>Experts-Exchange.com</b></span><br/>
            <span>Solutions provided: 1,500 </span><br/>
            <span>Certificates Earned: 10</span><br/><br/>
            <span><b>Sqlpass.org</b> </span><br/>
            <span>Users Group held</span> <br/>
            <span>bi-monthly at <b>UCLA </b></span> <br/>
      </td >
       <td  rowspan="20" >&nbsp;</td>
        <td  rowspan="20" class="blueline">&nbsp;</td>
       <td  rowspan="20" >&nbsp;</td>
       <tr> <td colspan="3"><span class="blue18">Skill</span><span  class="black18"> Highlights</span></td></tr>
       <tr> <td  class="contentTextBody" colspan="3"><span>•      <b>Extensive data analysis </b>experience, dynamic reporting and developing <b>automation tools </b>to streamline activities and <b>boost productivity</b>.<br />
•      Expertise designing<b> user friendly interfaces</b>, experienced in <b>T-SQL, ASP.Net, C#, VB.Net, ADO.Net, VBA, Excel Macros</b>, and VBA coding.<br/><br/>
 </span></td></tr>
       <tr> <td colspan="3"><span  class="blue18">Exp</span><span  class="black18">erience</span></td></tr>
       <tr> 
               <td class="dateCol" rowspan="2" >08/2014<br /> Present</td>
               <td class="company">SWAPE, Environmental Consultants</td>
               <td  class="city">Santa Monica, CA</td>
       </tr>
       <tr> 
               <td class="contentTextBody" colspan="2">
                  <u>Application developer</u>: Developed data scraping application in ASP.net/C# using xpath to collect drinking water data to store in SQL Server database. The water contamination level, using this application is studied and reported to the governing agencies in all 50 states.<br /><br />
               </td>
       </tr>
        <tr> 
            <td class="dateCol" rowspan="2">08/2013 <br />08/2014</td>
            <td  class="company">Kaiser Permanente Performance Dashboard</td>
            <td class="city">Los Angeles, CA</td>
        </tr>
       <tr> <td class="contentTextBody" colspan="2">
                  <u>Senior Data Analyst & Developer</u>: Developed performance dashboard application in ASP.net, C#/ SQL Server. Developed point-and-click data upload (ETL) module for use by a junior staff. <br /><br />
                 <u> Senior Data Analyst & Developer</u>: Design and Develop KP ReConnect Activity Management System in ASP.net, VB.net/ SQL Server. The project was member-centric to repatriate patient members from other facilities back to a Kaiser healthcare facility. <br /><br />
             </td>
       </tr>
       <tr> 
           <td class="dateCol" rowspan="2">09/2012 <br />01/2013</td>
           <td class="company">Warner Brothers </td>
           <td class="city">Burbank, CA</td>
        </tr>
       <tr> 
            <td class="contentTextBody" colspan="2">
                <u>Data Analyst</u>: Normalized the tables in an existing MS Access project, named WB Central Repository Application (CeRA), transforming it to a robust functioning application; automated a few functionalities and added many point and click data entry methods. 
           </td>
       </tr>
       <tr> 
            <td class="dateCol" rowspan="2">12/2009 <br />06/2011</td>
            <td class="company">Kaiser Permanente Decision Support App.</td>
            <td class="city">Pasadena, CA</td>
        </tr>
       <tr> 
           <td class="contentTextBody" colspan="2">
                <u>Data Analyst & Developer</u>: Developed prototype in MS Access to improve patient quality care based on physician comments nation-wide. Designed Web application in Java with Oracle backend for implementation on the Web. The comment logs were coded to be auto-tagged to facilitate robust search and produce actionable methods. <br /><br />
           </td>
       </tr>
       <tr>  
           <td class="dateCol" rowspan="2">03/2009 <br />01/2011</td>
           <td class="company">SWAPE, Environmental Consultants </td>
           <td class="city">Santa Monica, CA</td>
       </tr>
       <tr> 
           <td colspan="2">
               <u>Database developer</u>: Designed and developed proprietary applications to be used by the client law firms in the environmental related litigations. Via MS Access, SQL Server, automated ETLs extracted data from other sources to generate the required reports and charts.<br /><br />
          </td>
       </tr>
       <tr>  
           <td class="dateCol" rowspan="2">12/2006 <br />03/2009</td>
           <td class="company">AIG SunAmerica </td>
           <td class="city">Los Angeles, CA</td>
       </tr>
       <tr> 
           <td class="contentTextBody" colspan="2">
               <u>Productivity Specialist</u>: Automated and streamlined many office operations. The activities involved developing specifications, system analysis, and building database applications using SQL Server, MS Access, Excel Macros, VB 6.0, VB.NET, and VBA coding. The automations made the existing tasks easier and saved lots of efforts.<br/><br />
           </td>
       </tr>

            <tr>  
           <td class="dateCol" rowspan="2">Prior to <br />12/2006</td>
           <td class="company">Some Other Companies Worked for…</td>
           <td class="city">LA & OC, CA</td>
       </tr>
       <tr> 
           <td class="contentTextBody" colspan="2">
               20th Century Fox, ExxonMobil, Honda, Kawasaki, Komex, KPC Global Care, Long Beach Memorial, Noresco, Sechrist Industries,  Toyota, Union Bank, Washington Mutual, Weyerhaeuser Freight..
          </td>
       </tr> 
</div>
</form>
</body>

</html>

here is CSS:
body
{
 background-color:rgb(238,238,238);
}
table, th, td {
   border: 1px solid black;
    border-collapse:collapse;
}
programing
{
      text-align:center;
}
.center {
    margin:0 auto; 
    padding: 2em 2em 3em 1em;
    width: 70%;

      background-color:white;
      box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
    -moz-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
    -webkit-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
}

.boldblue2
{
  font-size:1.1em;
  font-family:"Tahoma","sans-serif";
  font-weight:bold;
  color:rgb(84,142,212);
  
}
.blueline
{
      height:.4em;
      background-color:rgb(54,95,145);
}

#email
{
  white-space: nowrap;
}
.name
{
  font-size:2em;
  font-family:"Tahoma","sans-serif";
  font-weight:bold;
  color:rgb(89,89,89);
  white-space: nowrap;
  width:100%
}
.title
{
  font-size:1.1em;
  font-family:"Tahoma","sans-serif";
  font-weight:bold;
  color:rgb(84,142,212);
  white-space: nowrap;
}
.city
{
  font-size:1.1em;
  font-family:"Tahoma","sans-serif";
  font-weight:bold;
  color:rgb(84,142,212);
  white-space: nowrap;
  text-align:right;
}
.nameAlignment
{

  text-align:center;
  

}
.blue18
{
  font-size:1.4em;
  font-family:"Tahoma","sans-serif";
  font-weight:bold;
  color:rgb(84,142,212);
}
.black18
{
  font-size:1.4em;
  font-family:"Tahoma","sans-serif";
  font-weight:bold;
  color:rgb(89,89,89);
}
.company
{
  font-size:1em;
  font-family:"Tahoma","sans-serif";
  font-weight:bold;
  color:rgb(89,89,89);
  white-space: nowrap;
}
.leftColAlign
{
      text-align:right;
}
.others
{
  color:rgb(202,110,33);
}
.underlined
{
      font-size:1em;
      font-family:"Tahoma","sans-serif";
      color:rgb(89,89,89);
      text-decoration: underline;
}
.contentText
{
      font-size:1em;
      font-family:"Tahoma","sans-serif";
      color:rgb(89,89,89);
      text-align:right;
      width: 19%;
}
.dateCol
{ 
       font-size:1em;
      font-family:"Tahoma","sans-serif";
      color:rgb(89,89,89);
      text-align:left;
    width: 10%;
      padding-top:.3em;
    vertical-align:top      
 
}
.contentTextBody
{
      font-size:10.5pt;
      font-family:"Tahoma","sans-serif";
      color:rgb(89,89,89);
}

.sectionHeading
{
      -size:11.0pt;
      font-family:"Tahoma","sans-serif";
      color:black;
      font-weight: bold;
}

Open in new window

LVL 34
Mike EghtebasDatabase and Application DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

rgranlundCommented:
Change your tr's into  containing div's.  Give them a height and width.  Change your td's into div's and give the class a height, width and float.  Start there.
0
Kyle HamiltonData ScientistCommented:
@eghtebas

Mike,

The best approach here is to start over (as per my earlier advice). Here are a couple of reasons for that.

1. You have HTML/CSS listed on your resume. This is a single static page with a relatively simple layout. If you can't build this page using modern techniques from the ground up, then you need to take that skill off your resume. I don't want you to have to do that, since the basics of HTML/CSS is not that hard. So let's work on building it. It is not that difficult, and in the process you will learn the basic techniques of HTML/CSS layout which you need to know.

2. Trying to bandaid a poorly designed layout is going to create more headaches for you down the line, than doing it properly in the first place. We're not talking about rewriting an entire website with thousands of pages here, just a single page.


Kyle
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Kyle,

I agree with you. I have already started using structure like:
<!doctype html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title></title>
      <link href="styles.css" rel="stylesheet" >
</head>
<body>
<div class="wrapper">
      <div class="header"></div>
      <div class="content">
            <div class="left-col"></div>
            <div class="right-col"></div>
      </div>
      <div class="footer"></div>
</div>
</body>
</html>

Open in new window

Here and there I have css problems to position my div tags correctly. I will post my css questions later.

Thanks,

Mie
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.