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 biv343 on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to represent a table using CSS

Status
Not open for further replies.
ad2

ad2

Technical User
Dec 31, 2002
186
US
Hi,

I'm new to CSS. Can anyone suggest how to represent a table with four columns <td> in multiple rows <tr>

Would you use a box? Is there an example of this anywhere?

Thanks
 
Sort by date Sort by votes
To create a table, use table. I can't really see the point in creating a number of boxes with css which simulate the behaviour of a table. If it is tabular data you are looking for (from your description, it is) then table is the way to go. If you want to do a page layout, please explain in more detail how it should look.
 
Upvote 0 Downvote
Here is some html you can look at to simulate a 4 column table. It might give you a starting point for what you want.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title></title>
</head>
<body>

<span style = "float:right; width:25%; height:25%; border:solid #FFCC99; background-color:#FFFFFF;margin:20px 0 0 0; padding:0;" >
BOX1  content content content
<br />content content content content
<br />content content content content </span>
<span style = "float:right; width:25%; height:25%; border:solid #FFCC99; background-color:#FF00FF;margin:20px 0 0 0; padding:0;" >
BOX2  content content content
<br />content content content content
<br />content content content content</span>
<span style = "float:right; width:25%; height:25%; border:solid #FFCC99; background-color:#00FFFF;margin:20px 0 0 0;padding:0;">
BOX3 content content content
<br />content content content content
<br />content content content content</span>
<span style = "float:right; width:25%; height:25%; border:solid #FFCC99; background-color:#FF0FFF;margin:20px 0 0 0; padding:0;" >
BOX4  content content content
<br />content content content content
<br />content content content content</span>
<span style = "float:right; width:25%; height:25%; border:solid #FFCC99; background-color:#FF0FFF;margin:0; padding:0;" >
BOX5  content content content
<br />content content content content
<br />content content content content</span>
<span style = "float:right; width:25%; height:25%; border:solid #FFCC99; background-color:#00FFFF;margin:0; padding:0;" >
BOX6  content content content
<br />content content content content
<br />content content content content</span>
<span style = "float:right; width:25%; height:25%; border:solid #FFCC99; background-color:#FF0FFF;margin:0; padding:0;" >
BOX7  content content content
<br />content content content content
<br />content content content content</span>
<span style = "float:right; width:25%; height:25%; border:solid #FFCC99; background-color:#00FFFF;margin:0; padding:0;" >
BOX8  content content content
<br />content content content content
<br />content content content content</span>
</body>
</html>

You can just reproduce boxes 5,6,7 and 8 as many times as you need to get more rows.

Paul
 
Upvote 0 Downvote
Thanks. Was just wondering if CSS would simulate "tabs" and "returns" like in a Word doc or have a easy replacement for the necessary table, allowing you to have structure to an online document.
 
Upvote 0 Downvote
Paul this is a lot of code for something that is a poor imitation of table. From the fact that it chokes already in Mozilla to not being able to handle more text than expected. Just increase the amount of text beyond those 25%in certain "cells" and look what happens to your "table". That does not even remotely look like table. It's a nice effort, but it just doesn't cut it. If he needs to put in tabular data, he should go with the table. If he needs something else, he should explain what exactly it is.
 
Upvote 0 Downvote
Use the right tool for the right job.

There is nothing at all wrong or non-web standards about using table tags for tabular data. It is what it is meant for.
 
Upvote 0 Downvote
Don't shoot the messenger boys. I simply gave ad2 something to look at along the lines of what they asked for.
Vragabond, most of that code is text not code and CSS breaks down in EVERY browser. Some a little differently than other. I would say that's part of learning to use it.

Foamcow, I didn't advocate any method or tool for the job. I have no issues with tables but ad2 wanted a representation of a table in CSS. I simply tried to give them an example.

Off to conference. Have a good day.

Paul
 
Upvote 0 Downvote
Paul, Vragabond, Foamcow,

ALL you comments are appreciated! Paul did give me what I asked for and the rest of you made me aware that I can mix standard HTML (tables) formatting with CSS.

So thanks to all!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
824
pmonett
pmonett
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
776
bdwilcox
bdwilcox
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
654
PeDa
PeDa
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
801
3esolar
3

Part and Inventory Search

Sponsor

Back
Top