PDA

View Full Version : Table like div's



GijsZePa
11-02-2007, 11:07 PM
Somebody knowing an easy way to 'fake' a table style with div's ? It's not that difficult If the values have the same length, but that's not sure in my case. Like to Have something like this:

<table>
<tr>
<td>Article</td><td>Price</td>
</tr>
</table>

Not sure of the width of the article 'field'

Martin

gogo
11-02-2007, 11:10 PM
You want two vertical columns and then things layed out same in each to create table?

GijsZePa
11-02-2007, 11:11 PM
You want two vertical columns and then things layed out same in each to create table?

Yes...sounds easy...but without table tags..not that easy ;-)

gogo
11-02-2007, 11:13 PM
create two divs, float one to the left. Within each div same layout, ie two divs again (one floated left), set widths for these in absolute figures or as &#37;. The latter gives scalable layout, but you can set max/min widths within the divs as well as a %.

gogo
11-02-2007, 11:16 PM
Sorry I think you just want two columns without subcolumns? Just create two divs, float one to the left aand then use the CSS to control widths as said. Is this helping?

coast
11-02-2007, 11:27 PM
Sorry I think you just want two columns without subcolumns? Just create two divs, float one to the left aand then use the CSS to control widths as said. Is this helping?

Do you need to float the other column to the right, or will it position itself naturally with the width on the left-floating div?

GijsZePa
11-02-2007, 11:32 PM
Sorry I think you just want two columns without subcolumns? Just create two divs, float one to the left aand then use the CSS to control widths as said. Is this helping?

2 or more columns..

I try something like this:

css:
--

DIV.left-1{
border: none; float: left; margin: 0; padding: 0; width: 40%;
}
DIV.left-2 {
border: none; float: left; margin: 0; padding: 0; width: 40%;
}
DIV.right-1 {
border: none; float: right; margin: 0; padding: 0; width: 20%;

--

<div class="table-row">
<div class="left-1"><p class="text">Hallo</p></div>
<div class="left-2"><p class="text">Goodby</p></div>
<div class="right-1"><p class="text">124</p></div>
</div>

Thanx for pointing me to the right direction

gogo
11-02-2007, 11:43 PM
3 columns works but gets more complicated - you create a column, then within it a subcolumn which has two columns. Then you calculate widths accordingly eg 33&#37; 50% 50% gives three equal columns

gogo
11-03-2007, 12:15 AM
Do you need to float the other column to the right, or will it position itself naturally with the width on the left-floating div?

Probably no need to float it, but always check in several browsers. It should just position itself, but stuff below might come up if you do not clear it on the right.



Sometimes you need to put an empty div after the floated one(s) to "clear the float" ie stop stuff from further down the page coming up.

ie
<div class="empty">
</div>

and in the css put:

.empty {clear:both;}

gogo
11-03-2007, 08:54 PM
Hi I was writing quickly and I know Gi knows his stuff, but I should say that in reality you find its better to leave a little margin, eg 49&#37; and 49% as opposed to 50:50, just try and see how it looks.

Here's a super demo where you can actually see how the float works
http://www.barelyfitz.com/screencast/html-training/css/positioning/

and this is excellent resource :http://css.maxdesign.com.au/floatutorial/tutorial0101.htm

Ok, I did get CSStutorial.mobi, just thinking what the minimum of content would be - a quick reference for those on the move.

GijsZePa
11-04-2007, 07:27 AM
Hi I was writing quickly and I know Gi knows his stuff, but I should say that in reality you find its better to leave a little margin, eg 49% and 49% as opposed to 50:50, just try and see how it looks.

Here's a super demo where you can actually see how the float works
http://www.barelyfitz.com/screencast/html-training/css/positioning/

and this is excellent resource :http://css.maxdesign.com.au/floatutorial/tutorial0101.htm

Ok, I did get CSStutorial.mobi, just thinking what the minimum of content would be - a quick reference for those on the move.

Thanx gogo...added those to my bookmarks !!

Martin

GijsZePa
02-19-2009, 09:22 AM
I was always thinking that using the <table> tag within a .mobi site wasn't allowed...concering the .mobi specs..but hey. Was I wrong ?

I just found this post on mobiforge (not that new btw):

http://mobiforge.com/testing/story/fixit-tables

"Note that while the use of tables is permitted, it is recommended to use an alternative to tabular layout where possible. For this reason this test results in a WARN rather than a FAIL when a <table> element is detected. Your ready.mobi score is not affected by including tables in your markup. "

This makes live a little easier...

Martin

gogo
02-19-2009, 09:44 AM
when do you actually need a table that you can't actually get the same results with CSS?

GijsZePa
02-19-2009, 10:10 AM
when do you actually need a table that you can't actually get the same results with CSS?

Nope...but I experience quite some diffuculties on several different phone browsers with the css solution. What looks fine on a nokia 6300...sux on a N96 for example..

Martin

developmy.mobi
02-19-2009, 05:48 PM
I have a real easy way to do it.

Here is your codes:



<div class="table">
<div class="row">
<div class="cell">Left Cell</div>
<div class="cell">Right Cell</div>
</div>
</div>


CSS:


.table {
width: 100%;
display: table;
}
.row {
display: table-row;
}
.cell {
width: 50%;
display: table-cell;
}


ENJOY!

GijsZePa
02-19-2009, 08:13 PM
I have a real easy way to do it.

Here is your codes:



<div class="table">
<div class="row">
<div class="cell">Left Cell</div>
<div class="cell">Right Cell</div>
</div>
</div>


CSS:


.table {
width: 100%;
display: table;
}
.row {
display: table-row;
}
.cell {
width: 50%;
display: table-cell;
}


ENJOY!


Thanks... ! I hope that's browser independent.. :)

Martin