SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Manipulating table elements using CSS

    Hi there,

    I have never styled tables using CSS before, so this is a complete first.

    I am part coding my website in ASP and have the following output. I was told in the ASP forum that instead of response.writing a table with elements outputted I was best off giving them a class and manipulating the elements using CSS.

    Basically I would like a table incorporating an 8x4 grid (32 cells I have 32 images to place inside these cells).

    My ASP code is below:-


    Response.Write ("<table class=image_table>")
    Response.Write ("<tr>")
    Response.Write ("<td class=image_cell><a href=""products.asp?Country=" & rsproducts("country") & """><img src=" & rsproducts("Thumb") & ">")
    Response.Write ("</td>")
    Response.Write ("</tr>"

    ------------------------

    you will notice that I have response.writed a td class and a table class. My CSS is below:-

    table.image_table{width:800px;}
    td.images_cell{width:110px;}

    ---------------

    Now from here, I don't have a clue as to how to specify that I would like an 8x4 grid.

    Any ideas or advice on how to accomplish this would be greatly appreciated.

    Kind Regards

    James

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

    table with css, as you can see the html is very clean, write the table with ASP

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>An example of tables with CSS</title>
    	<style type="text/css">
    	<!-- 
    	html,body{/*html for FF Moz NS7 OP */
    	text-align:ce nter; /*IE 5 IE 5.5*/
    	margin:0;/* no margins body */
    	padding:0;/* no padding body */
    	height:100%;
    	width:100%;
    	}
    	
    	body{font-size:.75em;background:#ccccff;}
    
    	
    	.tbla caption,.tbla,.tbla th,.tbla td{
    	border-color:#0099cc;
    	border-style:solid;
    	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size:1em;
    	color:#000000;
    	}
    	
    	.tbla th,.tbla td{padding:.5em;}
    	
    	.tbla caption{background:#9999ff;border-width:.1em .1em 0 .1em;font-weight:600;padding-top:.7em;padding-bottom:.3em;}
    	
    	.tbla th{text-align:center;font-weight:600;font-style:italic;}
    	
    	.tbla {width:64em;border-width:.1em 0 .1em .1em;}
    	.tbla td{border-width:.1em .1em 0 0;font-style:italic;}
    	.tbla th{border-width:0px .1em 0 0;}
    	
    	.tbla col.a{background:#ffccff;text-align:right;width:33.3%;}
    	.tbla col.b{background:#99ccff;text-align:left;width:33.3%;}
    	.tbla col.c{background:#ccffff;text-align:center;width:33.3%;}
    	
    	head+body .tbla tr td {background:#ffccff;text-align:right;}
    	head+body .tbla tr td + td {background:#99ccff;text-align:left;}
    	head+body .tbla tr td + td + td {background:#ccffff;text-align:center;}
    	
    	.x{float:left;position:relative;top:0;left:50%;width:64em;margin-left:-32em;margin-top:1em;}
    	 -->
    	</style>
    	<!--[if IE]>
    	<style type="text/css">
    	.x{display:inline;}
    	</style>
    	<![endif]-->
    </head>
    <body>
    <div class="x">
    
    <table cellspacing="0" summary="aa" class="tbla">
    <caption>table</caption>
    <col class="a"><col class="b"><col class="c">
    <thead>
    <tr>
    <th>one</th>
    <th>two</th>
    <th>three</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    </tr>
    <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    </tr>
    <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    </tr>
    <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    </tr>
    <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    </tr>
    <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    </tr>
    </tbody>
    </table>
    </div>
    
    </body>
    </html>

  3. #3
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help all4nerds. I have done it another way and used divs instead of tables and it is looking good so far

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

    div's for tubular data

    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" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	html,body{/*html for FF Moz NS7 OP */
    	text-align:center; /*IE 5 IE 5.5*/
    	margin:0;/* no margins body */
    	padding:0;/* no padding body */
    	}
    	
    	body{font-size:75%;background:#ccccff;}
    
    	.au div *,.au h1{
    	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
    	font-size:1em;
    	color:#000000;
    	margin:0;
    	padding:0;
    	line-height:1.5em
    	}
    	
    	.au{margin:1em auto;width:759px;border-bottom:1px solid #0099cc;border-right:1px solid #0099cc;/*background:#779A96;*/}
    	
    	head+body .au div,head+body .au h1{width:100%;overflow:hidden;min-height:2.1em;}
    	* html .au p,* html .au h1{width:100%;height:1.7em;}
    	
    	.au div,.au h1{border-top:1px solid #0099cc;}
    	.au div{background:#ff6600;}
    	.au h1{border-left:1px solid #0099cc;padding:6px 0 2px 0;margin:0;background:#9999ff;text-align:center;}
    	
    	.au div p,.au div b,.au div i{float:left;width:242px;border-left:1px solid #0099cc;padding:5px 5px 0 5px;margin:0;font-style:italic;}
    	
    	p{background:#ffccff;text-align:right;}
    	b{background:#99ccff;font-weight:400;text-align:left;}
    	i{background:#ccffff;text-align:center;}
    	
    	.b p,.b b,.b i{font-weight:900;text-align:center;font-style:normal;}
    	
    	head+body .au div *:after{
    	content: ".";
    	display:block;
    	background:inherit;
    	height:0;
    	margin-bottom:-32767px;
    	padding-top:32767px;
    	border-left:1px solid #0099cc;
    	margin-left:-6px;
    	width:252px;
    	}
    	
    	head+body .au div:after{
    	content: "."; 
    	display: block; 
    	height:0; 
    	clear: both; 
    	visibility: hidden;
    	}
    	
    	</style>
    	<!--[if IE]>
    	<style type="text/css">
    	* html .au div p,* html .au div b,* html .au div 1{width:252;}
    	* html .au div p,* html .au div b,* html .au div i{w\idth:242px;}
    	* html .au div p,* html .au div b,* html .au div i{padding-bottom:32767px;margin-bottom:-32767px;}
    	* html .au div{height:2em;}
    	</style>
    	<![endif]-->
    </head>
    <body>
    
    
    <div class="au">
    <h1>table</h1>
    <div class="b">
    <p>one</p><b>two</b><i>three</i>
    </div>
    
    <div>
    <p>one</p><b>two</b><i>three</i>
    </div>
    
    <div>
    <p>one</p><b>two</b><i>three</i>
    </div>
    
    <div>
    <p>one</p><b>two</b><i>three</i>
    </div>
    
    
    <div>
    <p>one</p><b>two</b><i>three</i>
    </div>
    
    <div>
    <p>one</p><b>two</b><i>three</i>
    </div>
    
    <div>
    <p>one</p><b>two</b><i>three</i>
    </div>
    
    </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
  •