Setting CSS for cells in a table

Question

I have a table in a div, with IDs of table1 and div1.

I want to set the CSS for the cells in the table.

What does the CSS block look like? Like this?:

div1.table1{

}

Answer 1

#table1 td {...}

The pound means that what follows is an id, in your case table1. the td that follows means that "any td that is a descendant of #table1". Here is a pretty good tutorial.

EDIT: for the most efficient selector use #table1 > tr > td {...}

Answer 2

If you're trying to be as specific as possible:

#div1 #table1 tr td {

}

If not, you could get away with

#table1 tr td {

}

or even

#table1 td {

}

The later two will style any element with the id of 'table1' (not just an element with the id of 'table1' inside of an element with the id of 'div1'

Answer 3

#div1 #table1 td  
{  
    ...  
}

EDIT: Corrected - I read too fast - I usually use class instead of ID so I used . out of habit.

Answer 4

Assuming html:

<div id="div1">
  <table id="table1">
    ...
  </table>
</div>

Use CSS:

#div1 #table1 td {
  ...
}

That will let you style the cells.

Answer 5

#div1 #table1 td{ }

because

# = ID

. = class

nothing = tag

In my opinion better way to do it would be ...

#div1 table td{ }
<div id="div1"><table></table></div>

You don't really need to create a new id for the table. It kind of depends whether you have more than one table in your div and if the tables are going to be different, but from your question I'd say this would be better.

Answer 6

If the IDs are table1 and div1 then you use the # sign to indicate that an "element" is being used (#div1, #table1). if you have marked them as classes, then use a period (.div1, .table1). IDs should be used once per page, classes can be reused over and over. In this instance, all you may require is #table1 td { }

Answer 7

Any of these will work:

#table1 tr td{

}
#div1 #table1 tr td{

}
#table1 td{

}
#div1 tr td{

}
#div1 table td{

}

You use spaces to separate the tags.

Answer 8

or alternatively, if your table is generated by some server-side script, you can also add CSS classes explicitly to the table rows like

<table...>
  <tbody>
     <tr class="odd">
        <td>..</td>
        <td>..</td>
     </tr>
     <tr class="even">
        <td>..</td>
        <td>..</td>
     </tr>
  </tbody>
</table>

Answer 9

It depends on how precise do you want to be. CSS stands for Cascading Style Sheets so this following rules will cascade down to the most specific one from top to border:

/*  all td in the page */
td { color: '#aaaaaa' }

/*  all td in table with id table1 */
#table1 td { color: '#bbbbbb' }

/*  all td in a div that contains this table with this id */
div #table1 td { color: '#cccccc' }

/* all td in this specific div that contains this specific table */
#div1 #table1 td { color: '#dddddd' }