4

In another post I read that if I need to add borders to every row except the header row I should use THEAD & TBODY. So I have added it to the page, but I cannot find how to apply it to the TBODY. I am a newbie so bear with me. I can put borders around the entire table, but need to exclude the header row. Here is a copy of a table with the border attributes in the TABLE tag where it works fine. 

<table width="300" BORDER=1 CELLPADDING=3 CELLSPACING=1 RULES=ROWS FRAME=BOX>
              <thead>
                <tr>
                    <th width="60" align="center" valign="top" scope="col">Type</th>
                    <th width="200" align="left" valign="top" scope="col">Address</th>
                </tr>
              </thead>
    <tbody>
                <tr>
                    <td align="center" valign="top">Shipping</td>
                    <td align="left" valign="top">123 Main St</td>
                </tr>
    </tbody>
</table>

Any help is appreciated.

Paul H
  • 49
  • 1
  • 1
  • 2

1 Answers1

17

You should use CSS for presentation/styling:

tbody {
    border: 1px solid #ccc;
}

JS Fiddle demo.

I'm not sure how new you are, but for completeness:

<head>
    <!-- other stuff -->
    <style type="text/css">

        tbody {
            border: 1px solid #ccc;
        }

    </style>
    <!-- other stuff -->
</head>

You could also use inline styles in the element's opening tag, for example:

<tbody style="border: 1px solid #ccc;">

Preferably, though, you'd link to an external stylesheet, this goes into the head of the document:

<link href="path/to/stylesheet.css" rel="stylesheet" type="text/css" />

Or, if you're targeting those browsers that don't offer the option to style the tbody with a border, you can target specific cells within the tbody using the following:

table {
    margin: 0;
    border-spacing: 0;
}

tbody tr td:first-child {
    border-left: 2px solid #000;
}

tbody tr td:last-child {
    border-right: 2px solid #000;
}

tbody tr:first-child td {
    border-top: 2px solid #000;
}

tbody tr:last-child td {
    border-bottom: 2px solid #000;
}

JS Fiddle demo.

This does, of course, require a browser that understands and implements the :last-child and :first-child pseudo-classes.

David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • Adding the above to my stylesheet does not change anything. Does it need to be applied is some other way in the code? – Paul H Jul 15 '11 at 21:00
  • As I said before "Adding the above to my stylesheet does not change anything." There is already a working ext stylesheet. Also, the inline style does nothing either? – Paul H Jul 15 '11 at 21:23
  • Does the linked [JS Fiddle demo](http://jsfiddle.net/davidThomas/ghSkp/) do anything? How about if you strip out all the inline styles (the `BORDER=1 CELLPADDING=3 CELLSPACING=1 RULES=ROWS FRAME=BOX`, and also try quoting your attribute-values, to give `BORDER="1" CELLPADDING="3" CELLSPACING="1" RULES="ROWS" FRAME="BOX"`)? – David Thomas Jul 15 '11 at 22:08
  • The inline style was test, I removed it at that time. Taking the quotes out did not change anything. It's still the same, if I apply the above parameters to the tag everything is fine, but putting it on has not effect. Also, my page has php in it, is that causing a problem.
     – Paul H Jul 18 '11 at 17:18
  • have you tried to play with some of the other css elements related to tbody that could be set by default to hide the border. I'm not saying this is the answer to your question but I am sure some of the following would give you a hint of what's going on. border: 1px solid #FFF; border-color: #FFF; border-collapse: separate; border-spacing: 2px; display: block; – Khalid Apr 09 '13 at 04:08
  • I had the same issue; `border-collapse: collapse;` helped. – Ms2ger Dec 16 '13 at 15:04
  • Thanks @DavidThomas for the code for browsers that don't border tbody tags! I needed to enclose both th and td in the border, so my selectors needed to use the wildcard tag and restrict to children: `tbody tr:first-child > * {...}` – David Brown Jun 27 '14 at 04:08
  • The default CSS styling for a `tbody` is `table-row-group` which I suspect means it doesn't display at all, merely influences the browser as it displays `tr`. – Jesse Chisholm Aug 27 '15 at 03:43