Prev: Reduce distance between table columns?
Next: Anchor tags - Correct way to style it
From: Xah Lee on 1 Feb 2010 14:07
On Jan 29, 4:30 pm, jeff <jeff_th...(a)att.net> wrote:
> Xah Lee wrote:
> > thanks all for the input. Very useful.
>
> > I have a question about using css for tables.
>
> > For example, in the following very simple page:
>
> > http://xahlee.org/xx/xx_how_css_tables.html
>
> > you see 3 tables there. I have tried to use css but it's a extreme
> > headache, never get what i wanted. How'd you do it with css?
>
> <table border="0">
> <tr><td><p>main text main text main text main text main text main text
> main text main text main text main text main text main text main text
> main text main text main text main text main text main text main text
> main text main text main text main text main text main
> text.</p></td><td><img
> src="../SpecialPlaneCurves_dir/Hypotrochoid_dir/hypotrochoidGen2.png"
> alt="hypotrochoidGen2" width="200" height="200"></td></tr>
> </table>
>
> Lots of ways.
>
> <div style="overflow: hidden;zoom: 1">
> <div style="width: 30%;float: left">
> <div style="padding: 20px">
> <p>main text main text main text main text main text main text main text
> main text main text main text main text main text main text main text
> main text main text main text main text main text main text main text
> main text main text main text main text main text.</p>
>
> </div>
> </div>
>
> <div style="width: 20%;float: left">
> <div style="padding: 20px">
> <img
> src="../SpecialPlaneCurves_dir/Hypotrochoid_dir/hypotrochoidGen2.png"
> alt="hypotrochoidGen2" width="200" height="200">
>
> </div>
> </div>
> ...
> </div>
>
> Use widths with your floats. Use an inner div to set padding if you
> don't want to recalculate width. Use zoom: 1 (IE), overflow: hidden
> (everyone else) if you don't want the wrapper div to collapse in height.
> Use clear: right if you want following floats, to well, clear.
>
> Use Google, if you want to see all this explained by someone else!
>
> Jeff

Thanks. Though these suggestions doesn't seems opitmal...

floating and width... the use of float easily overlaps, especially
when you have float inside float blocks. (e.g. image hides part of
text or text run over images)

my main interest is logical markup. Using tables of 1 row with 2
columns, clearly indicates 1 logical block, subdivided with 2 logical
blocks. Using div, nested div, with float, and width, and overflow,
etc, gets complex with unpredictable behavior.

Xah
From: jeff on 2 Feb 2010 01:28
Xah Lee wrote:
> On Jan 29, 4:30 pm, jeff <jeff_th...(a)att.net> wrote:
>> Xah Lee wrote:
>>> thanks all for the input. Very useful.
>>> I have a question about using css for tables.
>>> For example, in the following very simple page:
>>> http://xahlee.org/xx/xx_how_css_tables.html
>>> you see 3 tables there. I have tried to use css but it's a extreme
>>> headache, never get what i wanted. How'd you do it with css?
>> <table border="0">
>> <tr><td><p>main text main text main text main text main text main text
>> main text main text main text main text main text main text main text
>> main text main text main text main text main text main text main text
>> main text main text main text main text main text main
>> text.</p></td><td><img
>> src="../SpecialPlaneCurves_dir/Hypotrochoid_dir/hypotrochoidGen2.png"
>> alt="hypotrochoidGen2" width="200" height="200"></td></tr>
>> </table>
>>
>> Lots of ways.
>>
>> <div style="overflow: hidden;zoom: 1">
>> <div style="width: 30%;float: left">
>> <div style="padding: 20px">
>> <p>main text main text main text main text main text main text main text
>> main text main text main text main text main text main text main text
>> main text main text main text main text main text main text main text
>> main text main text main text main text main text.</p>
>>
>> </div>
>> </div>
>>
>> <div style="width: 20%;float: left">
>> <div style="padding: 20px">
>> <img
>> src="../SpecialPlaneCurves_dir/Hypotrochoid_dir/hypotrochoidGen2.png"
>> alt="hypotrochoidGen2" width="200" height="200">
>>
>> </div>
>> </div>
>> ...
>> </div>
>>
>> Use widths with your floats. Use an inner div to set padding if you
>> don't want to recalculate width. Use zoom: 1 (IE), overflow: hidden
>> (everyone else) if you don't want the wrapper div to collapse in height.
>> Use clear: right if you want following floats, to well, clear.
>>
>> Use Google, if you want to see all this explained by someone else!
>>
>> Jeff
>
> Thanks. Though these suggestions doesn't seems opitmal...
>
> floating and width... the use of float easily overlaps, especially
> when you have float inside float blocks. (e.g. image hides part of
> text or text run over images)

Got me. I've not had problems floating images in floated containers. If
you have text and images colliding you are doing something very wrong.

>
> my main interest is logical markup. Using tables of 1 row with 2
> columns, clearly indicates 1 logical block, subdivided with 2 logical
> blocks. Using div, nested div, with float, and width, and overflow,
> etc, gets complex with unpredictable behavior.

It's very predictable.

http://netweaver.com.au/floatHouse/

The rules are simple, You just have to wrap your mind around what it
means to float. There is only a "trick" to trigger has layout if you
want to keep the floated children inside the parent. Alternatively you
can clear afterwards. For most content that is not needed.

Frankly I'm not sure why you just can't use inline images and let the
text wrap. That's as semantically simple as you can get.

Jeff
>
> Xah
From: Roy A. on 2 Feb 2010 13:27
On 1 Feb, 20:07, Xah Lee <xah...(a)gmail.com> wrote:
> On Jan 29, 4:30 pm, jeff <jeff_th...(a)att.net> wrote:
>
>
>
>
>
> > Xah Lee wrote:
> > > thanks all for the input. Very useful.
>
> > > I have a question about using css for tables.
>
> > > For example, in the following very simple page:
>
> > >  http://xahlee.org/xx/xx_how_css_tables.html
>
> > > you see 3 tables there. I have tried to use css but it's a extreme
> > > headache, never get what i wanted. How'd you do it with css?
>
> > <table border="0">
> > <tr><td><p>main text main text main text main text main text main text
> > main text main text main text main text main text main text main text
> > main text main text main text main text main text main text main text
> > main text main text main text main text main text main
> > text.</p></td><td><img
> > src="../SpecialPlaneCurves_dir/Hypotrochoid_dir/hypotrochoidGen2.png"
> > alt="hypotrochoidGen2" width="200" height="200"></td></tr>
> > </table>
>
> >    Lots of ways.
>
> > <div style="overflow: hidden;zoom: 1">
> > <div style="width: 30%;float: left">
> >         <div style="padding: 20px">
> > <p>main text main text main text main text main text main text main text
> > main text main text main text main text main text main text main text
> > main text main text main text main text main text main text main text
> > main text main text main text main text main text.</p>
>
> >         </div>
> > </div>
>
> > <div style="width: 20%;float: left">
> >         <div style="padding: 20px">
> > <img
> > src="../SpecialPlaneCurves_dir/Hypotrochoid_dir/hypotrochoidGen2.png"
> > alt="hypotrochoidGen2" width="200" height="200">
>
> >         </div>
> > </div>
> > ...
> > </div>
>
> > Use widths with your floats. Use an inner div to set padding if you
> > don't want to recalculate width. Use zoom: 1 (IE), overflow: hidden
> > (everyone else) if you don't want the wrapper div to collapse in height..
> > Use clear: right if you want following floats, to well, clear.
>
> >    Use Google, if you want to see all this explained by someone else!
>
> >    Jeff
>
> Thanks. Though these suggestions doesn't seems opitmal...
>
> floating and width... the use of float easily overlaps, especially
> when you have float inside float blocks. (e.g. image hides part of
> text or text run over images)
>
> my main interest is logical markup. Using tables of 1 row with 2
> columns, clearly indicates 1 logical block, subdivided with 2 logical
> blocks. Using div, nested div, with float, and width, and overflow,
> etc, gets complex with unpredictable behavior.

Forgive them, for they don't know what they're talking about.

But it is true, you can do much more with divs and css, than tables
and css.
First  |  Prev  | 
Pages: 1 2 3
Prev: Reduce distance between table columns?
Next: Anchor tags - Correct way to style it