How to format html table with inline styles to look like a rendered Excel table

Question

I m currently stuck setting borders in an html table   I use inline styles for a better rendering in e-mail-clients  I have this piece of code    lt html gt       lt body gt           lt table style  border  1px solid black   gt               lt tr gt                   lt td width  350  style  border  1px solid black    gt                      Foo                  lt  td gt                   lt td width  80  style  border  1px solid black    gt                      Foo1                  lt  td gt                   lt td width  65  style  border  1px solid black    gt                      Foo2                  lt  td gt               lt  tr gt               lt tr style  border  1px solid black   gt                   lt td style  border  1px solid black   gt                      Bar1                  lt  td gt                   lt td style  border  1px solid black   gt                      Bar2                  lt  td gt                   lt td style  border  1px solid black   gt                      Bar3                  lt  td gt               lt  tr gt               lt tr style  border  1px solid black   gt                   lt td style  border  1px solid black   gt                      Bar1                  lt  td gt                   lt td style  border  1px solid black   gt                      Bar2                  lt  td gt                   lt td style  border  1px solid black   gt                      Bar3                  lt  td gt               lt  tr gt           lt  table gt       lt  body gt   lt  html gt    It is rendered like this    I want the table to be rendered like Excel would render a table  with inner and outer border

User · Answer

This is quick-and-dirty  and not formally valid HTML5   but it seems to work -- and it is inline as per the question    lt table border  1  style  border-collapse collapse  gt    No further styling of  lt tr gt   lt td gt  tags is required  for a basic table grid

User · Answer

Add cellpadding and cellspacing to solve it  Edit  Also removed double pixel border    lt style gt  td  border-left 1px solid black  border-top 1px solid black   table  border-right 1px solid black  border-bottom 1px solid black    lt  style gt   lt html gt       lt body gt           lt table cellpadding  0  cellspacing  0  gt               lt tr gt                   lt td width  350   gt                      Foo                  lt  td gt                   lt td width  80   gt                      Foo1                  lt  td gt                   lt td width  65   gt                      Foo2                  lt  td gt               lt  tr gt               lt tr gt                   lt td gt                      Bar1                  lt  td gt                   lt td gt                      Bar2                  lt  td gt                   lt td gt                      Bar3                  lt  td gt               lt  tr gt               lt tr  gt                   lt td gt                      Bar1                  lt  td gt                   lt td gt                      Bar2                  lt  td gt                   lt td gt                      Bar3                  lt  td gt               lt  tr gt           lt  table gt       lt  body gt   lt  html gt

User · Answer

table     border-collapse collapse

[html] How to format html table with inline styles to look like a rendered Excel table?

Examples related to html

Examples related to css

Examples related to border

Examples related to html-table