Jump to content

Converting a table


justsomeguy
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...