SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    Illinois
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Table Borders & Colors with CSS

    I have been trying to use css to set the border, colors, backgrounds and positions of my tables. This is the code I've been trying in Internet Explorer.
    However it doesn't do anything in fact it it doesn't show a border at all? Anyone have any suggestions? Thanks Jodi

    <html>
    <head>
    <title>Tables Test</title>
    <style type="text/css">

    table

    {
    border-color: red;
    border-width: medium;
    }

    </style>
    </head>
    <table>
    <tr>
    <td>1st Line</td>
    <td>1st Line</td>
    <td>1st Line</td>
    <td>1st Line</td>
    </tr>
    <tr>
    <td>2nd Line</td>
    <td>2nd Line</td>
    <td>2nd Line</td>
    <td>2nd Line</td>
    </tr>
    </table>
    </html>

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    set cellspacing="0" to 5 and see how the examples work

    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>
    	<title>12345 12345 12345 12345 12345 </title>
    	<style type="text/css">
    	body{
    	background:#f5deb3;
    	}
    	.divtba,.divtbb{
    	position:absolute;
    	top:10px;
    	left:10px;
    	}
    	.divtbb{
    	left:300px;
    	}
    	table{
    	background-color:#ffffcc;
    	}
    	td,th{
    	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color:#808000;
    	font-size:10px;
    	font-style: italic;
    	padding: 5px;
    	text-align: left;
    	vertical-align:bottom;
    	border-color: #39c;
    	border-width: 1px 1px 0 0;
    	border-style: solid; 
    	}
    	.hia{height:20px;}
    	.hib{height:30px;}
    	.hic{height:40px;}
    	
    	th{
    	font-size:12px;
    	color:#000000;
    	font-weight:900;
    	}
    	.cb,.cc,.cd{
    	border-width: 1px 1px 1px 0;
    	}
    	.h,.a,.b{
    	border-width: 1px 1px 0 1px;
    	}
    	.c{
    	border-width: 1px 1px 1px 1px;
    	}
    	.ac{
    	border-color: #ff0000 #ff0000;
    	}
    	.bc{
    	border-color: #ff0000 #09c;
    	}
    	.ab{
    	border-color: #09c #ff0000;
    	}
    	.b,.cd,.hc{
    	background-color: #f4a460;
    	color: #ffffff;
    	} /* */
    	table#pricesx{
    	background-color:#39c;
    	
    	}
    	#pricesx td, #pricesx th{
    	color:#000000;
    	border-width: 0 0 0 0;
    	background-color:#ffffcc;
    	}
    	#pricesx th{
    	color:#000000;
    	}
    </style>
    </head>
    <body>
    <div class="divtba">
    <table cellspacing="0" id="prices">
    <tr>
    <th class="h">12345</th>
    <th class="hb">12345</th>
    <th class="hc">12345</th>
    <th class="hd">12345</th>
    </tr>
    <tr >
    <td class="a hia">12345</td>
    <td class="ab">12345</td>
    <td class="ac">12345</td>
    <td class="ad">12345</td>
    </tr>
    <tr>
    <td class="b hib">12345</td>
    <td class="bb">12345</td>
    <td class="bc">12345</td>
    <td class="bd">12345</td>
    </tr>
    <tr>
    <td class="c hic">12345</td>
    <td class="cb">12345</td>
    <td class="cc">12345</td>
    <td class="cd">12345</td>
    </tr>
    </table>
    </div>
    <div class="divtbb">
    <table cellspacing="1" id="pricesx">
    <tr>
    <th>12345</th>
    <th>12345</th>
    <th>12345</th>
    <th>12345</th>
    </tr>
    <tr>
    <td class="hia">12345</td>
    <td>12345</td>
    <td>12345</td>
    <td>12345</td>
    </tr>
    <tr>
    <td class="hib">12345</td>
    <td>12345</td>
    <td>12345</td>
    <td>12345</td>
    </tr>
    <tr>
    <td class="hic">12345</td>
    <td>12345</td>
    <td>12345</td>
    <td>12345</td>
    </tr>
    </table>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    Illinois
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    all4nerds, changing the cellspacing to 5 didn't seem to work, It just made it bigger, but no borders. I tryed the exapmle you gave me though and it works, thank you I will study this.

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Sorry, change cellspacing to 5 in my examples

  5. #5
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    Illinois
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, ok, I wasn't sure which one you meant.
    Thanks

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2002
    Location
    Mississippi
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    add
    border-style: solid;
    to your css code, and it should come out fine, if not let me know
    Derrick
    Creativity is great, but plagiarism is faster!

  7. #7
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    Illinois
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Meldryn,

    It works thanks for the advice.


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
  •