CSS плавает в столбцах таблицы не работает?

Question

У меня есть таблица с 2 строками и 2 столбцами,

<table>
<tr>
<td> 
<form>

    <span class="descriptionsPizza">EXTRA CHEESE</span>
    <input name="minus1" type="button" class="button minus" id="minus1" value=" - " />
    <input name="textfield1" type="text" id="textfield1" class="valfield" size="2" maxlength="2" value="0" />
    <input name="add1" type="button" class="button add" id="add1" value=" + " />

</td>

<td>

    <span class="descriptionsPizza">HAM</span>    
    <input name="minus2" type="button" class="button minus" id="minus2" value=" - " />
    <input class="valfield" name="textfield2" type="text" id="textfield2" size="2" maxlength="2" value="0"/>
    <input name="add2" type="button" class="button add" id="add2" value=" + " />

</td>
</tr>

<tr>

<td>
    <span class="descriptionsPizza">MUSHROOMS</span>
    <input name="minus3" type="button" class="button minus" id="minus3" value=" - " />
    <input class="valfield" name="textfield3" type="text" id="textfield3" size="2" maxlength="2" value="0"/>
    <input name="add3" type="button" class="button add" id="add3" value=" + " />
</td>

<td>
    <span class="descriptionsPizza">PINEAPPLE</span>
    <input name="minus4" type="button" class="button minus" id="minus4" value=" - " />
    <input class="valfield" name="textfield4" type="text" id="textfield4" size="2" maxlength="2" value="0"/>
    <input name="add4" type="button" class="button add" id="add4" value=" + " />
</form>

</td>
</tr>   
</table>

Я хотел бы поместить все отступы слева от столбца и кнопки справа от столбца, но используемый CSS работает только для первого столбца, почему это так?

CSS

 form span.descriptionPizza {
float:left;

        }
  form input {
float:right;


      }

любая помощь будет оценена.

Answer 1

Две ошибки :)

1. в вашем CSS это span.descriptionPizza, а не span.descriptionPizza (отсутствует "s").
2. Поместите элемент формы над таблицей, а не внутри таблицы, и закройте его после таблицы.