Click to See Complete Forum and Search --> : A simple question regading table borders


bvbhavsar
08-12-2005, 11:52 AM
I am trying to create some styles for table with solid 1px black border around the table (the normal table border) and the
I should look like a grid.

I want to make it possible with the least number of possible styles.
<table class="grid">
<tr class="light">
<td>tr1 td1</td>
<td>tr1 td2</td>
</tr>
<tr class="dark">
<td>tr2 td1</td>
<td>tr2 td2</td>
</tr>
</table>

"light" and "dark" are classes used to color the rows accordingly.

Don't laught at me but I have spent days to find a good solution for this. I have separate classes for the leftmost td and something like this :(

please help this poor java programmer with no knowledge of css

silverbullet24
08-12-2005, 01:15 PM
do you have any css written that you can post?

to give your border to class grid, just do something like

.grid { border=1px solid black; }

do you want borders around the table itself, the rows, or the cells?

NogDog
08-12-2005, 02:57 PM
Is this what you're looking for?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Page title</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 1em;
font: medium arial, helvetica, sans-serif;
background-color: white;
color: black;
}
.grid {
border-collapse: collapse;
border: solid 1px black;
}
.grid td {
border: solid 1px black;
padding: 2px 5px
}
.light {
background-color: #eee;
}
.dark {
background-color: #ccc;
}
-->
</style>
</head>
<body>

<table class="grid">
<tr class="light">
<td>tr1 td1</td>
<td>tr1 td2</td>
</tr>
<tr class="dark">
<td>tr2 td1</td>
<td>tr2 td2</td>
</tr>
</table>

</body>
</html>

bvbhavsar
08-15-2005, 09:15 AM
Thanks a lot Charles!:)
This is exactly the thing I was looking for. You won't believe but I spent days for it.
I downloaded hell lot of CSS editors but it didn't help.

btw, the font size is still bigger in firefox. IE renders it properly.