CODEWITHSUNDEEP
css
tnt
tnt

Reputation: 3591

How to change internal table properties

If I want to treat the properties of a table imbedded in a cell differently than the outer table, what is required. I am new to CSS and do not have a handle on the cascading effect. A boiled downed example of my attempt is as follows:

<body>
<table><link rel="stylesheet" type="text/css" href="OuterTable.css">
    <tr><th>Col1</th><th>Col2</th></tr>
    <tr>
    <td>
        <table><link rel="stylesheet" type="text/css" href="InnerTable.css"><tr><th>InsideColA1</th><th>InsideColA2</th></tr></table>
    </td>
    <td>
            <table><tr><th>InsideColB1</th><th>InsideColB2</th></tr></table>
    </td>
    </tr>            
</table>
</b

Where the OuterTable.css specifies a pink background for the cells and InnerTable.css specifies yellow for the cells. Obviosuly, I am missing something basic as all header styles have a yellow background. What is the best method for styling an internal table.

Upvotes: 0

Views: 73

Answers (3)

Wagner Leonardi
Wagner Leonardi

Reputation: 4446

  1. First, don't import CSS at the middle of your HTML code, put it on the <head> tag please.

  2. You can style your HTML elements by "id" or "class", I'll make and example using class, check it:

    <head>
<link rel="stylesheet" type="text/css" href="OuterTable.css">
<link rel="stylesheet" type="text/css" href="InnerTable.css">

<style>

.outerTable{
    background-color:#FF0000;
}    

.innerTable{
    background-color:#FF00FF;
} 
</style>
</head>
<body>
 <table class="outerTable">
 <tr><th>Col1</th><th>Col2</th></tr>
  <tr>
    <td>
      <table class="innerTable"><tr><th>InsideColA1</th><th>InsideColA2</th></tr></table>
    </td>
    <td>
        <table><tr><th>InsideColB1</th><th>InsideColB2</th></tr></table>
    </td>
   </tr>            
  </table>
</body>

Instead the class at <style> tag, you put your code at your .css files

see it working at: http://jsfiddle.net/U5cUK/

Upvotes: 1

omma2289
omma2289

Reputation: 54639

First off, all CSS files should be included in the <head> of your HTML document.

Now, if you want to target a nested table, all you have to do is use a descendant selector like this:

/*Define default color for cells*/
table th{
    background-color: pink; 
}
/*Override for headers inside a nested table*/
table table th{
    background-color: yellow; 
}

No need for a separate CSS file or custom classes or ids

See Demo fiddle

Upvotes: 0

Santosh Joshi
Santosh Joshi

Reputation: 3320

a) Add class(inner and outer as shown below) to your table

b) remove your CSS file from table and add to head

c) just add the below style statements to your css.

<style type="text/css">
   table.outer {
     background-color:yellow
    }
  table.outer th {
      // add style properties here
   }
   table.inner {
       background-color:pink
   }
  table.inner th {
     // add style properties here
   }
</style>

<table class="outer">
   <tr><th>Col1</th><th>Col2</th></tr>
   <tr>
    <td>
      <table class="inner"><tr><th>InsideColA1</th><th>InsideColA2</th></tr></table>
   </td>
   <td>
        <table><tr><th>InsideColB1</th><th>InsideColB2</th></tr></table>
   </td>
  </tr>            
</table>

Upvotes: 1

Related Questions