画像の上に文字列を表示したい

Question

tableの中の写真の上に文字列を表示したいのですが、文字列が写真からずれてしまいます。写真の中に文字列が入りません。写真の中にうまく入れるには何を付け加えればいいですか？

echo '<tr>';
   echo '<th>';
   echo '写真';
   echo '</th>';   
   echo '<td class="photo">';   
    echo "<img src=""  width=200 height=100 >";           
   echo '</td>';
   echo '<td class="text">';   
    echo '美味しいカレー';           
   echo '</td>';
   echo '</tr>';    

.photo {
	width:		100%;
	margin:		0;
	padding:	0;
	position:	relative; /* 相対位置指定 */
}

}
.text {
	width:		100%;
	font-size:	150%;
	text-align:	center;
	bottom:		4px;
	margin:		0;
	padding:	0;
	color:		#fff;
	background:	rgba(0,0,0,0.4); /* 帯の透明度 */
	position:	absolute; /* 絶対位置指定 */
}

Comments

[k_fujimoto]

一部のコードだけでなく、必要と思われる箇所のコードを全て質問文に掲載しておくと今後回答がつきやすいと思いますよ＾＾
今回の場合であれば、<table>タグの使用に関する質問だと思うので、<table>とそれに充てているクラスやスタイル等のことを指しています。

Answer 1

ゴリゴリやったら、position:absolute;を使用して絶対位置指定が出来ます。
※あまりキレイじゃないし、他のテーブルを追加した際に同じクラスが適用できるか微妙ですが..

<table border="1" width="100%" style="table-layout: auto;">
  <tr>
    <th>写真</th>
    <td class="photo"><img src=""  width=200 height=100 ><span class="hoge">美味しいカレー</span></td>
  </tr>
</table>

.photo{
  position: relative;
}

.hoge {
  position: absolute;
  top: 0;
  left: 0;
}

Comments

[aba623ky]

ご回答ありがとうございます。
あまりキレイじゃないtableですみませんでした。今後、勉強します。

[k_fujimoto]

あ、「あまりキレイじゃない」と言ったのは、解決策のことです。
個人的にposition:absoluteでゴリゴリと見た目を作るのはあまり好かないので、もっとうまいやり方があればそちらを模索しています。

[aba623ky]

ごめんなさい。
position:absolute以外に見た目を良くする方法はあるのですか？