www.webdeveloper.com
Results 1 to 2 of 2

Thread: Applying style to Table and TD using CSS

  1. #1
    Join Date
    Apr 2008
    Posts
    84

    Applying style to Table and TD using CSS

    I am applying style to table and td elements border properties are not working. I have declared a class "subheadtd" and applying properties to this class, except text-align other properties are not working. How to apply volor and border properties ?

    Please let me know, whats not working in following code.
    Code:
    <html>
    	<head>
    		<title>Assignment 8 - Trial 2 - With Tables</title>
    		<style>
    			#mainheading{
    				width:60%;
    				height:100px;
    				background-color:#0022ff;
    				border:1;
    				text-align:left;
    				color:#990000;
    			}
    			#maintd{
    				color:#005500;
    			}
    			#subheading{
    				width:60%;
    				height:50px;
    				background-color:#0011ee;
    				border-width:1px;
    				text-align:left;
    				border-color:#333333;
    				border-spacing:2px;
    			}
    			.subheadtd{
    				border:thin red;
    				color:#330000;
    				margin:2px;
    				size:10;
    				text-align:center;
    			}
    
    			#maincontent{
    				width:40%;
    
    				background-color:#00eeff;
    				border:1;
    				text-align:justify;
    				color:#667700;
    				float:left;
    			}
    			.paraheading{
    				color:0077bb;
    				font-size:30px;
    			}
    
    			#sidebar{
    				width:20%;
    				align:right;
    				background-color:#00ffaa;
    				border:1;
    				text-align:justify;
    				color:#667700;
    			}
    
    		</style>
    
    	</head>
    	<body>
    		<table id=mainheading><tr><td id=maintd><h1><big>SiliconIndia</big></h1></td></tr></table>
    
    		<table id=subheading><tr><td class=subheadtd>Home</td><td class=subheadtd>Style Demo</td><td class=subheadtd>Downloads</td><td class=subheadtd>Services</td><td class=subheadtd>Support</td><td class=subheadtd>About</td></tr></table>
    
    		<table id=maincontent>
    				<tr> <td>
    					<strong class=paraheading>Read Me First</strong><hr />
    					filed under <a href=#>templates, internet</a><br /><br />
    
    					<p>
    					CoolBlue is a free website template by styleshout.com. This work is released and licensed under the Creative Commons Attribution 3.0 License, which means that you are free to use and modify it for any personal or commercial purpose. All I ask is that you give me credit by including a link back to my website.</p>
    
    				 	<p>You can find more of my free template designs at my website. For premium commercial designs, you can check out Themeforest.</p>
    				</td> </tr>
    
    				<tr> <td>
    					<strong class=paraheading>Lorem Tellus Eleifend Magna</strong><hr />
    					filed under templates, <a href=#>internet</a><br /><br />
    
    
    					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo.</p>
    
    					<p>Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo.</p>
    				</td> </tr>
    
    				<tr> <td>
    					<strong class=paraheading>Lorem Ipsum Dolor Sit Amet</strong><hr />
    					Filed under <a href=#>templates, internet</a><br /><br />
    
    					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo.</p>
    
    					<p>Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo.</p>
    				</td> </tr>
    		</table>
    
    
    		<table id=sidebar>
    
    				<tr><th>Home</th></tr>
    				<tr><td>TemplateInfo</td></tr>
    				<tr><td>Style Demo</td></tr>
    				<tr><td>Blog</td></tr>
    				<tr><td>Archives</td></tr>
    				<tr><td>Web Templates</td></tr>
    
    		 	<tr><th>Sponsors</th></tr>
    
    				<tr><td>Themeforest Site Templates, Web & CMS Themes</td></tr>
    				<tr><td>4Templates Low Cost High-Quality Templates</td></tr>
    				<tr><td>Templatemonster Delivering the Best Templates on the Net</td></tr>
    				<tr><td>Graphic River Awesome Stock Graphics</td></tr>
    				<tr><td>Dreamhost Premium Webhosting. Use the promocode sshout and save 50 USD</td></tr>
    
    			<tr><th>Most Popular</th></tr>
    
    				<tr><td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td></tr>
    				<tr><td>Cras fringilla magna. Phasellus suscipit</td></tr>
    				<tr><td>Morbi tincidunt, orci ac convallis aliquam</td></tr>
    				<tr><td>Ipsum dolor sit amet, consectetuer adipiscing elit</td></tr>
    				<tr><td>Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem</td></tr>
        	</table>
    
    		<table>Bottom table</table>
    	</body>
    </html>

  2. #2
    Join Date
    Dec 2002
    Location
    US
    Posts
    128
    Here's how to apply table styling with css.

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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles