Pretty Tables

If it's table data... put it in a table.

Header One	Header Two	Header Three	Header Four
Item One: This has a long line of text for testing purposes.	Item Two	Item Three	Item Four
Item Five	Item Six	Item Seven	Item Eight
Item Nine	Item Ten	Item Eleven: This has a very long line of text for testing purposes. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in nulla accumsan, porttitor tellus scelerisque, molestie eros. Quisque eget posuere purus, sagittis rhoncus odio. Nullam ac vehicula velit. Nunc auctor eros nec odio suscipit euismod. Nam mi magna, eleifend molestie rutrum quis, placerat non mi. Proin commodo metus augue, eget ornare diam feugiat quis. Vivamus mattis erat sit amet tortor congue, sit amet accumsan ipsum condimentum. Donec viverra placerat justo, non placerat nunc. Nam massa lacus, egestas id augue nec, suscipit egestas urna. Sed quis venenatis erat. Vivamus a eros sagittis, fermentum urna vel, mollis sem. Aenean tempor metus vitae bibendum lobortis. Integer ultrices gravida ultricies. Suspendisse ut volutpat dolor, id venenatis turpis. Nam sed libero sit amet nunc tempor laoreet id in metus.	Item Twelve
Item Thirteen	Item Fourteen	Item Fifteen	Item Sixteen

The Code


<table style="margin: 4px 4px 10px 4px; border-radius: 4px; border-style: none; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;">
  <tbody>
    <tr style="background-color: #8b2332;">
      <td style="color: white; padding: 4px 6px 4px 6px; border-right: 1px solid #e9e9e9; border-top-left-radius: 4px;"><strong>Header One</strong></td>
      <td style="color: white; padding: 4px 6px 4px 6px; border-right: 1px solid #e9e9e9;"><strong>Header Two</strong></td>
      <td style="color: white; padding: 4px 6px 4px 6px; border-right: 1px solid #e9e9e9;"><strong>Header Three</strong></td>
      <td style="color: white; padding: 4px 6px 4px 6px; border-top-right-radius: 4px;"><strong>Header Four</strong></td>
    </tr>
    <tr>
      <td style="padding: 4px 6px 4px 6px; border-right: 1px solid #e9e9e9;">Item One</td>
      <td style="padding: 4px 6px 4px 6px; border-right: 1px solid #e9e9e9;">Item Two</td>
      <td style="padding: 4px 6px 4px 6px; border-right: 1px solid #e9e9e9;">Item Three</td>
      <td style="padding: 4px 6px 4px 6px;">Item Four</td>
    </tr>
    <tr style="background-color: #e9e9e9;">
      <td style="padding: 4px 6px 4px 6px; border-right: 1px solid #ffffff;">Item Five</td>
      <td style="padding: 4px 6px 4px 6px; border-right: 1px solid #ffffff;">Item Six</td>
      <td style="padding: 4px 6px 4px 6px; border-right: 1px solid #ffffff;">Item Seven</td>
      <td style="padding: 4px 6px 4px 6px;">Item Eight</td>
    </tr>
    <tr>
      <td style="padding: 4px 6px 4px 6px; border-right: 1px solid #e9e9e9;">Item Nine</td>
      <td style="padding: 4px 6px 4px 6px; border-right: 1px solid #e9e9e9;">Item Ten</td>
      <td style="padding: 4px 6px 4px 6px; border-right: 1px solid #e9e9e9;">Item Eleven</td>
      <td style="padding: 4px 6px 4px 6px;">Item Twelve</td>
    </tr>
    <tr style="background-color: #e9e9e9;">
      <td style="padding: 4px 6px 4px 6px; border-right: 1px solid #ffffff; border-bottom-left-radius: 4px;">Item Thirteen</td>
      <td style="padding: 4px 6px 4px 6px; border-right: 1px solid #ffffff;">Item Fourteen</td>
      <td style="padding: 4px 6px 4px 6px; border-right: 1px solid #ffffff;">Item Fifteen</td>
      <td style="padding: 4px 6px 4px 6px; border-bottom-right-radius: 4px;">Item Sixteen</td>
    </tr>
  </tbody>
</table>

Many tables will adjust themselves in size by shrinking the columns to fit the longest word and wrapping the text to multiple lines. However, for tables with a lot of data, a lot of columns, or just big words, you will want to wrap your table in <div> tags that will create a horizontal scroll bar. You can do that by adding:

<div style="overflow-x: auto; padding: 4px 4px 8px 4px;">

before your <table> tag, and:

</div>

after your </table> tag.

You may also want to add a table width of 100%. I have had some strange results adding widths to tables, namely getting an extra pixel on the right side of the table. Avoid adding width if possible.

<table style="width: 100%; margin: 4px 4px 10px 4px; border-radius: 4px; border-style: none; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;">