HTML table help.

How do I make a table look pretty? I'm building a website for a business and they need a table with information in it. I'd like to have the table have just 1 solid 1px grey line instead of the bevel.

Anyone post the code i need?

Theres a few different ways.

You could do it in just HTML:

<table cellpadding="6" cellspacing="1" bgcolor="#000000">
<tr>
<td bgcolor="#ffffff">Text</td>
<td bgcolor="#ffffff">Text</td>
</tr>
</table>

The cellspacing creates a 1px area around each cell, and since you're filling the cells in with white.. it looks like theres a border.

Of course you can do it in XHTML and CSS too.

<table class="border" cellpadding="6" cellspacing="1">
<tr>
<td>Text</td>
<td>Text</td>
</tr>
</table>

.border { background-color: #000000;}
td { background-color: #ffffff; }

.. Just mix and match. Whatevers best for you.

.tableName {
border: 1px solid #ccc;
}

Oh, you mean just one border around the entire table?

Whoops. The first method covers every cell.

I wanted it to cover every cell.

You can also use td { border: 1px solid #CCC; } but that will overlap cells giving some parts a two pixel border. What I do is give certain cells different classes. For example:

.firstCell {
border: 1px solid #CCC;
}
.cells {
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-right: 1px solid #CCC;
}

Of course if you have more than one row you need to take off the top border in the new rows.

And, on the first row cells, add a top border.

Sounds a bit more complicated.

Doing it just with html means you dont have to faff about with borders and stuff. It's just assured tom be 1px all the time.

Why not use a div?

You might like to check out the source for the CSS Table Gallery.