Html Table to Css div

W

WD

Hi all,
I've been try to convert an html table to div(s), but i can't seem to
keep the same look? Here's the table:

<table cellspacing=0 cellpadding=1 align=center width=164 bgcolor=#b6cce1
border=0>
<tbody>
<tr>
<td>
<table cellspacing=1 cellpadding=2 width=164 bgcolor=#333366
border=0>
<tbody>
<tr>
<td align=middle background="images/m.jpg">
<div align="center"><b>Auto</b></div>
</td>
</tr>
<tr valign=top>
<td bgcolor=#FFFFFF>
<div align="center">
<a href="link.html">link</a><br>
<a href="link.html">link</a><br>
<a href="link.html">link</a><br>
<a href="link.html">link</a><br>
<a href="link.html">link</a><br>
<a href="link.html">link</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
 
W

WebcastMaker

I've been try to convert an html table to div(s), but i can't seem to
keep the same look? Here's the table:
Click to expand...

well,since the table does it the way you want, wouldn't it have been
better to post BOTH sets of code? Or even better yet, post URLs
 
W

WD

Sorry, here is the Div code:

<style type="text/css">

#box {
width: 164px;
padding: 0;
background-color: #b6cce1;
}

#box1 {
width: 164px;
padding: 0;
background-image:url('images/m.jpg');
background-repeat:no-repeat;
background-position:center;
height:23px;
width:164px;
background-color: #b6cce1;
}

.box2 {
width: 162px;
padding: 0;
background-color: #FFFFFF;
}

</style>

<DIV id="box">
<DIV id="box1" align="center">
<b>Auto</b>
</DIV>

<DIV align="center" class="box2">
<a href="Link.html" target="I1">Link</a><br>
<a href="Link.html" target="I1">Link</a><br>
<a href="Link.html" target="I1">Link</a><br>
<a href="Link.html" target="I1">Link</a><br>
<a href="Link.html" target="I1">Link</a><br>
<a href="Link.html" target="I1">Link</a><br>
</DIV>
</DIV>
 
S

Sam Hughes

Hi all,
I've been try to convert an html table to div(s), but i can't
seem to
keep the same look? Here's the table:

[...]
Click to expand...

Use the following: The doctype is necessary for IE 6 to work.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
<!--
#box {
padding: 2px;
background: #336;
width: 10.5em;
margin-left: auto;
margin-right: auto;
}
#box1 {
text-align: center;
font-weight: bold;
background: #336 url(images/m.jpg) no-repeat center top;
height: 1.4em;
color: black;
margin: 2px;
}
..box2 {
margin: 0;
background: #FFF;
text-align: center;
}
-->
</style>
</head>

<body>

<div id="box">
<div id="box1">
Auto
</div>

<div class="box2">
<a href="Link.html" target="I1">Link</a><br>
<a href="Link.html" target="I1">Link</a><br>
<a href="Link.html" target="I1">Link</a><br>
<a href="Link.html" target="I1">Link</a><br>
<a href="Link.html" target="I1">Link</a><br>
<a href="Link.html" target="I1">Link</a><br>
</div>
</div>

</body>
</html>
 
W

WD

Thank you SO much, absolutely prefect! You a Genuis!



Sam Hughes said:
Hi all,
I've been try to convert an html table to div(s), but i can't
seem to
keep the same look? Here's the table:

[...]
Click to expand...

Use the following: The doctype is necessary for IE 6 to work.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
<!--
#box {
padding: 2px;
background: #336;
width: 10.5em;
margin-left: auto;
margin-right: auto;
}
#box1 {
text-align: center;
font-weight: bold;
background: #336 url(images/m.jpg) no-repeat center top;
height: 1.4em;
color: black;
margin: 2px;
}
.box2 {
margin: 0;
background: #FFF;
text-align: center;
}
-->
</style>
</head>

<body>

<div id="box">
<div id="box1">
Auto
</div>

<div class="box2">
<a href="Link.html" target="I1">Link</a><br>
<a href="Link.html" target="I1">Link</a><br>
<a href="Link.html" target="I1">Link</a><br>
<a href="Link.html" target="I1">Link</a><br>
<a href="Link.html" target="I1">Link</a><br>
<a href="Link.html" target="I1">Link</a><br>
</div>
</div>

</body>
</html>
Click to expand...
 
L

Leif K-Brooks

WD said:
Hi all,
I've been try to convert an html table to div(s), but i can't seem to
keep the same look? Here's the table:
<snip long HTML>
Click to expand...

Could you give a URL to a page showing the layout you want?
 
S

Spartanicus

WD said:
Hi all,
I've been try to convert an html table to div(s),
Click to expand...

Hmmm :-/
Here's the table:

<table cellspacing=0 cellpadding=1 align=center width=164 bgcolor=#b6cce1
border=0>
<tbody>
<tr>
<td>
<table cellspacing=1 cellpadding=2 width=164 bgcolor=#333366
border=0>
<tbody>
<tr>
<td align=middle background="images/m.jpg">
<div align="center"><b>Auto</b></div>
</td>
</tr>
<tr valign=top>
<td bgcolor=#FFFFFF>
<div align="center">
<a href="link.html">link</a><br>
<a href="link.html">link</a><br>
<a href="link.html">link</a><br>
<a href="link.html">link</a><br>
<a href="link.html">link</a><br>
<a href="link.html">link</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Click to expand...

That looks like a list of links, mark them up accordingly instead of
replacing one type of incorrect markup with another type of incorrect
markup.
 
J

Jari Lehtinen

Hi all,
I've been try to convert an html table to div(s), but i can't seem to
keep the same look? Here's the table:

<table cellspacing=0 cellpadding=1 align=center width=164 bgcolor=#b6cce1
border=0>
<tbody>
<tr>
<td>
<table cellspacing=1 cellpadding=2 width=164 bgcolor=#333366
border=0>
<tbody>
<tr>
<td align=middle background="images/m.jpg">
<div align="center"><b>Auto</b></div>
</td>
</tr>
<tr valign=top>
<td bgcolor=#FFFFFF>
<div align="center">
<a href="link.html">link</a><br>
<a href="link.html">link</a><br>
<a href="link.html">link</a><br>
<a href="link.html">link</a><br>
<a href="link.html">link</a><br>
<a href="link.html">link</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Click to expand...

It's a shame that currently most browsers doesn't support CSS element
display: table-row, table-cell etc. It would really simplify things when a
specific site doesn't need to work with older browsers.
 
S

Spartanicus

Jari Lehtinen said:
It's a shame that currently most browsers doesn't support CSS element
display: table-row, table-cell etc.
Click to expand...

Most browsers do, IE doesn't.
 
S

Sam Hughes

Thank you SO much, absolutely prefect! You [invented] a Genuis!
Click to expand...

[edited quote so it made sense]

I am _not_ a prefect and I have _not_ invented a Genuis, whatever that
thing may be.

;)
 
S

Sam Hughes

For every browser you can name that does, I bet I can name two that
don't. ;-)
Click to expand...

Ok.

Match up two browsers for each one of these:

The latest nightly build of Mozilla for Windows.
The second-latest nightly build of Mozilla for Windows.
The third-latest nightly build of Mozilla for Windows.
...
The thousandth-latest nightly build of Mozilla for Windows.
...


The latest nightly build of Mozilla for Linux.
...
...
...

....Phoenix, Windows.
....Phoenix, Linux.

....*, *nix
....*, *nux
....*, *SD
 
T

Toby Inkster

Sam said:
Match up two browsers for each one of these:

The latest nightly build of Mozilla for Windows.
The second-latest nightly build of Mozilla for Windows.
Click to expand...

I didn't say browser *versions*. I said browsers.

And if you want to play that game there's plenty of scope for nightly
builds of Konqueror, Lynx, Dillo, Nautilus, etc...
 
S

Sam Hughes

I didn't say browser *versions*. I said browsers.
Click to expand...

Well "browsers" can mean many things to and by different people.

It can refer to installations of browsers, so that the statement, "More
browsers are named Internet Explorer than any other name," would be
true.

It can refer to various browser products, which you now say is what you
mean. "Most browsers do not understand CSS" would be true in that
regard.

And of course, you could twist that meaning to mean that each _build_
is a different browser. :) And going by that logic even further, every
separate _configuration_ represents a different browser. :O

Of course, all Web browsers are just convoluted algorithms. What if I
gradually change Mozilla so that every aspect is done using an
algorithm that is different in some respect. Is the browser still a
Mozilla browser? :)
 
W

WebcastMaker

Well "browsers" can mean many things to and by different people.
Click to expand...

Nope, got to go with Toby on this one. It was completely apparent what
Browser was supposed to mean.
 
S

Sam Hughes

Nope, got to go with Toby on this one. It was completely apparent
what Browser was supposed to mean.
Click to expand...

Hello, we stopped talking seriously about five posts up the thread.
 
D

DU

WD said:
Hi all,
I've been try to convert an html table to div(s), but i can't seem to
keep the same look? Here's the table:

<table cellspacing=0 cellpadding=1 align=center width=164 bgcolor=#b6cce1
border=0>
Click to expand...


You want the content of the table to be centered or you want the table
itself to be centered within its parent? This is important to know if
you're going to use CSS.
<tbody>
<tr>
<td>
<table cellspacing=1 cellpadding=2 width=164 bgcolor=#333366
border=0>
Click to expand...

From the beginning, you've over-constrained your tables. So, there can
not be any solution to the code you provided.
The nested table width should have been 162; best was to leave the width
undefined and then let the normal flow of data prevail.
<tbody>
<tr>
<td align=middle background="images/m.jpg">
<div align="center"><b>Auto</b></div>
</td>
</tr>
<tr valign=top>
<td bgcolor=#FFFFFF>
<div align="center">
<a href="link.html">link</a><br>
<a href="link.html">link</a><br>
<a href="link.html">link</a><br>
<a href="link.html">link</a><br>
<a href="link.html">link</a><br>
<a href="link.html">link</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Click to expand...

The solution to your problem can be extremely simple if we know
precisely what you want to begin with. Here, a simple centered paragraph
and a centered unnumbered list would be an appropriate way to render a
list of links.

DU
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to have two html audio players on one page? 0
Nested Loop Insert Page Break 1
Image shifts to the right when export the page to pdf 4
SendGrid email issue in responsive Gmail 1
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
How to wrap <td> content . 16
Positioning CSS components 1

Members online

No members online now.
Total: 42 (members: 0, guests: 42)
Robots: 552

Forum statistics

Threads
473,769
Messages
2,569,578
Members
45,052
Latest member
LucyCarper

Latest Threads

Top