format table borders through CSS

amc · July 9th, 2004, 04:49 PM

I would like to have a table drawn with external border (one for the whole table) and one between each row (so, NO border between columns)

How is it to be done in CSS? Is it the table that has to be assigned the proper CCS style?

thanks
antonio

Imar · July 9th, 2004, 05:37 PM

Hi amc,

You can give the entire table a border, except for the bottom line. Then you can give each row a bottom border. Since you can't apply the border to the row, you'll have to apply it to individual cells. To make that work nicely, set cellpadding and cellspacing for the table to 0. The following example will show you what I mean:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" 
        content="text/html; charset=iso-8859-1" />
    <title>Table With Row Lines</title>
    <style type="text/css">
        table
        {
            border: 1px solid black;
            border-bottom: 0;
        }
        td
        {
            border-bottom: 1px solid black;
        }
    </style>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
<tr>
  <td>4</td>
  <td>5</td>
  <td>6</td>
</tr>
<tr>
  <td>7</td>
  <td>8</td>
  <td>9</td>
</tr>
</table>
</body>
</html>

Hope this helps,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: Laichzeit by Rammstein (Track 10 from the album: Herzeleid) What's This?

amc · July 14th, 2004, 03:53 PM

thanks, I will try.

In the meanwhile, I have found (in chapter 17 of CSS2 spec), an elegant way to define borders related to full-rows. It use a clause called rules, that works in HTML 4.0....

My IE (6.0.28) doesn't seem to recognise that word. Does someone know :

1) how to check what version of HTML does a IE recognises?
2) if IE 6 handles that, how to use it in a CSS?

thanks
antonio

Imar · July 14th, 2004, 04:20 PM

Rules *is* supported in IE; but it will apply to the HTML border, not the CSS border.

The following will display an HTML table, with 3 rows, and no lines between the columns

Code:

<table width="100%"  border="1" rules="rows">
<tr>
  <td>1</td>
  <td>4</td>
  <td>7</td>
</tr>
<tr>
  <td>2</td>
  <td>5</td>
  <td>8</td>
</tr>
<tr>
  <td>3</td>
  <td>dvdvdv</td>
  <td>9</td>
</tr>
</table>

If you want to know what features are supported in IE, take a look here:

http://msdn.microsoft.com/library/de...asp?frame=true

Cheers,

Imar

---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: Undone - The Sweater Song (weezer cover) by Sonic Youth (From the album: Various) What's This?

amc · July 15th, 2004, 01:24 AM

This is it!! So I tried to apply things to CSS, wrongly

I have limited knowledge of both html and CSS (I use just to make my simple, static webpage), so I easily enter intro trouble

thanks for your help

thanks
antonio

Imar · July 15th, 2004, 12:52 PM

You're welcome; glad it's working.

Learning (X)HTML and CSS in all their details is not always easy. The W3C site (http://www.w3.org) and the link I posted earlier will help you understand the "rules" (no pun intended) of Web design with XHTML and CSS.

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: Stop Whispering by Radiohead (Track 4 from the album: Pablo Honey) What's This?

amc · August 28th, 2004, 06:43 AM

I checked the http://msdn.microsoft.com/library/de...es/rules_0.asp

to gain better understanding. Now I wonder if it is possible to draw borders in ONE cell, just one cell...

thanks

thanks
antonio

Imar · August 28th, 2004, 10:19 AM

Hi Antonio,

I don't think you can do that with the Rule property. However, you can use CSS to achieve the desired effect. You can use border (to influence all borders at once), or border-left -top -bottom and -right to set individual borders:

Code:

<table>
<tr>
  <td style="border: 1px solid black;">
    This celll has a black
    border around it.
  </td>
  <td style="border-left: 1px solid red;border-right: 1px solid green;">
    This celll has a red border on the left
    and a green border on the right.
  </td>
</tr>
</table>

HtH,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.