SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Dec 2005
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    design table through CSS

    hello everyone, i m new to this forum and in web designing. i want to design a table using css. please help me.

    here is the code:

    <table width="100%" border="1" bordercolor="#000000">
    <tr>
    <td><table width="100%" border="0">
    <tr>
    <td width="100" rowspan="3"><img src="images/lattezone.jpg" width="100" height="90" border="0" /></td>
    <td colspan="2" bgcolor="#0000FF">&nbsp;Lattezone</td>
    </tr>
    <tr>
    <td colspan="2" bgcolor="F5F7F7">Al-Farah believe that you shouldn't have to sacrifice fashion and style for modesty. There goal is to provide you with modern, modest and stylish fashions that preserve the Islamic identity. They sincerely hope that you are pleased with their contribution to Islamic fashion. </td>
    </tr>
    <tr>

    <td bgcolor="F5F7F7"><img src="images/request.gif" width="179" height="30" border="0" /></td>
    </tr>
    </table></td>
    </tr>
    </table>

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

    full table with CSS

    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:center; /*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;}
    	table{font-size:1em;}
    	
    	caption,table,th,td{
    	border-color:#0099cc;
    	border-style:solid;
    	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size:1em;
    	color:#000000;
    	}
    	
    	th,td{padding:.5em;}
    	
    	caption{background:#9999ff;border-width:.1em .1em 0 .1em;font-weight:600;padding-top:.7em;padding-bottom:.3em;}
    	
    	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;}
    	
    	col.a{background:#ffccff;text-align:right;width:20%;}
    	col.b{background:#99ccff;text-align:left;width:40%;}
    	col.c{background:#ccffff;text-align:center;width:20%;}
    	
    	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
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Although all4nerds beat me to this (again) I'll post what i've done anyway lol

    I wasn't sure if you wanted a table that was styled with css or a css version with no table.

    So I did both

    http://www.pmob.co.uk/temp/tabledemo2.htm

    Hope it helps anyway even if it is too late

  4. #4
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    Although all4nerds beat me to this (again) I'll post what i've done anyway lol
    Thanks for posting that Paul. I've been meaning to redo my Photo Album without using tables, and what you posted was exactly the layout I need.

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

    a table with CSS ?
    with CSS like a Table ??
    a CSS Table ???
    Last edited by all4nerds; Jan 27, 2006 at 09:54.

  6. #6
    Non-Member jake4974's Avatar
    Join Date
    Jan 2006
    Location
    Down the road, it's where I'll always be
    Posts
    357
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    You know, somehow I don't think I've ever seen them side by side like that before. The "Oh so much less code with CSS" was largely abstract 'til just now, and the difference is shocking, even when you expect it.


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
  •