Converting tables to DIV & SPAN

[plenty900]

Hi folks,

Can someone show me how to convert this to div/span format?

<table width=100%>
<tr>
<td>
<table>
<tr><td width=100>1</td></tr>
<tr><td>2</td></tr>
</table>
</td>
<td width=200> 3 </td>
</tr>
</table>

Is there a good tutorial on how to convert a table-based
layout to DIVs and SPANs?

Thanks.

 

[dorayme]

<[email protected]
m>,

Hi folks,

Can someone show me how to convert this to div/span format?

<table width=100%>
<tr>
<td>
<table>
<tr><td width=100>1</td></tr>
<tr><td>2</td></tr>
</table>
</td>
<td width=200> 3 </td>
</tr>
</table>

Is there a good tutorial on how to convert a table-based
layout to DIVs and SPANs?

No, there are no tutorials on this specifically. Nor could there
be because it is not one manageable and specific problem. There
might not be too many manuals on how to rebuild cities all in one
go and quickly either. <g>

I suggest you supply a rather more realistic case of a table
based layout that you have worked on and how you wish something
to appear to many people.

If you really want to know how to make a 1 appear on the left, a
2 underneath and a 3 way to the right, it is not too hard without
tables.

<div style="float:left">1<br>2</div>
<div style="float:right">3</div>

But how useful will this be to you?

 

[Bergamot]

Can someone show me how to convert this to div/span format?

You're asking the wrong question.

Is there a good tutorial on how to convert a table-based
layout to DIVs and SPANs?

There's a lot more to it than div and span. Get some understanding of
semantics and you'll have a much better site. You might start here:
http://microformats.org/wiki/posh

 

[Jeff]

Hi folks,

Can someone show me how to convert this to div/span format?

<table width=100%>
<tr>
<td>
<table>
<tr><td width=100>1</td></tr>
<tr><td>2</td></tr>
</table>
</td>
<td width=200> 3 </td>
</tr>
</table>

Styles shown inline, you'll want to put them in your stylesheet instead.


<div style="float: left;width: 100px">
<div>1</div>
<div>2</div>
</div>
<div style="float: left;width: 200px;">3</div>

There's other ways of doing that.

Is there a good tutorial on how to convert a table-based
layout to DIVs and SPANs?

Doesn't appear to be. There's lots of bits and pieces here and
there. The biggest problem is doing the equivalent of equal height
columns. You'll see some resources on this though as techniques are
being worked out. Search the archives and you'll find several different
ways of doing that.

Note that all a div is, is an empty block level element, and all a
span is, is an empty inline element. It's how you style them that makes
the difference.

Jeff