Skip to content Skip to sidebar Skip to footer
Home / Html

Add Borders On

Post a Comment
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 app

Solution 1:

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 --><styletype="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:

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

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

<link href="path/to/.css"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;
}

tbodytrtd:first-child {
    border-left: 2px solid #000;
}

tbodytrtd:last-child {
    border-right: 2px solid #000;
}

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

tbodytr:last-childtd {
    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.

Post a Comment for "Add Borders On "