web-dev-qa-db-ja.com

HTMLメール-colspanは許可されますか？

私がメールとして使用する予定のHTMLテーブルでcolspan属性を使用するかどうか疑問に思っていました。メールクライアント（Outlookなど...）はcolspanの機能を理解しますか？

htmlhtml-email
18
CallumVass

うん。すべてではないにしても、ほとんどのメールクライアントですべてのHTMLマークアップが許可されます。スクリプトに関しては、対処する問題があります。スクリプトは、すべてではないにしてもほとんどの電子メールクライアントで許可されていないためです。

0
DoctorLouie

Colspanとrowspanは、すべての主要な電子メールクライアントで完全にサポートされています。それらはより困難ですが、正しく理解すれば、ネストされたテーブルと組み合わせるのに最適なオプションです。

難しさに加えて、評判が悪い理由は、Outlookには考慮が必要な特定の癖があるためです。そうしないと、レイアウトが壊れる可能性があります。

コルスパン：

Outlookには、テーブルの最初の行にcolspanを配置すると、後続の行の幅がめちゃくちゃになるという問題があります。これを回避するには、空の行であっても、一番上の行でセルの幅を指定する必要があります。

次に例を示します。

<!-- the second row in this example will not respect the specified widths in Outlook  -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="600" colspan="3" bgcolor="#757575">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="200" bgcolor="#353535">&nbsp;
    </td>
    <td width="400" bgcolor="#454545">&nbsp;
    </td>
    <td width="200" bgcolor="#555555">&nbsp;
    </td>
  </tr>
</table>


<!-- here is the fix - note the empty row at the top enforces the specified width in Outlook  -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="200">
    </td>
    <td width="400">
    </td>
    <td width="200">
    </td>
  </tr>
  <tr>
    <td width="600" colspan="3" bgcolor="#757575">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="200" bgcolor="#353535">&nbsp;
    </td>
    <td width="400" bgcolor="#454545">&nbsp;
    </td>
    <td width="200" bgcolor="#555555">&nbsp;
    </td>
  </tr>
</table>

行スパン：

Colspanよりもさらに避けられるのはrowspanです。ターゲットオーディエンスによっては、実際にはネストテーブルよりも一貫して表示できることがわかりました。これは、Outlookが<p class="msoNormal">タグで囲んでいるため、Outlookからメールを転送するときに行（特にスパンされた行）がテーブルほど分離しないためです。これらのギャップは、誰かが メールをGmailに転送する の場合、特に避けられません。

注意すべきことの1つは、rowspanがBlackberryでは動作しないように見えることです（私はこれを主要なクライアントとは見なしません）。したがって、HTML電子メールの場合と同様に、パーセンテージゲームをプレイして、どこで最も壊れないようにするかを決定する必要があります。

Colspanとrowspanが連携する基本的な例：

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr><!-- hidden row to establish widths in Outlook -->
    <td width="200">
    </td>
    <td width="200">
    </td>
    <td width="200">
    </td>
  </tr>
  <tr>
    <td width="400" height="200" colspan="2" bgcolor="#333333">...
    </td>
    <td width="200" height="400" rowspan="2" bgcolor="#444444">...
    </td>
  </tr>
  <tr>
    <td width="200" height="400" rowspan="2" bgcolor="#555555">...
    </td>
    <td width="200" height="200" bgcolor="#666666">...
    </td>
    </tr>
    <tr>
    <td width="400" height="200" colspan="2" bgcolor="#777777">...
    </td>
  </tr>
</table>

Rowspan/colspanなしでこれと同様のことを行うには、長方形のテーブルセルを小さな正方形に分割する必要があります。右上のセルがヘッダーと重なる画像であると想像してください 実際の例についてはこの質問を参照してください 。行スパンを避け、ロゴ画像を2つの積み重ねられたセル内で水平方向に分割すると、OutlookがmsoNormalを実行するときに問題が発生します。誰も彼らのイメージの継ぎ目が好きではありません。

HTML形式のメールでは、常に画像を垂直方向に分割して継ぎ目や隙間のリスクを冒すことはできませんが、原則として、画像を水平方向に分割することは常に避けてください。 Rowspanは、イメージをオーバーラップしたいシナリオでこれを回避するのに役立ちます。

最後の注意点-Outlookには、rowspanでもcolspanと同じようにスパニングの問題があります。後続のスパンされた行の高さを尊重するには、最初の列に行の高さを設定する必要があります。これが その例 です。各行の最初のセルが空であることに注意してください。

41
John

Idが質問に少し入力を追加したと思っただけです

コルスパンを使用できますが、反対することをお勧めします。電子メールを作成するときはいつでも（6か月の経験）、常にネストされたテーブルを使用しました。また、インラインcssはメールでのみ使用できるため、マージンとパディングの使用にも十分注意します。

すべてのメールでいくつかのことを行います。

このコードは、ページのすべての画像で常に使用してください。画像のバグの下にあるGmailのスペースを修正します。

style="display:block"

また、画像リンクでborder = "0"を使用して、青い境界線の表示を停止します。

これが役に立てば幸いです！

3
Undefined

Style = "display：block 'に追加するもう1つのヒントは、画像を含むにline-height：0を追加することです。これにより、Outlook 2007の奇妙な空白のバグが解決されます。

私は常にcolspansを使用していますが、可能な場合はテーブルをネストします-rowspansを避けます-それらは悪夢です。

2
mrbirch

RowspansとColspansは問題ありませんが、ネストされたテーブルを使用することを強くお勧めします。追加のコード行がありますが、これにより、他の電子メールクライアントでの中断から節約されます。

0
Sambydev