7 replies [Last post]
jim_keller
Offline
newbie
Last seen: 17 years 23 weeks ago
Joined: 2003-12-05
Posts: 7
Points: 0

I'm interested in starting to use more CSS positioning than I have in the past, even though I think tables (still) have much more of a place in site design than many CSS-proponents are willing to admit. However, even simple table-style structures seem difficult to emulate with pure CSS. Please have a look:

http://jim.centerfuse.net/css/tables.html

I would be interested in seeing if anyone can emulate these tables exactly, with the given criteria.

-Jim Keller

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 26 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Can you recreate these tables using only CSS?

Jim I do not think you get what CSS is - tables are not dead.

But lets take up the challenge anyway -
This is what I should have been able to use

<Style>
.t1{border: 1px solid #A0A0A0; }
.t2{border: 1px solid #A0A0A0; width: 100%}
.greyt1{padding: 5px; font-size: 13px; color: #262626; background-color: #AAAAAA;}
.greyt2{padding: 7px; font-size: 13px; color: #262626; background-color: #AAAAAA;}
.purple{padding: 4px; font-size: 13px; background-color: #A963AC; color: #FFFFFF;}
.floatleft{vertical-align: center; float: left;}
.floatright{vertical-align: center; float: right; padding: 0px}
.inputbox{margin-top: 1px;}
</style>

body -

<div class="t1">
	<div class="purple">
	This is my heading for table 1.
	</div>
	<div class="floatleft">
		<div class="greyt1">
		Here is something for you to input:
		</div>
	</div>
	<INPUT class="inputbox" id="testInput" type="text" size="20" name="test">
	</div>
</div>
</div>
<br /><br />
<div class="t2">
	<div class="purple">
	This is my heading for table 2.
	</div>
	<div class="floatleft">
		<div class="greyt2">
		something on the left.
		</div>
	</div>
	<div class="floatright">
	Here is vertically centered text & an image all the way to the right: <IMG align="middle" src="http://www.centerfuse.net/page2/buttons/postmessage.jpg" border="0">
	</div>
</div>

But due to a bug in IE I had to use this

<Style>
.t1{border: 1px solid #A0A0A0; }
.t2{border: 1px solid #A0A0A0; width: 100%}
.greyt1{padding: 5px; font-size: 13px; color: #262626; background-color: #AAAAAA;}
.greyt2{padding: 7px; font-size: 13px; color: #262626; background-color: #AAAAAA;}
.purple{padding: 4px; font-size: 13px; background-color: #A963AC; color: #FFFFFF;}
.floatleft{vertical-align: center; float: left;}
.floatright{vertical-align: center; float: right; padding: 0px}
.inputbox{margin-top: 1px;}
.backwrappert1 {background-color: #EEEEEE; white-space: nowrap;}/*had to use this due to IE bug where height 100% is not calc correctly*/
.backwrappert2 {padding: 4px; width: 100%; background-color: #EEEEEE; text-align: right;}/*had to use this due to IE bug where height 100% is not calc correctly*/
.wrappert1{background-color: #AAAAAA; width: 42%} /*had to use this due to IE bug where height 100% is not calc correctly*/
.wrappert2{background-color: #AAAAAA;} /*had to use this due to IE bug where height 100% is not calc correctly*/
<style>

body -


<div class="wrappert1">
<div class="t1">
	<div class="purple">
	This is my heading for table 1.
	</div>
	<div class="floatleft">
		<div class="greyt1">
		Here is something for you to input:
		</div>
	</div>
	<div class="backwrappert1">
	<INPUT class="inputbox" id="testInput" type="text" size="20" name="test">
	</div>
</div>
</div>
<br /><br />
<div class="wrappert2">
<div class="t2">
	<div class="purple">
	This is my heading for table 2.
	</div>
	<div class="floatleft">
		<div class="greyt2">
		something on the left.
		</div>
	</div>
	<div class="floatright">
	<div class="backwrappert2">
	Here is vertically centered text & an image all the way to the right: <IMG align="middle" src="http://www.centerfuse.net/page2/buttons/postmessage.jpg" border="0">
	</div>
	</div>
</div>
</div>

Which also caused a problem with resizing.

Overall When MS get their act together I used less CSS than you and resizing would allow my page to go smaller than yours and still show more detail.

Jim - very easy to say hey do this with CSS but you are not allowed to use the full attributes of CSS like fixed width. And all the time you are using CSS for your tables. Think how much more you would have had to type in the body without the CSS you used.

Day

[/code]

The only way to learn is to do it yourself

jim_keller
Offline
newbie
Last seen: 17 years 23 weeks ago
Joined: 2003-12-05
Posts: 7
Points: 0

Can you recreate these tables using only CSS?

daybreak:

Thanks for the reply. Your first table looks great, I'm checking it out now. The second one works in IE, but not in Opera 7. I'm going to see if I can figure out why.
You can see my original attempt here... http://jim.centerfuse.net/css/cssattempt.html

However, since I'm going to be filling all of my tables (some of which look like this, some will look slightly different) with dynamic data, using things like extra margins and padding to fill holes doesn't really work, because they only apply to this specific instance. If I were to change the content of either side of the table, it could throw off those small fixes.
Currently, my plans for the future are to use CSS DIVs when doing things like single column content inside some sort of formatted box, or when doing large columns of content. However, I can't help but think that sticking to heavily style-sheeted tables is the way for me to go in an instance like this. I'm completely open to being proven wrong Smile

jim_keller
Offline
newbie
Last seen: 17 years 23 weeks ago
Joined: 2003-12-05
Posts: 7
Points: 0

Can you recreate these tables using only CSS?

>Jim I do not think you get what CSS is - tables are not dead.

I wholeheartedly agree, but many will grumble at the use of tables for anything. I think the display: table-row, table-cell, etc. properties could eventually eliminate tables (since it's mimicking tables by using css), but those properties are barely supported as of right now, and current CSS doesn't lend itself to some of the basic (and very useful) functions of tables.

jim_keller
Offline
newbie
Last seen: 17 years 23 weeks ago
Joined: 2003-12-05
Posts: 7
Points: 0

Can you recreate these tables using only CSS?

and if I can reply to my own thread yet again, here is how I'm currently doing the first table, using a table that is styled heavily by CSS:

http://jim.centerfuse.net/css/current.html

I personally like this method.

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 26 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Can you recreate these tables using only CSS?

I didn't try to put in any fixes for different browsers.

But also remember I did not use the full power of CSS, and therefore may not have needed some of the fixes.

For quite a few years until the browsers are more compliant and people upgrade then CSS needs different fixes.

In the end both CSS and tables will live side by side, as tables are still the best way to do tabulated data.

Quote:
Originally posted by DCElliott from another forum - Which opened my eyes. DE also promotes CSS but ....

Data is perfectly appropriate to be displayed in tables. Tables have a number of automatic properties (like <th> being centered and bolded) that make the display "right" - to recreate tables with divs is an exercise in futility!

Good HTML writing is grounded in understanding the semantics of your material and then using the corresponding tags which will give your material the appropriate look.
DE

A pearl of wisdom!

Day

The only way to learn is to do it yourself

moody
moody's picture
Offline
Regular
croatia
Last seen: 13 years 27 weeks ago
croatia
Timezone: GMT+1
Joined: 2003-09-21
Posts: 29
Points: 0

Can you recreate these tables using only CSS?

i just can't seem to do any of my own work right now, so i thought i would do this little challenge. i also wanted some inspiration for myself. and after i saw what you finally came up with, i thought you might want to see somehting else.

it seems to work the same in ie as mozilla on a pc, although it ain't pixel perfect. and there are three types of measureemtnt in this. font with pt's (as per what you we're going for) and some %'s for a little this and that and then some em's for everything else.

(just an endnote: the markup here doesn't validate, but i assumed that wasn't a priority for you.)

who knows? i hope it helps you some.

cheers!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
		<head>
			<meta http-equiv="content-type" content="text/html; charset=utf-8" />
			<title>Jim Keller</title>
			<style type="text/css" media="screen" title="cssp">
				body {
					font-family: Verdana, Arial;
					font-size: 10pt;
					margin: 0;
					padding: 0;
				}
				
				form {
					margin: 0.2em 0;
					padding: 0;
				}
				
				h4 {
					background-color: #A963AC;
					border: 1px solid #A0A0A0;
					color: #FFFFFF;
					font-size: 10pt;
					font-weight: normal;
					line-height: 1.6em;
					margin: 0;
					width: 100%;
				}
				
				.subbut {
					float: right;
					margin-top: 0.2em;
				}
				
				#all {
					margin-left: auto;
					margin-right: auto;
					margin-top: 1em;
					width: 50%;
				}
				
				#some {
					border: 1px solid #A0A0A0;
				}
			</style>
		</head>
		<body>
			<div id="all">
				<div id="some">
					<h4>I forgot my password</h4>
					<form action="myAction" method="POST">
						<label for="textbox_username">Enter your username:</label>
						<input id="textbox_username" type="text" name="which_username" size="20" />
				</div>
						<input type="submit" class="subbut" value="Send my password &gt;&gt;" />
					</form>
			</div>
		</body>
	</html>

JohnO
Offline
Regular
Rochester NY
Last seen: 17 years 21 weeks ago
Rochester NY
Timezone: GMT-5
Joined: 2003-12-18
Posts: 16
Points: 0

Can you recreate these tables using only CSS?

http://www.alistapart.com/articles/practicalcss/

near the bottom.. exactly what you want to do

div across the top with whatever width, then nested divs, float left, and float right.. the float left gets text-align:right, and the float right, gets text align set to left... cake