Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

DIV table

Status
Not open for further replies.
GladlyOut

GladlyOut

Technical User
Jan 18, 2005
9
YU
Hello,

I was trying to google out my answer, but I really had no luck so I've decided to ask this question here.

How could you create a table with e.g. 5 columns and 5 rows, to have it shown properly in all browsers and to use only div tags?

Thanks in advance
 
Sort by date Sort by votes
I haven't tested this in all browsers but I assume it will work in most. Set the widths for the divs to a specific width and then float each div to the left. Then either set the first div in each row to clear left or make the divs' container be only wide enough to hold five divs across.

 
Upvote 0 Downvote
Yes, that would be the way to go.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
Ok, I've created the following:
Code: 
<style>
DIV.table-row {
  background: #ffffcc; color: #000000;
  width: 30%;
}

DIV.left-layer {
   float: left; width: 30%;
}

H5.txt {
  background: #ffffcc; border: solid #000000 1px; color: #000000;
  font-family: verdana; font-size: 1em;
  font-weight: normal; margin: 0; 
  text-align: center; 
}
</style>

Code: 
<body>      
        <DIV CLASS="table-row">
          <DIV CLASS="left-layer"><H5 CLASS="txt">x</H5></DIV>
          <DIV CLASS="left-layer"><H5 CLASS="txt">x</H5></DIV>
          <DIV CLASS="left-layer"><H5 CLASS="txt">x</H5></DIV>
         
        </DIV>
        <DIV CLASS="table-row">
          <DIV CLASS="left-layer"><H5 CLASS="txt">x</H5></DIV>
          <DIV CLASS="left-layer"><H5 CLASS="txt">x</H5></DIV>
          <DIV CLASS="left-layer"><H5 CLASS="txt">x</H5></DIV>
          
        </DIV>		
</body>

Now, the problem is that this particular code of mine doesn't show correctly in IE and Mozilla. Also, is there a way to get that second vertical bolder line less borlder (to look like the rest)?
And one more thing, how do I set the width in, for example, px instead of % and not to have everything messed up?

Thanks.
 
Upvote 0 Downvote
not sure what you're talking about there, but try this:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html>
<head>
	<title>Untitled</title>
	
<style type="text/css">
.row {
  width: 30%;
}

.cell {
   width: 33%;
   float: left;
   text-align: center;
   background-color: #ffffcc;
}

.last {
	width: 34%;
}

.txt {
   font-family: Verdana;
   border: 1px solid #000000;
   font-size: 1em;
   font-weight: normal;
   margin: 0;
}

</style>

</head>

<body>      

<div class="row">
	<div class="cell"><h5 class="txt">x</h5></div>
	<div class="cell"><h5 class="txt">x</h5></div>
	<div class="cell last"><h5 class="txt">x</h5></div>
</div>

<div class="row">
	<div class="cell"><h5 class="txt">x</h5></div>
	<div class="cell"><h5 class="txt">x</h5></div>
	<div class="cell last"><h5 class="txt">x</h5></div>
</div>        
</body>

</html>

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
Thanks for that. It works good in both IE and Mozilla now.
 
Upvote 0 Downvote
Oh, just one thing. Is there a way to set border in the:

Code: 
.txt {
   font-family: Verdana;
   border: 1px solid #000000;
   font-size: 1em;
   font-weight: normal;
   margin: 0;
}

less than 1px, since it's way too bold, and if I put something like 0.1px it shows right in Mozilla but IE doesn't buy it.

Thanks
 
Upvote 0 Downvote
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html>
<head>
	<title>Untitled</title>
	
<style type="text/css">
.row {
  width: 30%;
}

.cell {
   width: 33%;
   float: left;
   text-align: center;
   background-color: #ffffcc;
}

div.right-most {
	width: 34%;
}

h5.right-most {
    border-right: 1px solid black;
}

h5.bottom-most {
	border-bottom: 1px solid black;
}

.txt {
   font-family: Verdana;
   border-left: 1px solid black;
   border-top: 1px solid black;
   font-size: 1em;
   font-weight: normal;
   margin: 0;
}

</style>

</head>

<body>      

<div class="row">
	<div class="cell"><h5 class="txt">x</h5></div>
	<div class="cell"><h5 class="txt">x</h5></div>
	<div class="cell right-most"><h5 class="txt right-most">x</h5></div>
</div>

<div class="row">
	<div class="cell"><h5 class="txt bottom-most">x</h5></div>
	<div class="cell"><h5 class="txt bottom-most">x</h5></div>
	<div class="cell right-most"><h5 class="txt right-most bottom-most">x</h5></div>
</div>        
</body>

</html>

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
Just as an aside, why not use a table? This looks like tabular data.
 
Upvote 0 Downvote
indeed. some people tend to get overly-caught-up in the css concept :)

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
Would it be a sin to use this code instead of the <table> element?
 
Upvote 0 Downvote
sin?
no
unnecessary?
yes.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
ChrisHunt said:
Why would you want to? If you've got tabular data to display, that's what the <table> element is for.
Click to expand...
I've used code like this before to show stuff like image thumbnails that wouldn't necessarily be tabular data but would need to be displayed in an orderly fashion.

 
Upvote 0 Downvote
If you're laying out information in a regular array of rows and columns (a 5x5 grid was implied in the original post), even if it isn't strictly speaking "tabular data", a table is generally the best way to do it. There's no real benefit in building a tottering piles of divs and css to do what every browser can already do with its built-in elements.

It's only when laying out whole pages that you should think about using divs and postioning and the like.

As to possible sinfulness, that's hard to say without knowing more. Let's start again - what information are you planning to display in this way, GladlyOut? Maybe there's a better way to do it.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Chris,

I'll be showing some product comparisons on this particular page, but since the whole site is being done in pure CSS, I was thinking to try doing this in CSS as well. Now, if you're suggesting that I'll be better with <table>, then <table> it is. I just wanted to try this out; I see that many people are disagreeing with me on it.

Cheers.

 
Upvote 0 Downvote
Use of a <table> does not, in itself, impinge on the purity of your CSS-based approach. It's only misuse that you should worry about. These are things you should avoid:
[ul]
[li]Putting the whole content of your page into one big table - use <div>s and (maybe) positioning instead.
[/li]
[li]Using a single-cell table to achieve a visual effect, such as putting a box round a paragraph - you can do this with CSS now.[/li]
[/ul]
A product comparison sounds like it could be regular tabular data - you have rows which relate to each product and columns which show their features - a good job for a <table>. Take a look at to see how you can make it more accessible to screen readers.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
992
spamjim
spamjim
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
662
tyutghf
tyutghf
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
206
jason.lex
jason.lex
ashokkumary
  • Locked
  • Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
204
spamjim
spamjim
PeDa
  • Locked
  • Question
Table not formatted correctly in all browsers 1
Replies
2
Views
186
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top