html tables inline styles

Question

I don t have a lot of experience with HTML tables and in-line CSS  but I m trying to create an HTML email signature  Ideally  I d like to have a small image on the left  text in the center  and a larger logo on the right  with a line of text centered below everything   I have the basic content in  however I ve tried to align everything with floats which don t seem to be working  What s the best way to have everything lined up in order horizontally   jsfiddle   lt br   gt   lt meta name  format-detection  content  telephone no  gt   lt table width  600  id  sig  cellspacing  0  cellpadding  0  border-spacing  0  style  margin 0 padding 0   gt   lt tr gt   lt td width  47  style  float left width 47px margin 0 padding 0   gt   lt a href  http   example com  style  border none text-decoration none   gt  lt img src  http   lorempixel com 47 43   alt  First Last  style  border none width 47px   gt  lt  a gt   lt  td gt    lt td width  10  style  width 10px   gt  amp nbsp  lt  td gt      lt td valign  top  style  margin 0 padding 0   gt   lt 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   gt   lt tr style  margin 0 padding 0 color  000104   gt   lt td style  margin 0 padding-left 8px font-family  Gill Sans    Gill Sans MT   Calibri  sans-serif font-size 16px white-space nowrap   gt  lt a style  border none text-decoration none color  D31145   href  mailto email example com  gt FIRST LAST lt  a gt   lt  td gt   lt  tr gt    lt tr style  margin 0 padding 0 color  000104   gt   lt td style  margin 0 padding-left 8px font-family  Gill Sans    Gill Sans MT   Calibri  sans-serif font-size 16px white-space nowrap   gt   lt span style  border none text-decoration none color  000104   gt REALTOR   P  lt a style  border none text-decoration none color  000104   href  tel 1111111111  gt 111 111 1111 lt  a gt  lt  span gt   lt  td gt   lt  tr gt    lt td width  177  style  float right width 177px margin 0 padding 0   gt   lt a href  http   example com  style  border none text-decoration none   gt  lt img src  http   lorempixel com 177 54   alt  ZOPA Realty Group  style  border none width 177px   gt  lt  a gt   lt  td gt   lt  table gt    lt table width  600  id  sig  cellspacing  0  cellpadding  0  border-spacing  0  style  margin -15 0 0 60 padding 0   gt   lt tr gt   lt td gt  lt 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   gt BRE xxxxxxxx   Broker BRE xxxxxxxx  In association with Keller Williams   Each Keller Williams Realty office is independently owned and operated  lt  span gt  lt  td gt    lt br   gt   amp nbsp

User · Accepted Answer

Forget float  margin and html 3 5  The mail is very obsolete  You need do all with table   One line   one table  You need margin or padding   Do another column   Codepen  Example   i need one line with  1 One Picture of 40 40 2 One margin of 10 px 3 One text of 400px  I start my line     lt table style   background-repeat no-repeat  width 450px margin 0   cellpadding  0  cellspacing  0  border  0  gt      lt tr style  height 40px  width 450px  margin 0   gt        lt td style  height 40px  width 40px  margin 0   gt           lt img src    style  width 40px height40 margin 0 display block        lt  td gt        lt td style  height 40px  width 10px  margin 0   gt                lt  td gt        lt td style  height 40px  width 400px  margin 0   gt        lt p style   margin 0   gt  my text    lt  p gt        lt  td gt      lt  tr gt   lt  table gt

User · Answer

This should do the trick    lt table width  400  border  0  cellpadding  0  cellspacing  0  gt     lt tr gt       lt td width  50  height  40  valign  top  rowspan  3  gt         lt img alt    src    width  40  height  40  style  margin  0  border  0  padding  0  display  block   gt       lt  td gt       lt td width  350  height  40  style  font-family  Helvetica  Arial  sans-serif  font-size  14px  color   000000   gt   lt a href    style  color   D31145  font-weight  bold  text-decoration  none   gt LAST FIRST lt  a gt  lt br gt  REALTOR   P 123 456 789      lt  td gt     lt  tr gt     lt tr gt       lt td width  350  height  70  valign  bottom  style  font-family  Helvetica  Arial  sans-serif  font-size  14px  color   000000   gt   lt img alt    src    width  200  height  60  style  margin  0  border  0  padding  0  display  block   gt       lt  td gt     lt  tr gt     lt tr gt       lt td width  350  height  20  valign  bottom  style  font-family  Helvetica  Arial  sans-serif  font-size  10px  color   000000   gt  all your minor text here   all your minor text here   all your minor text here      lt  td gt     lt  tr gt   lt  table gt      UPDATE  Adjusted code per the comments   After viewing your jsFiddle  an important thing to note about tables is that table cell widths in each additional row all have to be the same width as the first  and all cells must add to the total width of your table    Here is an example that will NOT WORK    lt table width  600  border  0  cellpadding  0  cellspacing  0  gt     lt tr gt       lt td width  200  bgcolor   252525  gt  amp nbsp       lt  td gt       lt td width  400  bgcolor   454545  gt  amp nbsp       lt  td gt     lt  tr gt     lt tr gt       lt td width  300  bgcolor   252525  gt  amp nbsp       lt  td gt       lt td width  300  bgcolor   454545  gt  amp nbsp       lt  td gt     lt  tr gt   lt  table gt    Although the 2nd row does add up to 600  it  and any additional rows  must have the same 200-400 split as the first row  unless you are using colspans  If you use a colspan  you could have one row  but it needs to have the same width as the cells it is spanning  so this works    lt table width  600  border  0  cellpadding  0  cellspacing  0  gt     lt tr gt       lt td width  200  bgcolor   252525  gt  amp nbsp       lt  td gt       lt td width  400  bgcolor   454545  gt  amp nbsp       lt  td gt     lt  tr gt     lt tr gt       lt td width  600  colspan  2  bgcolor   353535  gt  amp nbsp       lt  td gt     lt  tr gt   lt  table gt    Not a full tutorial  but I hope that helps steer you in the right direction in the future   Here is the code you are after    lt table width  900  border  0  cellpadding  0  cellspacing  0  gt     lt tr gt       lt td width  57  height  43  valign  top  rowspan  2  gt         lt 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   gt       lt  td gt       lt td width  843  height  43  style  font-family  Helvetica  Arial  sans-serif  font-size  14px  color   000000   gt   lt a href    style  color   D31145  font-weight  bold  text-decoration  none   gt RASHEL ADRAGNA lt  a gt  lt br gt  REALTOR   P 855 900 24KW      lt  td gt     lt  tr gt     lt tr gt       lt td width  843  height  64  valign  bottom  style  font-family  Helvetica  Arial  sans-serif  font-size  14px  color   000000   gt   lt 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   gt       lt  td gt     lt  tr gt     lt tr gt       lt td width  843  colspan  2  height  20  valign  bottom  align  center  style  font-family  Helvetica  Arial  sans-serif  font-size  10px  color   000000   gt  all your minor text here   all your minor text here   all your minor text here      lt  td gt     lt  tr gt   lt  table gt    You ll note that I ve added an extra 10px to some of your table cells  This in combination with align valigns act as padding between your cells  It is a clever way to aviod actually having to add padding  margins or empty padding cells

[html] html tables & inline styles

Examples related to html

Examples related to css

Examples related to html-table

Examples related to html-email