CSS Table

D

Dennis Marks

Following is simple HTML with CSS to create a 4x4 table. It is just an
experiment to replace a table. My question is: can the CSS be reduced?

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="EN">
<head>
<title>CSS Table</title>
<style type="text/css">
div {position: absolute; height: 25%; width: 25%; border-style: solid; }
#a1 {left: 0%; top: 0%;}
#a2 {left: 25%; top: 0%;}
#a3 {left: 50%; top: 0%; }
#a4 {left: 75%; top: 0%;}
#b1 {left: 0%; top: 25%;}
#b2 {left: 25%; top: 25%;}
#b3 {left: 50%; top: 25%;}
#b4 {left: 75%; top: 25%;}
#c1 {left: 0%; top: 50%;}
#c2 {left: 25%; top: 50%;}
#c3 {left: 50%; top: 50%;}
#c4 {left: 75%; top: 50%;}
#d1 {left: 0%; top: 75%;}
#d2 {left: 25%; top: 75%;}
#d3 {left: 50%; top: 75%;}
#d4 {left: 75%; top: 75%;}
</style>
</head>
<body >
<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>
<div id="a4">a4</div>
<div id="b1">b1</div>
<div id="b2">b2</div>
<div id="b3">b3</div>
<div id="b4">b4</div>
<div id="c1">c1</div>
<div id="c2">c2</div>
<div id="c3">c3</div>
<div id="c4">c4</div>
<div id="d1">d1</div>
<div id="d2">d2</div>
<div id="d3">d3</div>
<div id="d4">d4</div>
</body>
</html>
 
M

Mitja

Dennis Marks said:
Following is simple HTML with CSS to create a 4x4 table. It is just an
experiment to replace a table. My question is: can the CSS be reduced?

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="EN">
<head>
<title>CSS Table</title>
<style type="text/css">
div {position: absolute; height: 25%; width: 25%; border-style:
solid; } #a1 {left: 0%; top: 0%;}
#a2 {left: 25%; top: 0%;}
#a3 {left: 50%; top: 0%; }
#a4 {left: 75%; top: 0%;}
#b1 {left: 0%; top: 25%;}
#b2 {left: 25%; top: 25%;}
#b3 {left: 50%; top: 25%;}
#b4 {left: 75%; top: 25%;}
#c1 {left: 0%; top: 50%;}
#c2 {left: 25%; top: 50%;}
#c3 {left: 50%; top: 50%;}
#c4 {left: 75%; top: 50%;}
#d1 {left: 0%; top: 75%;}
#d2 {left: 25%; top: 75%;}
#d3 {left: 50%; top: 75%;}
#d4 {left: 75%; top: 75%;}
</style>
</head>
<body >
<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>
<div id="a4">a4</div>
<div id="b1">b1</div>
<div id="b2">b2</div>
<div id="b3">b3</div>
<div id="b4">b4</div>
<div id="c1">c1</div>
<div id="c2">c2</div>
<div id="c3">c3</div>
<div id="c4">c4</div>
<div id="d1">d1</div>
<div id="d2">d2</div>
<div id="d3">d3</div>
<div id="d4">d4</div>
</body>
</html>
Click to expand...

body { padding:0 }
div {height:25%; width:25%; float: left; border: solid black 2px;}
 
D

Dennis Marks

Mitja <[email protected]> said:
body { padding:0 }
div {height:25%; width:25%; float: left; border: solid black 2px;}
Click to expand...
It works but sometimes loses the 4x4 structure when resizing back and
forth. I have never been too clear on float since references usually
point to use with images. Can someone give a clear explaination as to
why it works?
 
B

Blinky the Shark

Dennis said:
It works but sometimes loses the 4x4 structure when resizing back and
forth. I have never been too clear on float since references usually
point to use with images. Can someone give a clear explaination as to
why it works?
Click to expand...

And in Konqueror (and thus possibly Mac Safari), the 25% height seems to
be ignored (in the linked-stylesheet version, retained above):

http://blinkynet.net/screens/4x4css.jpg
Click to expand...
 
S

Spartanicus

Dennis Marks said:
Following is simple HTML with CSS to create a 4x4 table. It is just an
experiment to replace a table. My question is: can the CSS be reduced?
Click to expand...

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="EN">
<head>
<title>CSS Table</title>
<style type="text/css">
div.table{display:table;width:100%}
div.table div{display:table-cell;width:25%}
</style>
</head>
<body >
<div class="table">
<div>a1</div>
<div>a2</div>
<div>a3</div>
<div>a4</div>
</div>
<div class="table">
<div>b1</div>
<div>b2</div>
<div>b3</div>
<div>b4</div>
</div>
<div class="table">
<div>c1</div>
<div>c2</div>
<div>c3</div>
<div>c4</div>
</div>
<div class="table">
<div>d1</div>
<div>d2</div>
<div>d3</div>
<div>d4</div>
</div>
</body>
</html>

Tabular data should be marked up as a (html) table.
 
M

Mitja

Blinky the Shark said:
Probably because browser miscalculates the 25%-widths wrongly, making the
four divs slightly wider than body. width:24% would probably work fine, but
with predictable side effects (maybe body{padding:0 2%;} would get rid of
that?).
And in Konqueror (and thus possibly Mac Safari), the 25% height seems
to be ignored (in the linked-stylesheet version, retained above):

http://blinkynet.net/screens/4x4css.jpg
Click to expand...

Thanks to both for the info. It worked fine for me in IE6 and Opera.
The bottom line would probably be to use tables...
Click to expand...
 
N

Neal

It works but sometimes loses the 4x4 structure when resizing back and
forth. I have never been too clear on float since references usually
point to use with images. Can someone give a clear explaination as to
why it works?
Click to expand...

Float works like this. The elementis removed from normal rendering and
moved as far to left or right as possible. All following elements begin at
the same vertical position the floated elemnt begins at, and the content
of those elements respect the content of the float.

I'd like to know what you're needing a 4x4 layout for before I give a
recommendation.
 
B

Blinky the Shark

Mitja said:
Blinky the Shark said:
Dennis Marks wrote:
Probably because browser miscalculates the 25%-widths wrongly, making the
four divs slightly wider than body. width:24% would probably work fine, but
with predictable side effects (maybe body{padding:0 2%;} would get rid of
that?).
Click to expand...

And in fact the image I uploaded, below, is using 24%. I should've
mentioned that.
Thanks to both for the info. It worked fine for me in IE6 and Opera.
The bottom line would probably be to use tables...
Click to expand...

I get an interesting result in In Opera (7.23/Linux): if I resize its
window both verticaly and horizontally, it works fine; but if I give it
more height but do not change the width, the divisions do not stretch
vertically to fill the new size. (If I double the window's height, the
matrix doesn't change, filling only the top half.)
Click to expand...
Click to expand...
Click to expand...
 
D

Dennis Marks

Neal said:
Float works like this. The elementis removed from normal rendering and
moved as far to left or right as possible. All following elements begin at
the same vertical position the floated elemnt begins at, and the content
of those elements respect the content of the float.

I'd like to know what you're needing a 4x4 layout for before I give a
recommendation.
Click to expand...

This was just an experiment to see how different positions and floats
actually work. It is difficult to sometimes understand the tutorials so
I just tried it.

I have another question. The normal flow of DIVS is vertical. When I
use "float left" it becomes horizontal. The only reason that the table
dropped down after 4 divs was that 100% was reached. How would I force
a return to vertical without reaching 100%

abcd
e
f
g

If a,b,c, and d are float left, e appears to the right of d.
 
W

Whitecrest

I have another question. The normal flow of DIVS is vertical. When I
use "float left" it becomes horizontal. The only reason that the table
dropped down after 4 divs was that 100% was reached. How would I force
a return to vertical without reaching 100%
Click to expand...

<br> ?
 
L

Lauri Raittila

In said:
I have another question. The normal flow of DIVS is vertical. When I
use "float left" it becomes horizontal. The only reason that the table
dropped down after 4 divs was that 100% was reached. How would I force
a return to vertical without reaching 100%

abcd
e
f
g

If a,b,c, and d are float left, e appears to the right of d.
Click to expand...

clear:left; for e
 
M

Michael Wilcox

Dennis said:
Following is simple HTML with CSS to create a 4x4 table. It is just an
experiment to replace a table. My question is: can the CSS be reduced?
Click to expand...

I question why you would do this, since HTML 4.01 provides a very good
method of producing tables through the table element. CSS should not and
could not replace tables when the tables are used correctly.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Positioning CSS components 1
Trouble with css 4
Something in my CSS block isn't being followed 1
Impossible carved cubes (1 line of html, 3 elements of css) WOW! 1
Change array shapes 1
Working on mobile css menu with plenty of frustration! 2
Why is the e.target not working here? 1
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3

Members online

No members online now.
Total: 367 (members: 1, guests: 366)
Robots: 597

Forum statistics

Threads
474,431
Messages
2,571,679
Members
48,796
Latest member
Greg L.

Latest Threads

Top