Блог

Главная - Вопросы по программированию - Как выровнять тег абзаца справа от таблицы в HTML?

Как выровнять тег абзаца справа от таблицы в HTML?

#html

#HTML

Вопрос:

Мне нужна помощь в форматировании пробела справа от адреса. Похоже, он не хочет выравниваться по правому краю, что бы я ни делал. Я полный новичок в этом, и мне определенно нужно освежить свои знания HTML, CSS и Javascript. Пожалуйста, помогите мне исправить это.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<HEAD>
  <TITLE>Email Signature</TITLE>
  <META content="text/html; charset=utf-8" http-equiv="Content-Type">
</HEAD>

<BODY style="font-size:9.5pt; font-family:Verdana, sans-serif;">
  <table style="width:450px;" width="450" cellpadding="0" cellspacing="0">
    <tbody style="vertical-align:top;">
      <tr>
        <td style="border-bottom:1px solid; border-bottom-color:#4a6481; padding-bottom:10px; padding-top:0; padding-left:0; padding-right:0; vertical-align:bottom; font-family:Verdana, sans-serif; color:#3b4908;" valign="bottom">
          <strong><span style="font-family:Verdana, sans-serif; font-size:14pt; color:#4a6481">Johnamp;nbsp;Doryamp;nbsp;Doe</span></strong></span>
        </td>
        <td style="border-bottom:1px solid; border-bottom-color:#4a6481; padding-bottom:10px; padding-top:0; padding-left:0; padding-right:0; vertical-align:top; font-family:Verdana, sans-serif; color:#3b4908;" valign="top">
          <a href="{{logoURL}}" target="_blank"><img border="0" alt="Logo" width="179" style="width:179px; height:auto; border:0;" src="https://p7aviation.com/wp-content/uploads/2020/04/logo.png"></a>
        </td>
      </tr>
      <tr>
        <td style="width:60%; padding-top:10px; padding-bottom:0; padding-left:0; padding-right:0; line-height:18px; vertical-align:top; font-family:Verdana, sans-serif; font-size:10pt; color:#444444;" valign="top" width="60%">
          <span style="font-family:Verdana, sans-serif; font-size:9.5pt; color:#2c2c2c">m:amp;nbsp; 971 55 testing<span><br /></span></span>
          <span style="font-family:Verdana, sans-serif; font-size:9.5pt; color:#2c2c2c">t:amp;nbsp; 971 6 testing<span><br /></span></span>
          <span style="font-family:Verdana, sans-serif; font-size:9.5pt; color:#2c2c2c">e:amp;nbsp;something@email.com</span>
        </td>
        <td style="width:40%; padding-top:10px; padding-bottom:0; padding-left:0; padding-right:0; line-height:18px; vertical-align:top; font-family:Verdana, sans-serif; font-size:10pt; color:#444444;" valign="top" width="40%">
          <span style="margin: 0 0 0 5px;line-height: 1.5;font-family: sans-serif;color:#2c2c2c;font-size: 9.5pt; margin-top: 0px;">Pieramp;nbsp;Sevenamp;nbsp;Aviationamp;nbsp;FZC<br>D2-009,amp;nbsp;SAIFamp;nbsp;Zone,amp;nbsp;Sharjah<br>United Arab Emirates</span>
        </td>
      </tr>
      <tr>
        <td style="width:60%; padding-top:10px; padding-bottom:0; padding-left:0; padding-right:0; vertical-align:top" width="30%" valign="top">
          <span><a href="{{linkedinURL}}" target="_blank" rel="noopener"><img border="0" width="16" src="ln.png" alt="linkedin icon" style="margin-right:5px; margin-bottom:1px; border:0; width:16px; height:16px;"></a>amp;nbsp;</span>
          <span><a href="{{facebookURL}}" target="_blank" rel="noopener"><img border="0" width="16" src="fb.png" alt="facebook icon" style="margin-right:5px; margin-bottom:1px; border:0; width:16px; height:16px;"></a>amp;nbsp;</span>
          <span><a href="{{youtubeURL}}" target="_blank" rel="noopener"><img border="0" width="16" src="yt.png" alt="youtube icon" style="margin-right:5px; margin-bottom:1px; border:0; width:16px; height:16px;"></a>amp;nbsp;</span>
          <span><a href="{{instagramURL}}" target="_blank" rel="noopener"><img border="0" width="16" src="it.png" alt="instagram icon" style="margin-right:5px; margin-bottom:1px; border:0; width:16px; height:16px;"></a>amp;nbsp;</span>
        </td>
        <td style="width:40%; padding-top:10px; padding-bottom:0; padding-left:0; padding-right:0; vertical-align:top" width="40%" valign="top">
          <span><strong><a href="https://www.p7aviation.com" target="_blank" rel="noopener" style="text-decoration:none;"><span style="font-family:Verdana, sans-serif; font-size:10pt; color:#3b4908;"><span style="font-family:Verdana, sans-serif; color:#4a6481;">www.p7aviation.com</span></span>
          </a>
          </strong>
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</BODY>

</HTML>

Комментарии:

1. Вы хотите, чтобы оба абзаца располагались слева и справа от веб-страницы?

Ответ №1:

Атрибут HTML align устарел. Итак, вам следует использовать свойство CSS text-align. Добавьте «text-align: right;» ко всем элементам, содержимое которых вы хотите выровнять по правому краю.

Комментарии:

1. Я хочу, чтобы сам текст по-прежнему был выровнен по левому краю, а тег всего диапазона для адреса был справа.

2. Посмотрите на его код. Он использует HTML 4.0 Transitional. атрибут align полностью допустим в HTML 4.0 Transitional. Он устарел в HTML5, а не в переходном HTML 4.0.

3. @JonathanRayPereira вы можете использовать атрибут align без каких-либо колебаний. В HTML 4 не рекомендуются следующие функции: htmlhelp.com/reference/html40/deprecated.html

4. @JonathanRayPereira Вам следует попробовать добавить «float: right;» к тегу span, который вы хотите, чтобы он был правильным.

Ответ №2:

Ознакомьтесь с этим фрагментом, если такое форматирование вам нужно:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<HEAD>
  <TITLE>Email Signature</TITLE>
  <META content="text/html; charset=utf-8" http-equiv="Content-Type">
</HEAD>

<BODY style="font-size:9.5pt; font-family:Verdana, sans-serif;">
  <table style="width:100%;"  cellpadding="0" cellspacing="0">
    <tbody style="vertical-align:top;">
      <tr>
        <td style="border-bottom:1px solid; border-bottom-color:#4a6481; padding-bottom:10px; padding-top:0; padding-left:0; padding-right:0; vertical-align:bottom; font-family:Verdana, sans-serif; color:#3b4908;" valign="bottom">
          <strong><span style="font-family:Verdana, sans-serif; font-size:14pt; color:#4a6481">Johnamp;nbsp;Doryamp;nbsp;Doe</span></strong></span>
        </td>
        <td align="right" style="border-bottom:1px solid; border-bottom-color:#4a6481; padding-bottom:10px; padding-top:0; padding-left:0; padding-right:0; vertical-align:top; font-family:Verdana, sans-serif; color:#3b4908;" valign="top">
          <a href="{{logoURL}}" target="_blank"><img border="0" alt="Logo" width="179" style="width:179px; height:auto; border:0;" src="https://p7aviation.com/wp-content/uploads/2020/04/logo.png"></a>
        </td>
      </tr>
      <tr>
        <td style="width:60%; padding-top:10px; padding-bottom:0; padding-left:0; padding-right:0; line-height:18px; vertical-align:top; font-family:Verdana, sans-serif; font-size:10pt; color:#444444;" valign="top" width="60%">
          <span style="font-family:Verdana, sans-serif; font-size:9.5pt; color:#2c2c2c">m:amp;nbsp; 971 55 testing<span><br /></span></span>
          <span style="font-family:Verdana, sans-serif; font-size:9.5pt; color:#2c2c2c">t:amp;nbsp; 971 6 testing<span><br /></span></span>
          <span style="font-family:Verdana, sans-serif; font-size:9.5pt; color:#2c2c2c">e:amp;nbsp;something@email.com</span>
        </td>
        <td align="right" style="width:40%; padding-top:10px; padding-bottom:0; padding-left:0; padding-right:0; line-height:18px; vertical-align:top; font-family:Verdana, sans-serif; font-size:10pt; color:#444444;" valign="top" width="40%">
          <span style="margin: 0 0 0 5px;line-height: 1.5;font-family: sans-serif;color:#2c2c2c;font-size: 9.5pt; margin-top: 0px;">Pieramp;nbsp;Sevenamp;nbsp;Aviationamp;nbsp;FZC<br>D2-009,amp;nbsp;SAIFamp;nbsp;Zone,amp;nbsp;Sharjah<br>United Arab Emirates</span>
        </td>
      </tr>
      <tr>
        <td style="width:60%; padding-top:10px; padding-bottom:0; padding-left:0; padding-right:0; vertical-align:top" width="30%" valign="top">
          <span><a href="{{linkedinURL}}" target="_blank" rel="noopener"><img border="0" width="16" src="ln.png" alt="linkedin icon" style="margin-right:5px; margin-bottom:1px; border:0; width:16px; height:16px;"></a>amp;nbsp;</span>
          <span><a href="{{facebookURL}}" target="_blank" rel="noopener"><img border="0" width="16" src="fb.png" alt="facebook icon" style="margin-right:5px; margin-bottom:1px; border:0; width:16px; height:16px;"></a>amp;nbsp;</span>
          <span><a href="{{youtubeURL}}" target="_blank" rel="noopener"><img border="0" width="16" src="yt.png" alt="youtube icon" style="margin-right:5px; margin-bottom:1px; border:0; width:16px; height:16px;"></a>amp;nbsp;</span>
          <span><a href="{{instagramURL}}" target="_blank" rel="noopener"><img border="0" width="16" src="it.png" alt="instagram icon" style="margin-right:5px; margin-bottom:1px; border:0; width:16px; height:16px;"></a>amp;nbsp;</span>
        </td>
        <td align="right" style="width:40%; padding-top:10px; padding-bottom:0; padding-left:0; padding-right:0; vertical-align:top" width="40%" valign="top">
          <span><strong><a href="https://www.p7aviation.com" target="_blank" rel="noopener" style="text-decoration:none;"><span style="font-family:Verdana, sans-serif; font-size:10pt; color:#3b4908;"><span style="font-family:Verdana, sans-serif; color:#4a6481;">www.p7aviation.com</span></span>
          </a>
        </strong>
      </span>
    </td>
  </tr>
</tbody>
</table>
</BODY>

</HTML>

Я удалил атрибут width таблицы и установил width: 100%; в стиле таблицы. Также добавлен align="right" атрибут к ячейкам, который необходимо разместить с правой стороны.