Hello all, I am having problems trying to convert a table into a 'div'.
The problem I am running into is due to the fact that this table contains a header (see attachment), rows and cells. How would I go about adding 'rows' and 'cells' to a div?
The current CSS code I am using (external file) to create the table in the attachment is the following:
td
{
background-color: #454545;
border-bottom: solid 1px #000;
border-right: solid 1px #000;
border-left: solid 1px #000;
padding: 5px;
}
td.header
{
background-image: url(../img/tableheader.gif);
background-repeat: repeat-x;
border-top: solid 1px #000;
text-align: center;
font-weight: bold;
}
table
{
margin-top: 10px;
}
table.mid
{
margin-left: auto;
margin-right: auto;
}
What I would need is the same thing created but by making use of div's, not tables. I know it is sometimes okay to use tables for tabular data, though I want to totally get rid of them. Any help would be appreciated.
The way tables work, when you do not set their width they auto re-size according to their content. Can this be done with the div's as well?
A complete working replica of the table provided in the attachment would be very much appreciated, this task seems to be more complex than I had imagined. Especially when it comes to the auto-resize part and the borders set to divide the cells, seems a bit hard to do.
Last but not least, could someone enlighten me as to whether it is really worthwhile transforming tables into div's? I mean, is it worthwhile, accessibility-wise? Do they comply with web standards more?Just float the col1 and col2 next to eachother, and use the id's to set the specified attributes
This is the "Table"
<div id='loginholder'>
<div id='loginheader'>Login</div>
<div id='row'><div id='col1'>Username:</div><div id='col2'><input....></div></div>
<div id='row'><div id='col1'>Username:</div><div id='col2'><input....></div></div>
<div id='loginfooter'><input....'Login'></div>
</div>
Should look something like this:
<!-- m --><a class="postlink" href="http://images.aarts-design.com/divset.jpg">http://images.aarts-design.com/divset.jpg</a><!-- m -->
Hope that helps
Thanks buddy, but would that be auto re-sizable based on the content? I think the way that would work is (cause of the floats), the content would re-size, not the 'div table' itself.
And what would happen if there were more than just 2 columns? Say I wanted 10 columns? Means I would have to specify a style for each column? That would be...well yeah, annoying sort of.
Thanks however, if more info could be provided or if anyone could enlighten me (a 'div table' replica of the provided table in the attachment perhaps?!) I'd be really greatful.The exact wording of the HTML 4.01 Spec is, "Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media." TABLES are for associating headings with data, whic is sort of what you are doing with a FORM:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>
<style type="text/css">
<!--
table {background-color:#000}
td, th, caption
{
background-color: #444;
color:#fff;
padding:5px;
}
td#button {text-align:right}
input {background-color:#600; border:solid 1px #000; color:#fff}
-->
</style>
</head>
<body>
<form action="somescript.pl">
<table summary="">
<caption>Login</caption>
<tr><th><label for="username">Username:</label></th><td><input id="username" type="text"></td></tr>
<tr><th><label for="password">Password:</label></th><td><input id="password" type="text"></td></tr>
<tr><td colspan="2" id="button"><input type="submit" value="Login"></td></tr>
</table>
</form>
</body>
</html>Woohoo, tables in a new perspective, simplistic but effective... and accessible it seems. Yeah I guessed it was alright to use tables for tabular data (ie. forms) but I guess it is just me always looking to make things more accessible.. Thanks for the informative post it helped a lot. The table you provided just can't get more accessible than that!
I do have one final question however, it seems some sort of thick borders pop up in the table you provided, any way to get around that? I would prefer a 1px border, is there any way to achieve that? I am talking about those black borders btw. What I need is a 1px border instead of the current thick borders and a 1px border which captures/surrounds the entire table.
Once again, thanks in advance.td, th, caption
{
background-color: #444;
color:#fff;
padding:5px;
}
-----------------------------------
td, th, caption
{
background-color: #444;
color:#fff;
padding:0px;
}
Should give Thin borders
or adjust to whatever you want...Hiya, that doesn't solve the problem unfortunately, I tried that but was unsuccessful. All that really does is get rid of some space between the table text and the borders. I was referring to the black, thick lines surrounding the table elements.
It most likely has to do something with this:
table
{
background-color:#000;
}
Since that's what creates the black borders. I tried setting a margin of 0px but that too did not work. This method is quite tricky to say the least!tried the cell-spacing attribute yet?
set it to 0 for example...Damn I was testing that to notice it works and then noticed your reply..doh, shoulda figured the cellspacing right away!
Actually that's kinda bad news to me, now I'm stuck with an html property *cries*...cell-spacing ain't supported by CSS
Is there no way to do it with CSS?
on a side note, I REALLY appreciate all the help you guys have been providing thus far! You guys are the bestYou might (i said might 
) be able to use the border-spacing attribute.
Otherwise you'll either have to live with the 1 html attribute, ignore the ugly black lines
, or use a div structure like I suggested earlier.
As for the div, i'm not sure about expanding to fit the contents...
You might be able to set the size to 110% of the contents or something. (not sure)
You might (i said might ) be able to use the border-spacing attribute.
Otherwise you'll either have to live with the 1 html attribute, ignore the ugly black lines, or use a div structure like I suggested earlier.
As for the div, i'm not sure about expanding to fit the contents...
You might be able to set the size to 110% of the contents or something. (not sure)
Yep! You're right, the border-spacing did work in the Mozilla browsers, but you can already guess it.... IE doesn't recognize it. Ugh!
I think I'll just stick with the table and the cellspacing. Thanks for your help!!
*************EDIT***********
Wow so weird, I just tried the new border-collapse: collapse attribute, it got rid of all the spacing between the cells. Then all I had to do was add a 1px black border to the cells and it worked! In IE as well! Why the hell is it that IE is familiar with border-collapse and not border-spacing!??! Very odd to say the least.. However it works like a charm, without the cellspacing html attribute, ha! IE can eat my ass.
*************EDIT***********Put in a tiny javascript that recognizes the browser, IF its IE print the cell-spacing attribute in the html of the table, else, just use the css codes
Or try that of courseAh yeah that could be another possibility, but some say it is not okay to use javascript in order to recognize the browser... 'cause say someone has disabled javascript? This would mean even more browser incompatibilities..
I advice everyone to use the border-collapse attribute and then simply set a border to the cells of whatever amt. of pixels you'd like... Compatible with a lot of browsers* and even IE.. Just don't use border-spacing, that won't work in IE!
* Supported by Explorer 5 and 6 on Windows, Mozilla, Safari and Operamaybe you could post your complete css code for the tables so other users can just copy, paste and adjust? Seeing as how you got it working
(Just an idea)Sure thing!
The CSS:
table
{
background-color: #000;
border-collapse: collapse;
}
td, th, caption
{
background-color: #444;
color: #fff;
padding: 5px;
border: solid 1px #000;
}
caption
{
border-bottom: none;
}
td#button
{
text-align: right;
}
input
{
background-color: #600;
border: solid 1px #000;
color: #fff;
}
The HTML:
<form action="script">
<table summary="">
<caption>Login</caption>
<tr><th><label for="username">Username:</label></th><td><input id="username" type="text"></td></tr>
<tr><th><label for="password">Password:</label></th><td><input id="password" type="text"></td></tr>
<tr><td colspan="2" id="button"><input type="submit" value="Login"></td></tr>
</table>
</form>OK... I just noticed ONE tiny, stupid change in FIREFOX (HUH?!) when applying this method, the width of the <caption> somehow differs 1 pixel from the cells. However, it looks excellent in IE6/5 and Opera (Opera OK and Firefox not? now that's new! both are from mozilla)..
If anyone could provide a fix that'd, be great.
Please note, this happens in Firefox ONLY. See attachment (pointing arrow reveals all):
The problem I am running into is due to the fact that this table contains a header (see attachment), rows and cells. How would I go about adding 'rows' and 'cells' to a div?
The current CSS code I am using (external file) to create the table in the attachment is the following:
td
{
background-color: #454545;
border-bottom: solid 1px #000;
border-right: solid 1px #000;
border-left: solid 1px #000;
padding: 5px;
}
td.header
{
background-image: url(../img/tableheader.gif);
background-repeat: repeat-x;
border-top: solid 1px #000;
text-align: center;
font-weight: bold;
}
table
{
margin-top: 10px;
}
table.mid
{
margin-left: auto;
margin-right: auto;
}
What I would need is the same thing created but by making use of div's, not tables. I know it is sometimes okay to use tables for tabular data, though I want to totally get rid of them. Any help would be appreciated.
The way tables work, when you do not set their width they auto re-size according to their content. Can this be done with the div's as well?
A complete working replica of the table provided in the attachment would be very much appreciated, this task seems to be more complex than I had imagined. Especially when it comes to the auto-resize part and the borders set to divide the cells, seems a bit hard to do.
Last but not least, could someone enlighten me as to whether it is really worthwhile transforming tables into div's? I mean, is it worthwhile, accessibility-wise? Do they comply with web standards more?Just float the col1 and col2 next to eachother, and use the id's to set the specified attributes
This is the "Table"
<div id='loginholder'>
<div id='loginheader'>Login</div>
<div id='row'><div id='col1'>Username:</div><div id='col2'><input....></div></div>
<div id='row'><div id='col1'>Username:</div><div id='col2'><input....></div></div>
<div id='loginfooter'><input....'Login'></div>
</div>
Should look something like this:
<!-- m --><a class="postlink" href="http://images.aarts-design.com/divset.jpg">http://images.aarts-design.com/divset.jpg</a><!-- m -->
Hope that helps
Thanks buddy, but would that be auto re-sizable based on the content? I think the way that would work is (cause of the floats), the content would re-size, not the 'div table' itself.And what would happen if there were more than just 2 columns? Say I wanted 10 columns? Means I would have to specify a style for each column? That would be...well yeah, annoying sort of.
Thanks however, if more info could be provided or if anyone could enlighten me (a 'div table' replica of the provided table in the attachment perhaps?!) I'd be really greatful.
The exact wording of the HTML 4.01 Spec is, "Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media." TABLES are for associating headings with data, whic is sort of what you are doing with a FORM:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>
<style type="text/css">
<!--
table {background-color:#000}
td, th, caption
{
background-color: #444;
color:#fff;
padding:5px;
}
td#button {text-align:right}
input {background-color:#600; border:solid 1px #000; color:#fff}
-->
</style>
</head>
<body>
<form action="somescript.pl">
<table summary="">
<caption>Login</caption>
<tr><th><label for="username">Username:</label></th><td><input id="username" type="text"></td></tr>
<tr><th><label for="password">Password:</label></th><td><input id="password" type="text"></td></tr>
<tr><td colspan="2" id="button"><input type="submit" value="Login"></td></tr>
</table>
</form>
</body>
</html>Woohoo, tables in a new perspective, simplistic but effective... and accessible it seems. Yeah I guessed it was alright to use tables for tabular data (ie. forms) but I guess it is just me always looking to make things more accessible.. Thanks for the informative post it helped a lot. The table you provided just can't get more accessible than that!
I do have one final question however, it seems some sort of thick borders pop up in the table you provided, any way to get around that? I would prefer a 1px border, is there any way to achieve that? I am talking about those black borders btw. What I need is a 1px border instead of the current thick borders and a 1px border which captures/surrounds the entire table.
Once again, thanks in advance.td, th, caption
{
background-color: #444;
color:#fff;
padding:5px;
}
-----------------------------------
td, th, caption
{
background-color: #444;
color:#fff;
padding:0px;
}
Should give Thin borders
or adjust to whatever you want...Hiya, that doesn't solve the problem unfortunately, I tried that but was unsuccessful. All that really does is get rid of some space between the table text and the borders. I was referring to the black, thick lines surrounding the table elements.
It most likely has to do something with this:
table
{
background-color:#000;
}
Since that's what creates the black borders. I tried setting a margin of 0px but that too did not work. This method is quite tricky to say the least!
tried the cell-spacing attribute yet? set it to 0 for example...Damn I was testing that to notice it works and then noticed your reply..doh, shoulda figured the cellspacing right away!
Actually that's kinda bad news to me, now I'm stuck with an html property *cries*...cell-spacing ain't supported by CSS
Is there no way to do it with CSS?
on a side note, I REALLY appreciate all the help you guys have been providing thus far! You guys are the best
You might (i said might ) be able to use the border-spacing attribute.Otherwise you'll either have to live with the 1 html attribute, ignore the ugly black lines
, or use a div structure like I suggested earlier.As for the div, i'm not sure about expanding to fit the contents...
You might be able to set the size to 110% of the contents or something. (not sure)
You might (i said might ) be able to use the border-spacing attribute.Otherwise you'll either have to live with the 1 html attribute, ignore the ugly black lines
, or use a div structure like I suggested earlier.As for the div, i'm not sure about expanding to fit the contents...
You might be able to set the size to 110% of the contents or something. (not sure)
Yep! You're right, the border-spacing did work in the Mozilla browsers, but you can already guess it.... IE doesn't recognize it. Ugh!
I think I'll just stick with the table and the cellspacing. Thanks for your help!!
*************EDIT***********
Wow so weird, I just tried the new border-collapse: collapse attribute, it got rid of all the spacing between the cells. Then all I had to do was add a 1px black border to the cells and it worked! In IE as well! Why the hell is it that IE is familiar with border-collapse and not border-spacing!??! Very odd to say the least.. However it works like a charm, without the cellspacing html attribute, ha! IE can eat my ass.
*************EDIT***********Put in a tiny javascript that recognizes the browser, IF its IE print the cell-spacing attribute in the html of the table, else, just use the css codes
Or try that of course
Ah yeah that could be another possibility, but some say it is not okay to use javascript in order to recognize the browser... 'cause say someone has disabled javascript? This would mean even more browser incompatibilities..I advice everyone to use the border-collapse attribute and then simply set a border to the cells of whatever amt. of pixels you'd like... Compatible with a lot of browsers* and even IE.. Just don't use border-spacing, that won't work in IE!
* Supported by Explorer 5 and 6 on Windows, Mozilla, Safari and Operamaybe you could post your complete css code for the tables so other users can just copy, paste and adjust? Seeing as how you got it working
(Just an idea
)Sure thing!The CSS:
table
{
background-color: #000;
border-collapse: collapse;
}
td, th, caption
{
background-color: #444;
color: #fff;
padding: 5px;
border: solid 1px #000;
}
caption
{
border-bottom: none;
}
td#button
{
text-align: right;
}
input
{
background-color: #600;
border: solid 1px #000;
color: #fff;
}
The HTML:
<form action="script">
<table summary="">
<caption>Login</caption>
<tr><th><label for="username">Username:</label></th><td><input id="username" type="text"></td></tr>
<tr><th><label for="password">Password:</label></th><td><input id="password" type="text"></td></tr>
<tr><td colspan="2" id="button"><input type="submit" value="Login"></td></tr>
</table>
</form>OK... I just noticed ONE tiny, stupid change in FIREFOX (HUH?!) when applying this method, the width of the <caption> somehow differs 1 pixel from the cells. However, it looks excellent in IE6/5 and Opera (Opera OK and Firefox not? now that's new! both are from mozilla)..
If anyone could provide a fix that'd, be great.
Please note, this happens in Firefox ONLY. See attachment (pointing arrow reveals all):