SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist anjanesh's Avatar
    Join Date
    Jun 2004
    Location
    Mumbai
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Table Grid in xHTML 1.1

    <table border="1"> will have the grid shown.

    How do I do this in xHTML 1.1 without having to write border-top for every <td> cell ?

    <table style="border:1px solid black"> draws only table outline.

    Anyway to draw the grid ?

    Thanks
    Anjanesh

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    something like

    table {
    border:1px groove black;
    }
    td {
    border:1px groove black;
    }

    in your css file. other border styles to experiment with (in place of groove) are

    dotted dashed solid double groove ridge inset outset

    Steve

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

    border / border colors with css in first and second table make the cellspacing="5" and see how it works

    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>


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
  •