Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

CSS setup for tables on my webpage

Posted on 2006-07-06
7
Medium Priority
?
287 Views
Last Modified: 2013-12-16
<table border="0" bgcolor="#ffffff" cellpadding="2" cellspacing="3" width="100%">
<tr>
         <td bgcolor="#cccccc">Section Heading</td>
</tr>
<tr>
         <td align="left">Section Sub Heading</td>
</tr>
<tr>
        <td>
         <table border="0" width="100%" cellspacing="0" cellpadding="0">
         <tr>
                  <td><a href="">title</a><a href=""><img src=""></a></td>
                  <td>description</td>
         </tr>
         </table>
         </td>
</tr>
</table>

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

So what I want to do is be able to modify the following elements of the above HTML using CSS.

1.  The background color of the main table
2.  change the background color of the row that has the 'Section Heading'
3.  change the background color of the row that has the 'Section Sub Heading'
4.  change the background color of the inner table

What is the best way to go about this?  Should I use ID's or div's?

Please provide sample CSS that modifies each of the elements.



0
Comment
Question by:EENoob
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 10

Expert Comment

by:jagadeesh_motamarri
ID: 17053320
Well....if your data is a tabular data then don't prefer using CSS.

The intension of using CSS should be somthing like - converting tables using divs.

....But still if you need to conver this table accroding to your specs.....here it is

CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style media="all" type="text/css">

#table{

position:relative;

}

#first{
background-color:#00CCCC;

}

#second{

background-color:#99CC66;


}

#third_1{
width:50%;
float:left;
}

#third_2{
width:50%;
position:relative;

}

</style>
 
</head>

<body>
<table border="0" bgcolor="#ffffff" cellpadding="2" cellspacing="3" width="100%">
<tr>
         <td bgcolor="#cccccc">Section Heading</td>
</tr>
<tr>
         <td align="left">Section Sub Heading</td>
</tr>
<tr>
        <td>
         <table border="0" width="100%" cellspacing="0" cellpadding="0">
         <tr>
                  <td><a href="">title</a><a href=""><img src=""></a></td>
                  <td>description</td>
         </tr>
         </table>
    </td>
</tr>
</table>



 

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<div id="table">
<div id="first">
Section headin
</div>

<div id="second">
Section sub heading
</div>


<div id="third_1">
<a href="">title</a><a href=""><img src=""></a>
</div>


<div id="third_2">
  <p>Description</p>
  </div>

</div>

</body>
</html>


............i've included your code and mine. That will help you to make a difference.

Lemme know if you need to know more abut the css i've used.


____Jags.
0
 

Author Comment

by:EENoob
ID: 17053529
Hi,

Instead of using div's, can I just add an ID to the table?
<table border="0" ID="table1">


then in CSS

table#table1
{
   backgroundcolor: #fffff;
}


>>if your data is a tabular data then don't prefer using CSS.
I'm not sure how correct that statement is.

anyhow, I'm having a hard time being able to reference the 2nd and 3rd <tr>'s......I don't want to make a global change to all the <tr> in my outer table since the 2nd and 3rd row's may have different background colors.
0
 
LVL 10

Expert Comment

by:jagadeesh_motamarri
ID: 17053633
...well I personally don't prefer placing tabular data in division. And even many experts suggest the same. (If the data is many rows and rows.)

The W3C defines class ID as "a unique identifier to an element". if your intention is just to change the backgound color you can directly do that using bgcolor attribute. But if your intention is using stylesheets...u can do it either by class or id. Your above example is for id. You can apply the same property to more than one element (say table) using the class.

URL: http://www.tizag.com/cssT/cssid.php


>>I'm having a hard time being able to reference the 2nd and 3rd <tr>'s......I don't want to make a global change to all the <tr> in my outer table since the 2nd and 3rd row's may have different background colors.

you don't want to make global change to your tr...you can define various styles and use ID to refer them in your tr tags.

Let me know if you need more explanation?

_____Jags.



0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:EENoob
ID: 17053682
Can you give me a sample CSS in the way I want it using ID's or even classes that changes the background color of the outer table, and change the color of the 2nd and 3rd rows each having a different color, and change the background color of the inner table.

that's the solution i'm looking for! thanks!
0
 
LVL 10

Accepted Solution

by:
jagadeesh_motamarri earned 450 total points
ID: 17053827
check out this -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style media="all" type="text/css">

#table{

position:relative;

}

#first{
background-color:#00CCCC;

}

#second{
background-color:#99CC66;
}

#third{
background-color:#0099CC;}


</style>
 
</head>

<body>
<table border="0" cellpadding="2" cellspacing="3" width="100%">
<tr>
         <td id="first">Section Heading</td>
</tr>
<tr>
         <td id="second">Section Sub Heading</td>
</tr>
<tr>
        <td>
         <table border="0" width="100%" cellspacing="0" cellpadding="0">
         <tr id="third">
                  <td><a href="">title</a><a href=""><img src=""></a></td>
                  <td>description</td>
         </tr>
         </table>
    </td>
</tr>
</table>




</body>
</html>


...let me know changes according to this. Did u get a chance to know the difference between using ID and Class in the tags.

____Jags.
0
 

Author Comment

by:EENoob
ID: 17054071
from what I understood, class are good for implementing a style to many elements at the same time.

ID is good for applying a style to a single element?
0
 
LVL 10

Expert Comment

by:jagadeesh_motamarri
ID: 17054092
:-)

Can i know the reason for B Grade.


Thank You,
_____Jags.
0

Featured Post

Get your Disaster Recovery as a Service basics

Disaster Recovery as a Service is one go-to solution that revolutionizes DR planning. Implementing DRaaS could be an efficient process, easily accessible to non-DR experts. Learn about monitoring, testing, executing failovers and failbacks to ensure a "healthy" DR environment.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

618 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question