CSS table padding issue - html

Question

I need help with some CSS styling.
I have made a table with 2 rows, and 2 columns, but the first column in the first row has a rowspan of 2. That creates a table like this: http://i.imgur.com/UjdSwu5.png, which is fine.
My problem is that when I try to apply padding to the 'name' and 'id' cells (but not the image cell), only the name cell gets padded. Here is a screenshot of no padding: http://i.imgur.com/0CGVhDL.png, and here is a screenshot of when I try to pad both cells: http://i.imgur.com/ipvHv2M.png
HTML:
<div id="body">
<div>
<div>
<div>
<div id="content">
<div id="items">
<ul class="list">
<li>
<table border="0">
<tr>
<td rowspan="2"><a href="index.html"><img
src="images/Stone.png" alt="Image" height="50" width="50"></a>
</td>
<td>
<h3 class="name">Stone</h3>
</td>
</tr>
<tr>
<td>
<p class="id">1</p>
</td>
</tr>
</table>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
#content td h3 {
padding:5px 1px 5px 30px;
}
#content td p {
padding:5px 1px 5px 30px;
}
If I do the following then the id cell gets padded how i want it to, but it also pads the img cell.
#content td {
padding:5px 1px 5px 30px;
}
What am i doing wrong?

Answer 1

you are simply applying padding to the wrong element.
you are applying a padding to the h3 and p elements inside #content td but what you really want to do is apply the padding to the cell which is td.
In order to that properly, you need to identify your cells, like this:
<td class="name">
<h3>Stone</h3>
</td>
and
<td class="id">
<p>1</p>
</td>
and the CSS should be something like this
#content td.name {
padding:5px 1px 5px 30px;
}
#content td.id {
padding:5px 1px 5px 30px;
}
Also, a good practice would be not to name a class as id that could be very confusing afterwards.
I would advise calling it item-id instead, for example.
<td class="item-id">
<p>1</p>
</td>
#content td.item-id {
padding:5px 1px 5px 30px;
}

Answer 2

First of all, I suggest using the class-name of the elements, to style them.
Here's the css which should do what you want:
.name, .id{
padding: 80px;
}
In this fiddle, you can see a working solution: http://jsfiddle.net/63eUh/
As Kevin Smouts already said, you applied the padding to the wrong Element - which can easly happen, when you are adressing Elements in this way - it's difficult to read.
Whenever you change your HTML-structure, you have to care about css and update it as well. So I really don't recommend putting all your html-tree inside css to reach the correct elements.