Converting Tables to Divs

Tables to Divs

Tables were once used to style entire website in order to place various elements within a page. Nowadays we have CSS to thank in order for us to create more fluid and stylish websites without being confined to using tables. The problem with old sites that use tables to display content is converting them into divs which CSS can later rearrange in order to achieve the same effect. Converting tables to divs can be a bit daunting at first but I’ll show a different approach to achieve the same results as you would using tables.

For my homework, I was supposed to reconstruct the site by converting the content within the tables and convert them into divs. Doing so will allow me to rearrange the content within the divs any which way I want.

Here’s the link to the original page that contains the tables.
http://casabasa.com/web/mm2213_wk1.html

And here’s a link to the actual HTML document showcasing the conversion of tables to divs.
Tables to divs conversion

In the code below it shows the previous code showing the table rows and table data:
[HTML]
<table border=”0″ cellspacing=”5″ cellpadding=”5″ width=”100%”>
<tbody>
<tr align=”center” bgcolor=”lightgrey”>
<td><strong><span>Session</span></strong></td>
<td><h3><strong>MM2203 Introduction to Web Design Study Schedule</strong></h3></td>
</tr>
<tr align=”left” valign=”middle” bgcolor=”#eeeeee”>
<td height=”35″ valign=”top”><span><a id=”1″ name=”1″></a>Week 1</span> <span class=”section”>October 3 </span></td>
<td>Complete the <a href=”file:///C|/Documents and Settings/Sharon/My Documents/AICASF/css/questionnaire.html” target=”_blank”> student survey</a>. Review of the school’s emergency evacuation procedures.<strong>Lecture: </strong>
<ul>
<li>Process. What makes good web design? How do the rules differ from print, dvd, movie? An overview of the process, including a mission statement, immediate and long-term goals, and information architecture.
<ul>
<li><span class=”courier”>A garden is finished when there is nothing left to remove- Zen aphorism</span></li>
</ul>
</li>
<li>Structure and color schemes: arrangement of text and images on a page</li>
<li>Design elements: alignment, proximity, repetition, contrast, horizontal and vertical space</li>
<li>Grid Systems: <a href=”http://www.webstyleguide.com/page/grids.html”>Design grids for Web pages, </a><a href=”http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_4/”> Web grid systems, </a><a href=”http://alistapart.com/articles/outsidethegrid”>Thinking outside the Grid</a></li>
<li><a href=”http://www.stylegala.com/”>http://www.stylegala.com/</a></li>
</ul>
<strong>Lab: </strong>
<ul>
<li>Using Photoshop to preview layouts for clients. Best practices for images on the Web.</li>
<li>Design a new sample home page for your student account:
<ul>
<li>744 pxls width by 410 pxls height</li>
<li>all information above the fold</li>
<li>navigation (with rollovers) showing your major areas</li>
<li>viewer knows what they will see within 2-3 seconds</li>
</ul>
</li>
</ul>
<strong>Homework: </strong>
<ul>
<li>Read Part I: Chapters 1-4 of <a href=”http://safari.oreilly.com/?XmlId=0596008422″ target=”_blank”>The Missing Manual</a> and work through any exercises that are unclear to you. You are expected to know this material by next class.</li>
<li>Read <a href=”http://www.webstyleguide.com/”>http://www.webstyleguide.com/</a> as a supplement to your required texts. This should be ongoing throughout the quarter and will be included in tests.</li>
<li>What size should you create for? Read </a><a href=”http://www.webmonkey.com/webmonkey/99/41/index3a_page2.html?tw=design”>http://www.webmonkey.com</a></li>
<li>Complete home page design. Bring to class next week.</li>
<li>Bring OLS information to class next week. You are required to have access to a server for in-class use by next week.</li>
</ul>
All homework is due the following week.</ul>
</td>
</tr>
</tbody>
</table>
[/HTML]
Okay so I know that looks a little daunting but Let me explain. The so called <table> tag starts the beginning of the table and of course the </table> tag closes it. The <tr> tags are the table rows and the <td> tags are the table data which contain the content inside the table.

In order for us to convert the the table into divs, we must first figure out where the content is. As I said earlier, the content is buried with the <td> and </td> tags. All we have to do is copy the content inside those tags and then nest them within a div. In my case I used a div with a class name. The reason I use a class is so that I can reuse the same class and apply it to similar content.

Once I finish nesting the content within my div, I just use CSS to position it wherever I want. In my example, I created a div class called “lightgrey” to signify the background color of the div. Then I nested the information inside the div between two spans with classes, one for the left content and the other for the right content called .left1 and .right1 respectively. Then in my CSS, I just declare how I want to position the elements inside the div. Here’s an example of my CSS code for that specific div.
[CSS]
.lightgrey {
background-color:#CCC;
height:100%;
overflow:auto;
}

span.left1 {
background-color:#CCC;
float:left;
width:8%;
height:auto;
text-align:center;
padding:1%;
}

span.right1 {
background-color:#BEBEBE;
float:left;
width:88%;
height:auto;
padding:1%;
}
[/CSS]
As you can see, I used the class name .lightgrey as my div class and used two span elements for the left and right content. The .left1 class is used for the date of the homework and the .right1 class is used for the content for that date.

Now I can just go to the rest of the content and nest them into Div classes and Span classes so they are all uniform.

3 thoughts on “Converting Tables to Divs

Leave a Reply

Your email address will not be published. Required fields are marked *