SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot vargz's Avatar
    Join Date
    Apr 2003
    Location
    South Australia
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    borders around cells

    In bacic HTML, you apply a size 1 border on a table and it applies it around the border and the divisions between cells. I am simply trying to achieve the same effect in CSS.

    I apply the following style...

    Code:
    .vinborder
    {
    border-style: solid;
    border-width: 1px;
    border-color: #006666;
    }

    ... to a table and it correctly applies a 1px, green border to the table.

    My question is, how do I apply the same border appearance to the divisions between the cells within the table?? If I apply vinborder to each cell, it makes the divisons between cells thicker than the table border. Is there an easier way than having to create new styles for each cell?!

    Hope that makes sense

    Cheers

  2. #2
    SitePoint Evangelist
    Join Date
    Mar 2003
    Location
    Melbourne, Australia
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i don't know
    maybe you could try using as your style name
    td instead of .vinborder
    this will mean any cell will have that style applied to it
    makes things less flexible but less work if everything
    needs to look the same

  3. #3
    SitePoint Zealot vargz's Avatar
    Join Date
    Apr 2003
    Location
    South Australia
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    do you mean to use td.vinborder and use <td class="vinborder">... when I want to apply the style?

    Will try that out...

    I think if I use td by itself, it'll apply the style to all tables - something I don't want!

    cheers

  4. #4
    SitePoint Zealot vargz's Avatar
    Join Date
    Apr 2003
    Location
    South Australia
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's an example of what I want to achieve...look at the table two-thirds down this page:

    http://www.w3schools.com/css/css_border.asp

    I think the table/cell borders in the above page were done in HTML. I'm trying to use CSS as much as possible, therefore was wondering if there was a way to achieve the same border effect without going down the HTML road...

    Cheers

  5. #5
    Non-Member mmi's Avatar
    Join Date
    Jun 2001
    Location
    Rhode Island
    Posts
    587
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vargz
    I think the table/cell borders in the above page were done in HTML.
    hey vargz - I'm not sure, but it looks like the style here is controlled by http://www.w3schools.com//stdtheme.css

    the only reference I see to borders is:

    table.right
    {
    color:#000000;
    background-color:#ffffff;
    border:2px ridge;
    margin-bottom:2px;
    }

  6. #6
    SitePoint Zealot vargz's Avatar
    Join Date
    Apr 2003
    Location
    South Australia
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey mmi, if you view the source on this page you will find the tag for the table is actually:

    <TABLE class=ex cellSpacing=0 cellPadding=3 width="100%" border=1> ...

    where as the class it refers to ex, is simply this style:

    TABLE.ex {
    FONT-SIZE: 100%; COLOR: #000000; BACKGROUND-COLOR: #f1f1f1
    }

    Anyway, I'll still experimenting. Have tried a 1px for the table, 0.5 px for the cells, but I get the idea that CSS doesn't support 0.5px borders.

    For now i'm using border=1 but it certainly doesn't look as good as a solid, 1px border achieved using CSS

    Cheers

  7. #7
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've made the borders wider so you can see what's going on more clearly.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    	<title>Untitled</title>
    	<style type="text/css">
    
    	table.bordered {
    	border-style: solid;
    	border-width: 4px;
    	border-top-color: #999;
    	border-right-color: #999;
    	border-bottom-color: #ccc;
    	border-left-color: #ccc;
    	}
    
    	table.bordered td {
    	border-style: solid;
    	border-width: 4px;
    	border-top-color: #ccc;
    	border-right-color: #ccc;
    	border-bottom-color: #999;
    	border-left-color: #999;
    	text-align: center;
    	width: 50px;
    	height: 50px;
    	}
    
    	</style>
    </head>
    <body>
    <table cellpadding="0" cellspacing="0" class="bordered">
    	<tr>
    		<td>1</td>
    		<td>2</td>
    		<td>3</td>
    		<td>4</td>
    		<td>5</td>
    		<td>6</td>
    		<td>7</td>
    	</tr>
    	<tr>
    		<td>8</td>
    		<td>9</td>
    		<td>10</td>
    		<td>11</td>
    		<td>12</td>
    		<td>13</td>
    		<td>14</td>
    	</tr>
    	<tr>
    		<td>15</td>
    		<td>16</td>
    		<td>17</td>
    		<td>18</td>
    		<td>19</td>
    		<td>20</td>
    		<td>21</td>
    	</tr>
    </table>
    </body>
    </html>
    Is this what you're after?
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  8. #8
    Non-Member mmi's Avatar
    Join Date
    Jun 2001
    Location
    Rhode Island
    Posts
    587
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs down criminal.ElementById

    hey - sorry [img]images/smilies/redface.gif[/img] - couldn't decide which was the "table two-thirds down this page" - I guess ya mean the one containing "Border Properties:"
    For now i'm using border=1 but it certainly doesn't look as good as a solid, 1px border achieved using CSS [img]images/smilies/frown.gif[/img]
    so yer saying the border is thicker than you want it, and yer figuring it's because there's a border being applied to both the table and the cell?

    sorry if I'm being daft here - I suppose mmy advice would be to simply use HTML, but I understand yer curiosity regarding a means to achieve this with CSS
    ==========
    darn that Bill Posters!! - when's he gonna be prosecuted, anyway? [img]images/smilies/mad.gif[/img] [img]images/smilies/wink.gif[/img]

  9. #9
    SitePoint Zealot vargz's Avatar
    Join Date
    Apr 2003
    Location
    South Australia
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Woaah!!... that is awesome Bill exactly what I was after. Thanks so much!

    I think the vital style details I was missing were the different colours for the edges. Certainly makes a difference. Amazing stuff!...Works fine at 1 px as well.....

    Thanks for your feedback to MMI, got my brain ticking

    cheers ppl

  10. #10
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem, vargz.

    Fwiw, the border css can be reduced even further by declaring it all in a single shorthand declaration then simply overuling certain parts with two specific declarations for the highlight colours of the other two sides.

    Code:
    table.bordered {
    border: 4px solid #999;
    border-bottom-color: #ccc;
    border-left-color: #ccc;
    }
    
    table.bordered td {
    border: 4px solid #ccc;
    border-bottom-color: #999;
    border-left-color: #999;
    width: 50px;
    height: 50px;
    }
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  11. #11
    SitePoint Zealot vargz's Avatar
    Join Date
    Apr 2003
    Location
    South Australia
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool! You've taught me a few new tricks today, Bill

    This is what I've been trying to achieve all afternoon, having tinkered with your code:

    Code:
    table.bordered {
    	border: 1px solid #ccc;
    	border-top-style: hidden;
    	border-right-style: hidden;
    }
    
    table.bordered td {
    	border: 1px solid #ccc;
    	border-bottom-style: hidden;
    	border-left-style: hidden;
    }
    A simple 1px border for the table and the cells within it...sweet!

    BTW, I like the "bevelled" border effect you posted initially, very nice. Will certainly keep that one up my sleeve

    Thanks again

  12. #12
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's the definitive (future) solution for the 1px box grid (c/o The latest SitePoint Tech Times newsletter).
    Support isn't universal for this one yet, but it's worth keeping in your toolbox for future reference.

    Code:
    table {
       border-collapse: collapse;
    }
    td, th {
       border: 1px solid #000;
    }
    Supported by:
    IEWin 5.5+, NN6+, Moz (incl. Camino, ...)

    Not yet supported (correctly) by:
    IEMac, Opera


    More info about the border-collapse attribute:
    http://www.blooberry.com/indexdot/cs.../bcollapse.htm
    http://www.w3.org/TR/REC-CSS2/tables...apsing-borders

    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •