how do I make a table with gridlines in CSS?

[partha]

I want to make a table with gridlines around the cells like in plain old html, but I want to spice it up with some CSS styling. Is there a way to do this CSS? do I just use the old <table> tags or what?

[BonRouge]

If you need to make a table for tabular data, then make a table with table tags, but don't add all the presentational mark-up - all that 'bgcolor="#000000" kind of stuff, and don't use width="400" or height="500" or whatever. Do all that with css.

It's simple enough - if it's only one table, all you need to do is use the tag names in your css.
eg.

table {
width: 400px;
height: 500px;
background-color: black;
]
td {
border:1px solid red;
}

Stuff like that.

I hope this helps.

[partha]

thanks that works, but if the table cell has nothing in it, then it is not displayed. I'm trying to make a table grid with nothing in it, for a user to print and fill in by hand for mailing.

Is that possible with CSS?

[BonRouge]

I just tried that out to see what you meant, and the cells display in Firefox, but of course, not in IE. I thought that the right answer would be to use this :

empty-cells:show;

but when I tried that, there was no change, so, all I can tell you is a cheap hack - put spaces in the cells. &nbsp; - that kind of space. I know this works.

[dcrombie]

You could try something like this:

TABLE { 
 border-collapse: collapse; 
 border: 2px solid; 
}

TD { 
 border-width: 1px; 
 border-style: solid dotted; 
}

;)

[badams1]

could you not just put a space ( &nbsp; ) in the cell?

That is what I do with my empty cells anyways.

[ahmedtheking]

Or...

You can be super clever and read the W3C article that shows you how to make CSS tables without the <table> tag!

[w3.org...]