html - 表の HTML 境界線

Question

HTML メールテンプレートに問題があります。この HTML の世界は初めてで、これが初めてのメールテンプレートです。タグを使用できないという事実<div>は、本当に頭痛の種です。

スクリーンショットを見た方が良いと思います。私はそこで私が欲しいものをうまく説明しました。ここに画像があります：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fashion Newsletter</title>
<style type="text/css" >
body {
    font: Georgia, "Times New Roman", Times, serif;
}

</style>
</head>

<body>
<!--For Three Columns-->

<table align="center" width="600" cellpadding="0" cellspacing="0" bgcolor="#000" >
  <tr>
    <td width="180">
        <a href="#link">
          <img src="images/180.gif" />
        </a>
      </td>
    <td width="180">
        <a href="#link">
          <img src="images/180.gif" />
        </a>
      </td>
    <td width="180"><p class="three">
        <a href="#link">
          <img src="images/180.gif" />
        </a>
      </p></td>
  </tr>
</table>
</body>
</html>

単一列のコードは正常に機能するため、「単一列」テーブルのコードを削除しました。bgcolor="#000"また、何が起こっているのかを確認できるように、意図的に追加しました。

概要：

<td>スクリーンショットを見ると、基本的に 2 つのタグ間のスペース、つまり 2 つの列を減らしたいと考えています。
表の最後に発生するスペースを削除したい（極右、黒色）

score 0 · Accepted Answer

これを試してください。基本的に、table幅を 560pxtdにして、画像の間に 10px を入れます。pまた、不要なマージン/パディングを避けるために、3 番目の列のタグを削除する必要がある場合もあります。

幅 600pxを維持したい場合は、最初の列の前と 3 番目の列の後にtable20px を追加します。td

<table align="center" width="560" cellpadding="0" cellspacing="0" bgcolor="#000" >
  <tr>
    <td width="180">
        <a href="#link">
          <img src="images/180.gif" />
        </a>
      </td>
    <td width="10"></td>
    <td width="180">
        <a href="#link">
          <img src="images/180.gif" />
        </a>
      </td>
    <td width="10"></td>
    <td width="180"><a href="#link">
          <img src="images/180.gif" />
        </a></td>
  </tr>
</table>

score 0 · Accepted Answer

table width="600" border="1" align="center" cellpadding="0" cellspacing="0" bgcolor="#000" class="box" >
<tr>
<td width="180">
    <a href="#link">
      <img src="images/180.gif" />        </a>      </td>
<td width="180">
    <a href="#link">
      <img src="images/180.gif" />        </a>      </td>
<td width="180"><p class="three">
    <a href="#link">
      <img src="images/180.gif" />        </a>
  </p></td>
</tr>
</table>

試してみて、必要な外観を得ることができる css スタイルを追加しました。

.box {
background-color: #FFFFFF;
margin: 2px;
padding: 2px;
width: 600px;
border-top-width: 2px;
border-right-width: 1px;
border-bottom-width: 2px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000066;
border-right-color: #990000;
border-bottom-color: #00FF33;
border-left-color: #FF0000;
}

html - 表の HTML 境界線

3 に答える 3

Related

Reference