Как выровнить 2 блока по разному в ячейки таблицы??

[bulat786]

Подскажите начинающему верстальщику!)

Имеется таблица в каждой ячейки есть фотография и описание к ней (ФИО), надо сделать так чтобы фото отображалась по центру а описание к ней по нижнему краю ячейки через css.
Добавлял к фото и тексту стиль blok потом пытался выровнять по разному но ни как нечего не получилось!
может есть другой способ подскажите пож!
Получается так :

А надо так


html код таблицы
<table id="tableclub" class="tableclub">
<tr>
<td>
<a href="/upload/chronicle/teacher_2.gif" rel="fancygroup">
<img src="../img/teacher_2.gif" />
<a/></a> <a href="/upload/chronicle/teacher_2.gif" rel="fancygroup"></a><a href="/club/chronicle_teacher/26?teacher_id=2"><span>Ванюрихин П.Н</span></a></td>
<td valign="bottom"><a href="/upload/chronicle/teacher_3.gif" rel="fancygroup">
<img src="../img/teacher_3.gif" /></a> <a href="/club/chronicle_teacher/26?teacher_id=3"><span>Челяева А.П.</span></a></td>
<td>
<a href="/upload/chronicle/teacher_4.gif" rel="fancygroup">
<img src="../img/teacher_4.gif" />
<a/></a> <a href="/upload/chronicle/teacher_4.gif" rel="fancygroup"></a><span><a href="/club/chronicle_teacher/26?teacher_id=4">Куклев Н.З.</a></span></td>
<td>
<a href="/upload/chronicle/teacher_5.gif" rel="fancygroup">
<img src="../img/teacher_5.gif" />
<a/></a><a href="/upload/chronicle/teacher_5.gif" rel="fancygroup"></a><a href="/club/chronicle_teacher/26?teacher_id=5"></a> <span><a href="/upload/chronicle/teacher_5.gif" rel="fancygroup">Голубев П.В.</a></span></td>
</tr>
</table>

CSS код

#tableclub span {
display: block;
text-align:center;
padding-bottom: 20px;
vertical-align:bottom;
}
#tableclub td
{
width:160px;
min-height:30px;
height:auto;
vertical-align:middle;
}
#tableclub
{
border:0px;
margin: 0 auto;
font-family:tahoma,arial,sans-serif;
table-layout: fixed;
font-size:13px;
color:#069;
/* [disabled]max-width: 605px; */
}
#tableclub img
{
width:150px;
height:auto;
margin: auto;
border:0;
display:block;
vertical-align:middle;
}
#tableclub a
{
font-size:13px;
color:#069;
}

[Naive]

Сделай подписи в следующей строке.
Либо vertical-align:bottom, а картинки фоном по центру ячейки

[bulat786]

Подробнее можешь написать а то чет я не догнал!?)

[Cronos20]

<td valign="middle" align="center">
  <div style="position: relative; height: 100%">
       <img src="" /></a> 
       <span style="position: absolute; bottom: 0 ">Челяева А.П.</span>
  </div>
</td>

Без отдельного css, но суть выравнивания думаю должна быть понятна

[Naive]

Сообщение от bulat786

Подробнее можешь написать а то чет я не догнал!?)

1.

<table>
  <tr>
    <td><img src="1.jpg">
    </td>
  ...
  </tr>
  <tr>
    <td>Подпись к картинке 1.jpg
    </td>
  </tr>
...
</table>

+ Масштабируемость и кликабельность картинки
+ Поисковики словят картинку
- Две отдельные ссылки.
- Неудобство заполнения серверным скриптом
2.

<table>
  <tr style="vertical-align:bottom">
   <td style="background:url(1.jpg) 50% 50% no-repeat">
      Подпись к картинке 1.jpg
   </td>
  ...
  </tr>
...
</table>

+ Удобно заполнять
- Немасштабируемая картинка (для css2)
- Чтобы "повесить ссылку на картинку" ссылку к подписи придется обрамлять свойствами display:block; плюс несколько в нагрузку в зависимости от браузеров. Либо через js-скрипт на клик по ячейке.

п.с. Вариант by Cronos20 тоже интересный) однако не уверен насчет "height:100%" и между картинкой и подписью возможно придется поставить "<br>".

[Cronos20]

Смысл моего варианта не в height а в абсолютном позиционировании !

[bulat786]

Спасибо всем за ответ сделал через 1 вариант!