Таблица HTML border

У меня возникли трудности с моим шаблоном электронной почты в формате HTML. Я новичок в этом мире HTML, и это мой первый шаблон электронной почты. Тот факт, что я не могу использовать теги <div>, действительно дает мне головную боль.Таблица HTML border

Думаю, было бы лучше посмотреть на скриншот. Я прекрасно объяснил, что хочу. Вот изображение:

<!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>

Я удалил код для «Single Column» таблицы, поскольку для отдельных столбцов код работает отлично. Я также намеренно добавил bgcolor="#000", чтобы я мог посмотреть, что происходит.

Резюме:

Если вы смотрели на скриншоте, я в основном хочу, чтобы уменьшить пространство между двумя <td> тегами т.е. две колонны.
Я хочу удалить пространство, которое генерируется в конце таблицы (крайняя справа, черный цвет)

источник

2013-06-23 Vaibhav Sharan

Возможно, я ошибаюсь, но похоже, что вы устанавливаете таблицу размером 600 пикселей, а каждый столбец - 180 пикселей. Это может объяснить черную область между столбцами. – SlitCanvas

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; 
}

источник

2013-06-23 13:15:36

спасибо. Это сработало :) –

Попробуйте это; В таблице tag style = "border-style: solid; border-width: 2px 0px 2px 0px;"

источник

2013-06-23 13:22:32 user2512996

попробуйте этот. в основном, сделайте table 560px wide, положите 10px td между изображениями. также вам может потребоваться удалить тег p для третьего столбца, чтобы избежать нежелательных полей/отступов.

Если вы хотите оставить table 600px wide, просто добавьте 20px 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>

источник

2013-06-23 17:07:57 hmhcreative

Таблица HTML border

ответ

Смежные вопросы