Olá, estou replicando um e-mail para treinar e estou com uma dificuldade de alinhar a imagem de um ícone com um texto dentro de uma "tr". Teria um jeito de fazer sem criar uma nova sub-tabela para dispor os dois lado a lado?
Segue abaixo a parte do código que eu criei dessa seção em particular:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--Campaing monitor recomenda o transitional (2012)-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aprovação BoaCompra</title>
<!-- Use the latest (edge) version of IE rendering engine -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<table>
<tr>
<td>
<table>
<tr>
<td width="200" class="cartao">
<table>
<tr>
<td>
<br>
<span class="cartao-titulo">Forma de pagamento:</span>
</td>
</tr>
<tr>
<td>
<img src="icone-cartao.png" alt="">
<span class="cartao-texto">Débito</span>
</td>
</tr>
</table>
</td>
<td width="150"></td>
<td width="200" class="cartao">
<table>
<tr>
<td>
<br>
<span class="cartao-titulo">Data: </span>
</td>
</tr>
<tr>
<td>
<span class="cartao-texto">##/##/## - ##:##</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
</td>
</tr>
</table>
</body>
</html>