Tables in CSS?

HTML & CSS
1

Everyone,

My understanding is that tables are not possible in CSS?

I have a requirement for a table to neatly lay out text in a table but am having a slight issue with this.

It appears that my created table is disapering behind a stretched background image.

Here’s the code from the index page:

<div id=“divbg”><img src=“file:///C:/Users/Oliver/Documents/My%20Web%20Sites/mysite/test/images/main-bg.jpg” width=“100%” height=“100%” alt=“Welcome to my Site!”/></div>

and here’s the associated code from the default.css page:

#divbg {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0;
}

Should I be creating a table and use divs to call elements from css and use an index of 1?

Again, I’m new to this CSS stuff so if anyone can give me some advice or examples (preferd cuz I’m lazy) it would really help!

Thank you!
:slight_smile:

2

We’d need a site to look at to give a good diagnosis, a negative z-index could work though it’s a possibility it will be hidden behind the body.

position:Relative;z-index:1; on the tabvle should work (or on a parent) however I’d like to see a site for the best answer :).

Btw, tables are HTML, CSS is CSS. You can create tables in HTML but you can’t create them in CSS. You CAN style them and everything related to them though.

3

You can create tables in CSS, just that IE7 and earlier don’t support those particular CSS commands and too many people still use those browsers. Once IE6 and IE7 usage drops to the point where you don’t need to support them any more CSS tables will be a practical option for page layout.

4

Ryan, the site is still very much in the dev stages. The best i can do at this point is provide you with all the code here. There’s very little html and css so it’s not going to be big issue to dig through the whole thing.

Please keep in mind that I am stretching the image and I don’t know alot about CSS - but hope to pick this up asap with some help from the community here.

So essentially, I want a “table” and it would be very good if it behaves like one too with the word wrapping, etc.

Let me know if you want to look at the html/css.

Thanks!

5

felgall,

Please keep in mind that I am stretching the background image so what I am faced with is a couple of issues here:

  1. Body information needs to placed in DIV’s in order for it to be visible on the screen.
  2. I prefer to use a table strcuture/layout and I’m sure you know the benefits of this!

Any help would be great! This CSS looks very cool, but it’s only my second night working with it. LOL!

6

The CSS commands for setting up tables are

display:table
display:table-row
display:table-cell

There are full details on how they work and the best ways to use them along with workarounds for old versions of IE in the SitePoint book “Everything You Know About CSS is Wrong”.

7

Just make an ordinary html table. Tables are not some evil banned thing, they are for tables of data and totally valid html. And can be styled via css. no need for a div inside them to apply the styles either.

Using them for your layout frame for the entire page is considered bad, using them for displaying your data is considered perfect.

Forget using css3 to make fake tables, when most users will not be using a decent browser to display it.

8

Hi Felgall,

Thanks for your response. Can you take this one step further? Add some html and the css into it so I can get a more general idea what I have to do here. I’ll also use the z-index to display the table in the for ground as I am stretching the background image.

Thank you

9

Hi John,

Of course. I’ve used tables only a thousand times. I’m new to the css thing and I’m starting to get a good handle on it.

My issue is I am trying to create a CSS table that behaves like a table. To take this a step further, I’ve stretched the background screen and have given it a z-index of -1 with any content having a z-index of 1. Any help would be much apreciated.

Thanks.

10 

<div id="table">
<div id="table-row">
<div id="table-cell">
content
</div></div></div>

display:table/table-row/table-cell appropriately.

11

The only browsers with any significant following that don’t support CSS tables are IE6 and IE7. So it depends on the site as to whether you can use them or not. For example for my site those browsers are only used by 28% of visitors so 72% of visitors would see things correctly if I were to use layout tables (they are not fake tables at all they are the correct way to do layout tables). So for some sites at least most users ARE using a decent browser that supports layout tables.

Anyway we are not talking about CSS3 at all in this as layout tables in CSS are part of the original CSS 2 specification that has been around for years.

12

In fact, you may not need such a uniformed structure. I’d recommend you read up on anonymous table objects for details on how to minimize your table-related markup.

13

He was just asking how to use tables in CSS, and I thought to show him the simple side of things without getting too complicated(my markup should show that. And why go complicated when people are just learning for the first time?) so my example was purely based on showing him how to use the 3 together :). Though that’s a good suggestion for others to read on :). I don’t have any lniks handy James but if you do feel free to post it.

14

It may seem a complicated model if you don’t have any prior experience in it, but I’d argue it’s an integral part of CSS tables and certainly worth learning even at the beginner stage.

[URL=“http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes”]
W3C definition

I’d also recommend looking at one of my previous posts, where I describe the workings of the CSS table model in the context of block formatting contexts.