Converting a table

[justsomeguy]

How would you guys convert a table like this:

<table class="content_area" cellpadding="2" cellspacing="0" style="width: 100%;">  <tr>	<td>Name</td>	<td>Image</td>	<td style="text-align: center;">Active</td>	<td> </td>  </tr>  <tr>	<td><input type="text" name="name" class="input_text" size="20" maxlength="200" /></td>	<td><input type="file" class="input_text" name="thumb" size="20" /></td>	<td style="text-align: center;"><input type="checkbox" name="active" checked="checked" value="true" /></td>	<td style="text-align: center;"><input type="submit" value="Add" class="input_button" /></td>  </tr></table>

The idea is to have 4 columns with the name in the first row and a field in the second row, where the columns would resize dynamically. In this example column 3 holds a checkbox but it might as well be a 20-character text field. In my view the purpose of using a table here is because it's a really easy way to get content to line up in columns with a flexible size.

[Viper23]

How long are you wanting the table? If you know an exact width size it will be a whole lot easier.

[Viper23]

This is what you have as your code.

<table class="content_area" cellpadding="2" cellspacing="0" style="width: 100%;">  <tr>	<td>Name</td>	<td>Image</td>	<td style="text-align: center;">Active</td>	<td> </td>  </tr>  <tr>	<td><input type="text" name="name" class="input_text" size="20" maxlength="200" /></td>	<td><input type="file" class="input_text" name="thumb" size="20" /></td>	<td style="text-align: center;"><input type="checkbox" name="active" checked="checked" value="true" /></td>	<td style="text-align: center;"><input type="submit" value="Add" class="input_button" /></td>  </tr></table>

This is the code I used to use as an example. It looks really close now, but I think you can see what I was saying.

<table border="0" cellpadding="2" cellspacing="0" width="400">  <tr valign="top">	<td align="left" width="100">Name</td>	<td align="left" width="100">Image</td>	<td align="center" width="100">Active</td>	<td align="left" width="100"> </td>  </tr>  <tr valign="top">	<td align="left" width="100"><input type="text" name="name" class="input_text" size="20" maxlength="200" /></td>	<td align="left" width="100"><input type="file" class="input_text" name="thumb" size="20" /></td>	<td align="center" width="100"><input type="checkbox" name="active" checked="checked" value="true" /></td>	<td align="center" width="100"><input type="submit" value="Add" class="input_button" /></td>  </tr></table>

[justsomeguy]

Right, but I'm trying to remove the table altogether and replace it with a series of divs that would look the same. One of the requirements is that the size is not set to a specific width. The maximum width for the entire box is set, but each column or div might contain something of an unknown size.

[Kingy]

Um not 100% sure if this will help but maybe you can work on top of something like this?<div id="apDiv1" style="position: absolute; left: 13px; top: 16px; width: 30%; height: 26px; z-index: 1; vertical-align: middle">Name</div><div id="apDiv2" style="position: absolute; left: 312px; top: 16px; width: 30%; height: 26px; z-index: 2; vertical-align: middle">Image</div><div id="apDiv3" style="position: absolute; left: 611px; top: 16px; width: 20%; height: 26px; z-index: 3; vertical-align: middle">Active</div><div id="apDiv4" style="position: absolute; left: 13px; top: 42px; width: 30%; height: 31px; z-index: 4; vertical-align: middle"><input type="text" name="name" class="input_text" size="20" maxlength="200" /></div><div id="apDiv5" style="position: absolute; left: 312px; top: 42px; width: 30%; height: 31px; z-index: 5; vertical-align: middle"><input type="file" class="input_text" name="thumb" size="20" /></div><div id="apDiv6" style="position: absolute; left: 611px; top: 42px; width: 5%; height: 31px; z-index: 6"><input type="checkbox" name="active" checked="checked" value="true"/></div><div id="apDiv7" style="position: absolute; left: 660px; top: 42px; width: 15%; height: 31px; z-index: 7; vertical-align: middle"><input type="submit" value="Add" class="input_button" /></div>

[justsomeguy]

Thanks for the reply, but absolute positioning and fixed dimensions are a no-go.

[aspnetguy]

I don;t have any code to contribute. Without fixed width this is next to impossible unless using javascript which is not a good solution and would be a ridiculous amount of work just the simple result.The code you provided is a prefectly acceptable use of tables (even in a tableless layout) because it is displaying what a table is meant for, tabular data. I assume your client wants a tableless layout, prehaps you could get them to read the definition of a tableless layout. It does NOT mean absolutely no tables, it means only use tables for tabular data.

[justsomeguy]

It's not a client thing, I was just curious. There are a lot of people who insist that any table can be converted to a div, so I was wondering about that one. It's just a basic form to add a record to the database, the first row contains the names of the fields and the second row contains the actual fields, I'm sure other people have used tables like this as well. I used a table to make sure that the fields lined up with the names. The CSS classes I included in the code don't do anything for positioning, they just change colors, borders, padding, etc.

[aspnetguy]

Even as a huge fan of CSS layouts there are still annoying bugs (mostly IE6) and times when it is not reasonable to not use a table, like this one Although as CSS support gets better these issues are fewer and fewer.Uniform div width and height are still a huge problem for CSS layouts. You can "hack" the height problem with background images but I don;t know of any solution to non-fixed widths.

[Kingy]

Sorry I couldn't be of any more help, think that was as close as I could think of at this present time.

[ste]

as aspnetguy wrote, because of the relationships between the columns and rows in the OP this data could be described as tabular data and so is an acceptable use of tables.still, justsomeguy has made a good point that illustrates some of the short comings with support for css properties like display: table, table-row, and table-cell for divs. hopefully these will be better supported in the future, because there are occasionally times when we would like divs to behave more like tables even though we are not putting tabular data in them. hopefully these will be better supported in the future. remember that tables have existed for longer than css. that said, i still think that 9 times out of 10 its better to avoid tables (unless of course we are talking tabular data) because alot of the time layouts can be achieved without tables if you have a good knowledge of css. Btw here is my version of the table: (doesn't work at all in IE, try in FF Lol )div#layout {display: table; width: 100%;}div.row {display: table-row;}div.cell {display: table-cell; padding: 2px;}<div id="layout"> <div class="row"> <div class="cell">Name</div> <div class="cell">Image</div> <div class="cell">Active</div> <div class="cell"> </div> </div> <div class="row"> <div class="cell"><input type="text" name="name" class="input_text" size="20" maxlength="200" /></div> <div class="cell"><input type="file" class="input_text" name="thumb" size="20" /></div> <div class="cell"><input type="checkbox" name="active" checked="checked" value="true" /></div> <div class="cell"><input type="submit" value="Add" class="input_button" /></div> </div></div>

[justsomeguy]

as aspnetguy wrote, because of the relationships between the columns and rows in the OP this data could be described as tabular data and so is an acceptable use of tables.

Whoa whoa. So if I make a site that includes a table, where the relationship between the rows and the columns are the same as in this example, but if those cells happen to contain images instead of text, does that no longer qualify as something that can be described as tabular data? Because I'm using this table specifically for layout - so that I can have a 4-column structure where the corresponding columns in both rows are the same width. If that is an acceptable use of a table, then how come that definition changes if I use images?This is the same old argument, I'm just poking at you guys who are vehemently anti-table, I think that a lot more situations can be described as "tabular data" then what you think (including image layouts). I also noticed a conspicuous lack of croatiankid replies..

div#layout {display: table; width: 100%;}div.row {display: table-row;}div.cell {display: table-cell; padding: 2px;}

That's cheating!Thanks for the reply though, I appreciate the feedback.

[jesh]

With a little tweaking needing to be done, what about something like this?

<html><head><style>#form label { display: block; }#form div { float: left; padding: 2px; }</style></head><body><div id="form"><div>  <label for="name">Name</label>  <input type="text" id="Name" /></div><div>  <label for="thumb">Image</label>  <input type="file" id="thumb" /></div><div>  <label for="active">Active</label>  <input type="checkbox" id="active" /></div><div>  <label> </label>  <input type="submit" value="Add" /></div><br style="clear: left;" /></div></body></html>

[ste]

thats similar to the way i would normally do a form jesh and has the added benifit of labels for accesibilityproblem is that it doesnt really do what justsomeguy outlined in the OP i.e. 100% wide form with columns that resize dynamically within the 100%. my solution of using display: table; works but is not supported by IE

That's cheating!

lol btw i put together a file with the 3 versions in case anyone wants to test them http://stefairclough.googlepages.com/index.html

[justsomeguy]

Wow IE really does butcher that. hmm..ahh, I was just thinking I could have swore I wrote a piece of Javascript that toggles a table row visible or not and that it worked in IE. Looks like I came across the same problem.

function mediaToggle(){  for(var i=1; i<=nr_media; i++)  {	var el = document.getElementById("mediarow"+i);	if(!el) break;	if (el.style.display == "none")	{	  try	  { el.style.display = "table-row"; }	  catch (ex)	  { el.style.display = "block"; }	}	else	  el.style.display = "none";  }}

..how DOES IE render a table then? As a block?

[jesh]

problem is that it doesnt really do what justsomeguy outlined in the OP...

You're right, natch. OK, how about this? I would never really do this in a production environment - I'd just use a table! - but I came up with this for the fun of it.

<html><head><style>#form label { display: block; }#form div { float: left; }</style><script>function resizeForm(){    var form = document.getElementById("form");    var divs = form.getElementsByTagName("div");    var bodywidth = document.body.offsetWidth;    var divwidth = 0;    for(var i = 0; i < divs.length; i++)    {        divwidth += divs[i].offsetWidth;    }    if(divwidth < bodywidth)    {        var portion = ((bodywidth - divwidth) / 4) - 2;        for(var i = 0; i < divs.length; i++)        {            divs[i].style.width = divs[i].offsetWidth + portion + "px";        }    }    else    {        var input;        for(var i = 0; i < divs.length; i++)        {            input = divs[i].getElementsByTagName("input")[0];            divs[i].style.width = input.offsetWidth + "px";        }    }}window.onresize = resizeForm;document.body.onresize = resizeForm;window.onload = resizeForm;</script></head><body><div id="form"><div>  <label for="name">Name</label>  <input type="text" id="Name" /></div><div>  <label for="thumb">Image</label>  <input type="file" id="thumb" /></div><div>  <label for="active">Active</label>  <input type="checkbox" id="active" /></div><div>  <label> </label>  <input type="submit" value="Add" /></div><br style="clear: left;" /></div></body></html>

[justsomeguy]

That's actually not that far off. I wouldn't need the Javascript to resize everything (the form on any given page will be a static size, but that size might change from page to page), but having the block label then the input under it isn't a bad idea.

[croatiankid]

If used correctly, I don't really mind using tables in a form, because it can usually be marked up in a way that is logical (left row labels, right row inputs, for example).