Table: td th {need name help}

HTML & CSS
1

Hi All,

I’m have 2 or more tables on one page. Controling them in CSS via td th is fine, but how do I name the different tables to control the padding,etc of the tables in different ways?

HTML:

<table>
<tr>
<td>x</td></tr>
....
</table>

<table>
...
</table>

CSS:

td, th {border:1px solid black; padding:7px; }

How do I control the different tables via css?

Thanks-

2

Add an id to each table, then use #id to target them individually.

On a similar note, you can also specify classes and target them with .class. (Those are the three ways to target an element directly).

The different is you are only supposed to have one of each ID on a page, but can have any number of the same class on one page.

3

How do I target the td, th in the css?

I’m trying the below but this doesn’t work:

.class_name {
td-border: 1px solid black}

I know this is very basic question but have no idea -
Thanks

4

Assuming the class is on the table tag:

.class_name td {
border: 1px solid black}

If it is on the td tag then:

td.class_name {
border: 1px solid black}
5

you can give each table an ID ( or a distinct class name), lets use an ID for this example. Put the table’s ID at the beginning of the rules targeting the desired table.


<table  id="tableA">
<thead><tr>
 <th>head el</th><th>head el</th><th>head el</th>
<thead></tr>
<tfoot><tr>
 <td>foot el</td><td>foot el</td><td>foot el</td>
<tfoot></tr>
<tbody>
<tr><td>something</td><td> goes<td>/<td> here</td><tr><td>something</td><td> goes<td>/<td> here</td><tr><td>something</td><td> goes<td>/<td> here</td><tr><td>something</td><td> goes<td>/<td> here</td>
</tbody>
</table>

<table  id="tableB">
...
</table>

now you can do this :



 #tableA td, #tableA th {border:1px solid black; padding:7px; }
 #tableB td, #tableB  th {border:2px solid ORANGE; padding:12px; }

note that you must put the table’s id in each rule’s selector.