私はHTMLテーブルとインラインCSSの経験があまりないのですが、HTMLメールの署名を作ろうとしているところなんです。理想は、左側に小さな画像、中央にテキスト、右側に大きなロゴを配置し、すべての下に中央にテキストの行を配置することです。
基本的なコンテンツは入っているのですが、フロートですべてのものを整列させようとしたのですが、うまくいかないようなのです。横方向に順番に並べるには、どのような方法があるのでしょうか?
[jsfiddle][1]です。
<br />
<meta name="format-detection" content="telephone=no">
<table width='600' id="sig" cellspacing='0' cellpadding='0' border-spacing='0' style="margin:0;padding:0;">
<tr>
<td width="47" style="float:left;width:47px;margin:0;padding:0;">
<a href='http://example.com' style="border:none;text-decoration:none;"><img src="http://lorempixel.com/47/43/" alt="First Last" style="border:none;width:47px;"></a>
</td>
<td width="10" style="width:10px;"> </td>
<td valign='top' style="margin:0;padding:0;">
<table id="sig2" cellspacing='0' cellpadding='0' border-spacing='0' style="float:left;padding:0;margin:0;font-family:'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;font-size:13px;color:#D31145;border-collapse:collapse;-webkit-text-size-adjust:none;">
<tr style="margin:0;padding:0;color:#000104;">
<td style="margin:0;padding-left:8px;font-family:'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;font-size:16px;white-space:nowrap;"><a style="border:none;text-decoration:none;color:#D31145;" href="mailto:[email protected]">FIRST LAST</a>
</td>
</tr>
<tr style="margin:0;padding:0;color:#000104;">
<td style="margin:0;padding-left:8px;font-family:'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;font-size:16px;white-space:nowrap;">
<span style="border:none;text-decoration:none;color:#000104;">REALTOR | P <a style="border:none;text-decoration:none;color:#000104;" href="tel:1111111111">111.111.1111</a></span>
</td>
</tr>
<td width="177" style="float:right;width:177px;margin:0;padding:0;">
<a href='http://example.com' style="border:none;text-decoration:none;"><img src="http://lorempixel.com/177/54/" alt="ZOPA Realty Group" style="border:none;width:177px;"></a>
</td>
</table>
<table width='600' id="sig" cellspacing='0' cellpadding='0' border-spacing='0' style="margin:-15 0 0 60;padding:0;">
<tr>
<td><span style="margin:0;padding-left:8px;font-size:7px;font-family:'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;color:#000104;white-space:nowrap;">BRE xxxxxxxx | Broker BRE xxxxxxxx. In association with Keller Williams. Each Keller Williams Realty office is independently owned and operated.</span></td>
<br />
です。
float、margin、html 3/5を忘れてください。このメールは非常に時代遅れです。すべてテーブルで行う必要があります。 1行=1テーブル。マージンやパディングが必要ですか?別の列を作る。
コードペンです。
例:1行だけでいいので 1 40*40の写真1枚 2 10pxの1マージン 3 400pxの1テキスト
私は自分のラインを開始します:
<table style=" background-repeat:no-repeat; width:450px;margin:0;" cellpadding="0" cellspacing="0" border="0">
<tr style="height:40px; width:450px; margin:0;">
<td style="height:40px; width:40px; margin:0;">
<img src="" style="width=40px;height40;margin:0;display:block"
</td>
<td style="height:40px; width:10px; margin:0;">
</td>
<td style="height:40px; width:400px; margin:0;">
<p style=" margin:0;"> my text </p>
</td>
</tr>
</table>
これなら大丈夫でしょう:
<table width="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" height="40" valign="top" rowspan="3">
<img alt="" src="" width="40" height="40" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td width="350" height="40" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
<a href="" style="color: #D31145; font-weight: bold; text-decoration: none;">LAST FIRST</a><br>
REALTOR | P 123.456.789
</td>
</tr>
<tr>
<td width="350" height="70" valign="bottom" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
<img alt="" src="" width="200" height="60" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
<tr>
<td width="350" height="20" valign="bottom" style="font-family: Helvetica, Arial, sans-serif; font-size: 10px; color: #000000;">
all your minor text here | all your minor text here | all your minor text here
</td>
</tr>
</table>
UPDATE:コメントに従い、コードを調整しました:
あなたのjsFiddleを見た後、テーブルに関する重要な注意点は、追加された各行のテーブルセルの幅はすべて最初の行と同じ幅でなければならず、すべてのセルはテーブルの合計幅に加算されなければならないことです。
以下は、動作しない例です:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200" bgcolor="#252525">
</td>
<td width="400" bgcolor="#454545">
</td>
</tr>
<tr>
<td width="300" bgcolor="#252525">
</td>
<td width="300" bgcolor="#454545">
</td>
</tr>
</table>
2行目は600になりますが、colspanを使用していない限り、1行目と同じ200-400の分割が必要です。colspanを使用する場合は、1つの行を持つことができますが、それはそれがスパンしているセルと同じ幅を持つ必要があるため、これは動作します:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200" bgcolor="#252525">
</td>
<td width="400" bgcolor="#454545">
</td>
</tr>
<tr>
<td width="600" colspan="2" bgcolor="#353535">
</td>
</tr>
</table>
完全なチュートリアルではありませんが、今後、正しい方向に進むための参考になれば幸いです。
以下、対象となるコードです:
<table width="900" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="57" height="43" valign="top" rowspan="2">
<img alt="Rashel Adragna" src="http://zoparealtygroup.com/wp-content/uploads/2013/10/sig_head.png" width="47" height="43" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td width="843" height="43" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
<a href="" style="color: #D31145; font-weight: bold; text-decoration: none;">RASHEL ADRAGNA</a><br>
REALTOR | P 855.900.24KW
</td>
</tr>
<tr>
<td width="843" height="64" valign="bottom" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
<img alt="Zopa Realty Group logo" src="http://zoparealtygroup.com/wp-content/uploads/2013/10/sig_logo.png" width="177" height="54" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
<tr>
<td width="843" colspan="2" height="20" valign="bottom" align="center" style="font-family: Helvetica, Arial, sans-serif; font-size: 10px; color: #000000;">
all your minor text here | all your minor text here | all your minor text here
</td>
</tr>
</table>
テーブルのセルの一部に10pxを追加していることにお気づきでしょうか。これはalign/valignsとの組み合わせで、セル間のパディングとして機能します。これは、実際にパディングやマージン、空のパディングセルを追加する必要がないようにするための賢い方法です。