CHANGING TABLES to DIVS ??

S

Staracer

New Member
I am trying to switch this code to styled divs instead of tables. I can't for the life of me remember how it's done. I took a very wide open multimedia course last year and it did not put much emphasis on web, so here I am feeling completely lost. Any input would be greatly appreciated! (I would like to keep the CSS inline)

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Redtag Code Switch</title>
<style type="text/css">
#indexfeatures {
background-color: #E1E1E1;
overflow: hidden;
margin: 0px;
padding: 0px 0px 10px 0px;
width:458px;
font-size: 11px;
}
#indexfeatures a {
text-decoration: underline;
color: #000;
}
#indexfeatures a:hover {
text-decoration: none;
color: #CA0000;
}
</style>
</head>

<body>
<div id="indexfeatures">
<h1 style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 20px; font-weight:normal; color:#FFFFFF; margin: 10px; padding: 7px 10px; background: url(http://www.redtag.ca/images/indexBGfeatured3.gif) repeat-x center;">Vacation Packages</h1>
<table width="438" border="0" cellpadding="0" style="border: 1px solid #CCCCCC; padding: 10px; margin: 0px 10px 10px 10px; background: url(http://www.redtag.ca/images/experience/travelinfolinks-bg.jpg) repeat-x bottom #FFFFFF;">
<tr>
<td rowspan="2" width="90" valign="middle" align="center">
<a href='#'><img src='http://www.redtag.ca/images/hotels/582.jpg' alt='Holiday Inn' style="border: 1px solid #CCCCCC; float: left; margin-right: 3px; padding: 3px; width: 74px; height: 58px;"/></a>
</td>
<td colspan="2" valign="bottom">
<h2 style="font-size: 12px; margin: 0px; padding: 0px;"><a style="font-family: Verdana, Arial, Helvetica, sans-serif; color: #0055AA; font-weight: bold;" href='#'>Calgary to Puerto Vallarta</a> <span style="font: bold 11px Verdana, Arial, Helvetica, sans-serif; color: #666666;">Mexico</span></h2>
</td>
</tr>
<tr>
<td valign="top">
<strong><a href='#'>Holiday Inn</a> <img src='http://www.redtag.ca/images/stars/fourstarwhite.jpg' alt='4 star' width='72' height='12' align='absmiddle' /></strong>
<br />
<img src="http://www.redtag.ca/images/new-icon.jpg" width="32" height="13" align="absmiddle" /> <a href='#'>Flight Details</a>
<br />
All Inclusive | 01 Sep 2011 | 7 Nights
</td>
<td valign="top" align="right">
<span >
<a style="color: #CA0000; font-size:15px; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif;" href='#'>$348.00</a>
</span>
<br />
taxes: $341.00
</td>
</tr>
</table>
</div>
 
S

Staracer

New Member
Just trying to do it as someone is testing me on knowledge. I know it is completely unnecessary, but it could land me some work. Even if you could show me how to recode it down to the bottom of the first table, or completely redo the same information. Thanks.
 
chrishirst

chrishirst

Well-Known Member
Staff member
The easiest way to go from a layout using table to a layout using HTML structural elements is:


... To start again from the design upwards.
 
Phreaddee

Phreaddee

Super Moderator
Staff member
but it could land me some work.
Click to expand...
to be honest proper coding, including using external css is probably more likely to land you a job.

and chris is right, the best way to code a site using structural elements is to simply start over.

tell us what you want your layout to be like and we can begin.
 
Edge

Edge

Member
If you have a copy of Dreamweaver then go to Commands > Clean up HTML and check remove tags then supply comma separated list e.g. table,th,td,tr,tbody,thead etc. That will get rid of your table stuff and leave you with the raw content. If you don't have DW then Notepad ++ is good and you could just do some find and replace to remove all the unwanted tabular elements. Then give it some semantic structure with heading, paragraph and list elements. HTML5 provides some new elements such as nav, header, section, footer, aside etc. and is well supported now provided you add on some support for IE8 using modernizr.
 
chrishirst

chrishirst

Well-Known Member
Staff member
And the regular expression match pattern for Notepad++ to remove all HTML tags and leave the content is.

Code: 
<[^>]+>
 
You must log in or register to reply here.
Top