asked on

Change <table> into <div>

As I have been told quite a bit on here that <table> is out dated and very limited to what you can do with it. So I have decided to try this new fandangle <div> thingie

I have had some goes and trying to replace the items, however I have no luck as I dont fully understand what goes where, etc. How you do column and row spans, tables within tables, heights and widths, etc.

I want it to look like:
http://dev.gmoney.club/cnt.com.au/dev/www-v1.0/home.asp?
user: lisa
pw: Estrela1

<table width=100% cellpadding=0 cellspacing=0 border=0>
	<tr>
		<td height=25>&nbsp;</td>
		<td width=1346 align=center rowspan=3>
			<table width=1346 height=100 cellpadding=0 cellspacing=0 border=0>
				<tr>
					<td width=100 height=100 rowspan=3 background=images/CNT-original.png style="background-size: cover; background-position: center,center">&nbsp;</td>
					<td height=25 align=right><b><font size=2>Contact Us</font></b></td>
				</tr>
				<tr>
					<td height=49 valign=absmiddle bgcolor=#006CB8><img src=images/top-bar-right.png height=49 align=absmiddle><font size=6 color=white><b>&nbsp;Cruise and Touring</b></font></td>
				</tr>
				<tr>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td bgcolor=#666666>
						<table width=1246 cellpadding=0 cellspacing=0 border=0>
							<tr>
							<%
								Set Menu=oConn.Execute("SELECT * FROM menu WHERE menu_live=YES ORDER BY menu_order")
								Do Until Menu.EOF
							%>
								<td onMouseOver=ChangeColor(this); onMouseOut=UnChangeColor(this); align=center><font size=4 color=white>&nbsp;<%=Menu("menu_name")%>&nbsp;</font></td>
							<%
								Menu.MoveNext
									Loop
							%>
								<td width=50%>&nbsp;</td>
							</tr>
						</table>
					</td>
				</tr>
  		  </table>
	  </td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td bgcolor=#006CB8 height=49 align=right><img src=images/top-bar-left.png height=49 align=absbottom></td>
		<td bgcolor=#006CB8 height=49>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
</table>

Open in new window

Thanks all in advance!

Dave Baldwin

This new fandangle <div> has been part of HTML since at least 1996. That would be 20 years now. 'tables' and 'divs' are similar in that they can contain blocks of content. They are different in that 'tables' are glued together and although you can stick 'divs' together, content and different screens sizes can unstick them.

Here is a simple example with tables and divs that shows both the similarities and differences.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Tables and Divs</title>
</head>
<body>
<h1>Tables and Divs</h1>
<h2>Table version.</h2>
<table border="0" cellpadding="0" cellspacing="0" summary="">
<tr><td style="width: 200px;background-color: #ccffff;">-1-</td><td style="width: 200px;background-color: #ffccff;">-2-</td><td style="width: 200px;background-color: #ffffcc;">-3-</td></tr>
<tr><td>-1a-</td><td>-2a-</td><td>-3a-</td></tr>
</table>
<h2>Div version</h2>
<div style="width: 200px;background-color: #ccffff;float: left;">-1-</div><div style="width: 200px;background-color: #ffccff;float: left;">-2-</div><div style="width: 200px;background-color: #ffffcc;float: left;">-3-</div>
<div>-1a-</div><div>-2a-</div><div>-3a-</div>
</body>
</html>

Open in new window

Graeme McGilvray

ASKER

Thanks for that, yeah the new fandangle was a joke :)

I have tried to copy from examples, but never works...

Is someone able to convert for me, this way I can see what goes where

Dave Baldwin

There isn't a simple direct conversion because they don't work the same. I gave you that demo so you see how they are similar and different. You have to adopt a different way of thinking about using divs. To stack them horizontally like I showed, you need to use 'float' and a specified 'width'.

Graeme McGilvray

ASKER

That is why I would like someone to help me with the conversion... everytime i do it, it complete stuffs it up

Alicia St Rose

Hi Graeme.
Please rush to your bookstore as quickly as you can and purchase:

Headfirst Guide to HTML with CSS.

Yes, there'll be loads in there that you already know, but what you don't know is in there as well. And you will have a blast! The book is actually FUN!

I can tell by the way you are phrasing your question that there is a big disconnect happening. Tables are used for tabular data. They have their place, for just that! That's how it works now. You don't convert tables to anything. You just don't use them unless appropriately.

Once you get outside the table, outside the box, so to speak, then the sky's the limit. Yes, you will use divs instead of table, you'll also use <section>, <article> and a host of other tags that are standard in HTML5 depending on the content you are trying to display. Because that's where we're at now: HTML5.

You cannot think the same way as you did when using tables. HTML5, divs and all that jazz require a paradigm shift on your part.

So, go get the book. You won't regret it. It's also a quick read. I read it in 1 week and 1/2 about 7 years ago and decided to do web dev as a career! Never looked back. (It's been updated to reflect HTML5 and CSS3)

Also, one thing you must realize with web development. YOU WILL NEVER STOP LEARNING. You just can't. Things change SO quickly. To be honest, you should have dropped tables for layout about 8 years ago. Now, all sites need to be responsive. That's a whole nuther bundle of wax to melt down.

We are here to help you. But right now, it appears that you need to divorce your table mentality first.
;)

Graeme McGilvray

ASKER

Ok, checked a couple of book stores, not available. I dont really learn well from reading, im more of a visual side-by-side learner

Can someone just help me here convert it?? When I see what is happening thats how I will learn. I dont mind if it takes a 100 msgs back and forth, just as long as it ends up working, I will learn along the way (and im sure I will as some silly questions)

Please just someone help me here, instead of trying to fob me off to go do EVERYTHING as an extreme learning curve.

Alicia St Rose

Dave Baldwin gave you a side by side example above.

The fact that you can't discern that proves my point that you currently don't know what you don't know and you are asking us to do something for you the is not possible without dispensing copious knowledge about HTML5, CSS3 and other sundry issues regarding what kind of content you wish to display.

That is why I suggested the book. Order it from Amazon. It's actually made for folks who "don't learn well from books". It has cartoons in it, for goodness sake.

And it's not that you are just using a table for layout, you are actually using deprecated styles like: bgcolor=#666666. This stuff needs to be in a CSS file or in the head of your document...
Hard coding the width (width=1346 align=center rowspan=3) will insure you won't have a responsive layout. Even if you need to use a table properly, for tabular data, the way you are coding it won't fly.
If you are not aware of CSS floats, percentage widths and media queries...um, what we show you is meaningless and will never work...

You think what you are asking is simple. It is not. The code you've presented could have come from another dimension, it's so far off from what the web standards are today. Showing you how to make a single table into a div will not fix the overarching issues you have. We are here to answer questions not teach you web standards development.

You can take this as me trying "fob you off" or me trying to genuinely help you so you can be a better web developer for your clients. I'm hoping you can see it's the latter.

I'm afraid you need to climb the curve. Sorry.

Graeme McGilvray

ASKER

I can see Daves example, and as it is good, it is extremely basic, where as my current page has a few things that are not exampled. As I have said previously everytime i try and apply examples to my page it never works, that is why I want someone to help me

I dont pay for this service to to be told 'go buy a book' im here to get HELP of coders to help me do things

I will wait until some actually helps me, thank you

Alicia St Rose

Here's a tip: It would help if you actually supplied an example of how you added Dave's code. Simply saying "I tried it and it didn't work" without showing us what you did, is useless.

Graeme McGilvray

ASKER

<html>
<head>
<title>Cruise and Touring</title>
<link rel=icon href=images/CNT_icon.png>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<style type="text/css">
	  body { font-family: Arial }
	  body { margin-left:0px; margin-top:0px; margin-right:0px; margin-bottom:0px; padding:0; }
	  .table { display:table; }
	  .cell { display:table-cell; }
	  .row { display:table-row; }
	</style>
	<script language="Javascript">
		function ChangeColor(value){
		  value.style.backgroundColor = '#006CB8'
		  value.style.color = '#000000'
		}
 		function UnChangeColor(value){
		  value.style.backgroundColor = '#666666'
		  value.style.color = '#000000'
		}
	</script>
	<%
		Dim oConn,oConnAE,Login
	  	Set Login=Server.CreateObject("ADODB.Recordset")
		Set oConn=Server.CreateObject("ADODB.Connection")
		oConn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath("core/cntcore.mdb")
'		Set oConnAE=Server.CreateObject("ADODB.Connection")
'		oConnAE.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath("ae-core/activcore.mdb")
'		SESSION("cn")="Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath("ae-core/activcore.mdb")&";Persist Security Info=False"
	%>
</head>
<body>
<div class=table style="width:100%; border:0px">
	<div class=row>
		<div class=cell style="height:25px">&nbsp;</div>
			<div class=table style="width:1346px; height:100px; border:0px;">
				<div class=row>
					<div class=cell style="width:100px; height:100; background-image: url(images/CNT-original.png); background-size: cover; background-position: center,center">&nbsp;</div>
					<div class=cell style="height:25px; align:right;"><b><font size=2>Contact Us</font></b></div>
				</div>
				<div class=row>
					<div class=cell style="height:49px; valign:absmiddle; bgcolor:#006CB8;"><img src=images/top-bar-right.png height=49 align=absmiddle><font size=6 color=white><b>&nbsp;Cruise and Touring</b></font></div>
				</div>
				<div class=row>
					<div class=cell>&nbsp;</div>
				</div>
				<div class=row>
					<div class=cell>&nbsp;</div>
						<div class=table style="width:1246px; border:0px;">
							<%
								Set Menu=oConn.Execute("SELECT * FROM menu WHERE menu_live=YES ORDER BY menu_order")
								Do Until Menu.EOF
							%>
								<div class=cell style="onMouseOver:ChangeColor(this); onMouseOut:UnChangeColor(this); align:center;"><font size=4 color=white>&nbsp;<%=Menu("menu_name")%>&nbsp;</font></div>
							<%
								Menu.MoveNext
									Loop
							%>
							<div class=cell style="width:50%;">&nbsp;</div>
						</div>
					</div>
				</div>
 		  </div>
		<div class=cell>&nbsp;</div>
	</div>
	<div class=row>
		<div class=cell style="bgcolor:#006CB8; height:49px; align:right;"><img src=images/top-bar-left.png height=49 align=absbottom></div>
		<div class=cell style="bgcolor:#006CB8; height:49px;>&nbsp;</div>
	</div>
	<div class=row>
		<div class=cell>&nbsp;</div>
		<div class=cell>&nbsp;</div>
	</div>
</div>
</body>
</html>

Open in new window

just a tip for you: maybe sometimes just asking what someone has done and some manners also goes along way :)

Member_2_248744

Hello again, I took some time to try and go over the code work in your comment ID: 41475233 that begins with -
<html>
<head>
<title>Cruise and Touring</title>

But the way that you have tried to literally convert the OLD concept HTML <table> to another HTML working using the CSS style of -
<style type="text/css">
.table { display:table; }
.cell { display:table-cell; }
.row { display:table-row; }
</style>

just can not work in the conversion you have tried to do. You have not used correct "HTML" organizations for the finished OUTPUT you need. And most (maybe all) of your "STYLE" for the way you have tried to do this, is not correct, or at least inappropriate for the finished output you need to do. You have even included the OLD tags like <font size=6 color=white> which are no longer appropriate in the finished output you require. PLEASE do not take these comments of mine as an Insult to you or your code work.
But you have so much incorrect HTML organizations like -
style="onMouseOver:ChangeColor(this); onMouseOut:UnChangeColor(this); align:center;"

which is NOT a style, but it's javascript and incorrect in the way you have tried to place it in your code work. That doing corrections to your code work above might not improve the result? It would seem to me like a new start in web page code and concept might be more helpful?

I was hoping to view your page at -
http://dev.gmoney.club/cnt.com.au/dev/www-v1.0/home.asp?
and do some html and css to maybe be a help, but the user and pass codes of -
lisa and Estrela1
do not work for me in firefox, so I am not able to do much code for a suggestion.
If I am not being helpful, just say so, and I will not continue here. But the other experts also seem to have trouble in finding a way to help? So maybe some other path to success needs to be found?

Alicia St Rose

With all due respect, Graeme, you lack a basic fundamental knowledge of HTML and CSS. It is impossible for me to help you.

That is why I suggested the book. It is the quickest and most painless way to get up to speed with at least the basics.

Right now it's as if you have a carriage and you are asking us to convert it to an automobile. You are taking the car parts and putting them on the carriage, but still expect it to be drawn by a horse because you are not versed in automotive technology.

As David pointed out: you need to change your mindset.
Moving from table layout to Web Standard Compliant code isn't a 1 to 1 conversion. It's a whole school of thought and new skills that have evolved over the last 10 - 15 years.

Without a holistic knowledge of HTML & CCS, our suggestions will always fail because you are trying to make them fit a structure that is alien to them.

Graeme McGilvray

ASKER

I understand that I lack the knowledge of current HTML & CSS. This is why I am asking for help to convert it. I understand it isnt a 1:1 ratio and I have to change my mindset. However I do what particular mindset to go to without guidence.

I am just asking for a small bit of code to be converted over or helped to be converted (preferred)

It is never impossible to help.

And thank you very much David, that is making some more sense.

Graeme McGilvray

ASKER

David, I have just changed the access on the website, you should be able to see it without a user & pass

Thanks

Alicia St Rose

Just to clarify: It's Slick812 trying to log in. David provided an example of the proper code earlier in this thread.

Graeme McGilvray

ASKER

My mistake, sorry for Slick812

Slick please try this link: http://dev.gmoney.club/cnt.com.au/dev/home.asp

Alicia St Rose

The link you provided produces a blank page with this this error message:

Microsoft JET Database Engine error '80004005'

'E:\cnt.com.au\dev\www-v1.0\ae-core\activcore.mdb' is not a valid path. Make sure that the path name is spelled correctly and that you are connected to the server on which the file resides.

/cnt.com.au/dev/www-v1.0/home.asp, line 17

Graeme McGilvray

ASKER

Sorry, I just corrected the link as above

http://dev.gmoney.club/cnt.com.au/dev/home.asp

Brandon Lyon

The easiest thing you could do would be to re-create the elements of the table using divs with classnames. That is not how divs are intended to be used though.

<div class="table">
  <div class="table-head">
    <div class="table-row">
      <div class="table-data">fruit</div>
      <div class="table-data">color</div>
    </div>
  </div>
  <div class="table-body">
    <div class="table-row">
      <div class="table-data">apple</div>
      <div class="table-data">red</div>
    </div>
  </div>
</div>

Open in new window

.table {
  display: table;
}
.table-head {
  display: table-header-group;
}
.table-body {
  display: table-row-group;
}
.table-row {
  display: table-row;
}
.table-data {
  display: table-cell;
}

Open in new window

Member_2_248744

OK, here my quick markup for the very top of a page that shows in your link, You seem to have some sort of menu that's a grey bar with a "Home" as the first, I changed these to links <a> which seemed more appropriate?

<!doctype html>
<html lang="en"><head>
<title>Cruise and Touring</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<style>
body {
  background:#fff;
  margin: 0;
  }
  
#topBar {
  height: 101px;
  border: 1px solid #fff;
  }
  
#contact1 {
  float: right;
  margin-right:5px;
  }

#boatBar {
  background: #006CB8;
  height: 49px;
  margin-top: 26px;
  color: #fff;
  font-family: sans-serif;
  font-size: 32px;
  font-weight: bold;
  line-height: 45px;
  }
  
#imgHold {
  display: inline-block;
  vertical-align: top;
  background: #fff;
  margin-left: 33px;
  margin-right: 11px;
  border-radius: 50%;
  padding: 2px 7px;
  margin-top: -28px;
  }
  
#imgHold img{
  width: 100px;
  vertical-align: middle;
  }
  
#menu1 {
  background: #666666;
  margin-left: 133px;
  font-size: 20px;
  }
  
#menu1 a{
  display: inline-block;
  padding: 2px 6px;
  color: white;
  font-family: sans-serif;
  margin: 1px 9px;
  text-decoration: none;
  }
  
#menu1 a:hover {
  color: red;
  background:#006CB8;
  }
</style>
</head>
<body>
<div id="topBar"><a href="#" id="contact1">Contact Us</a>
  <div id="boatBar">
  <div id="imgHold"><img src="http://dev.gmoney.club/cnt.com.au/dev/images/CNT-original.png" />
  </div>Cruise and Touring
  </div>
</div>
<div id="menu1"><a href="#">Home</a><a href="#">Cruising</a><a href="#" >Touring</a><a href="#">Cheap Getaways</a><a href="#">Last Minute Deals</a>
</div>
</body>
</html>

Open in new window

Since all of the display <div> are of a unique STYLE, , I use id instead of class to set the CSS style association.
I use a div as <div id="topBar"> for the ship image blue BAR display container and set the height to 101px .

The <div id="boatBar"> is 49px high, and has a blue background, I give it a top margin of 26px to move it down to match your page positions. Font color is white and font size is 32px .

I have the <div id="imgHold"> to be the Image container, with the the ship image you have for the circular ship image display, I use a border radius of 50% so I do NOT need your other two images to give the white space on the sides of the ship.

And then there is the <div id="menu1"> for the menu elements as links <a> I use the CSS hover as -
#menu1 a:hover {
so I do not need any javascript to change the mouse over color.

Graeme McGilvray

ASKER

Thank you very much for that Slick, I am going give it a good test! :D

Get back to you soon

Graeme McGilvray

ASKER

Hi Slick, that is great thank you, have a bit of play around with it, alot is sorta understand better now (more trail and error to be had)

just wondering, with my original, i had a center table (1376pixels wide) and either side of that it just adjusted to the natural with of the users resolution, is that something we can do as well?

Please let me know

ASKER CERTIFIED SOLUTION

Member_2_248744

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Graeme McGilvray

ASKER

Exactly what I needed

Change &lt;table&gt; into &lt;div&gt;

Change <table> into <div>