{"_id":"542f14abacabcf080095953b","category":{"_id":"5429898d1215fe08007e0fe6","pages":["5429ad872e366c080086b5c6","5429cb1b2e366c080086b777","542db0adcb19820800c1f4a3","54380c2df15a8e1400831f88","542aee7d54d88d140075ff00","542af02f54d88d140075ff14","542f14abacabcf080095953b","54651c6df42a472000b0c611","55f81b4f59eace0d0087db2b","56b0c5d81486990d009c101a","56babbffc275570d00ce7105"],"project":"542979c51215fe08007e0ee5","version":"542979c51215fe08007e0ee8","__v":10,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2014-09-29T16:32:13.661Z","from_sync":false,"order":1,"slug":"helpers","title":"Helpers"},"version":{"_id":"542979c51215fe08007e0ee8","project":"542979c51215fe08007e0ee5","__v":4,"createdAt":"2014-09-29T15:24:53.437Z","releaseDate":"2014-09-29T15:24:53.437Z","categories":["542979c51215fe08007e0ee9","542985897a6b690800767fab","5429898d1215fe08007e0fe6","542ac5aa54d88d140075fcaf"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"is_link":false,"parentDoc":null,"project":"542979c51215fe08007e0ee5","user":"542979b61215fe08007e0ee4","__v":4,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2014-10-03T21:27:07.889Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"basic_auth":false,"results":{"codes":[]},"try":true,"auth":"never","params":[],"url":""},"isReference":false,"order":11,"body":"As you probably already know, `<table>`s are the necessary and exceptionally-verbose building blocks of modern HTML emails.  Inkcite's `{table}` and `{td}` helpers simplify building complicated nested tables - while offering tremendous flexibility and include built-in responsiveness.  Let's begin our deep dive into Inkcite's table helpers with some examples:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{table}\\n  {td}I'm a single column table{/td}\\n{/table}\",\n      \"language\": \"html\",\n      \"name\": \"source.html\"\n    }\n  ]\n}\n[/block]\nWith minification disabled, running `inkcite build` would produce this HTML:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<table border=0 cellpadding=0 cellspacing=0><tr>\\n  <td>I'm a single column table</td>\\n</tr></table>\",\n      \"language\": \"html\",\n      \"name\": \"build/email.html\"\n    }\n  ]\n}\n[/block]\nWith no other parameters, the `{table}` helper renders a `<table>` tag with all of its attributes defaulted to `0`.  On the other hand, the `{td}` helper renders an empty `<td>` by default.\n\nIt's important to note that Inkcite *always* starts a new table row whenever you start a table, saving you keystrokes and keeping your source file clean.  It is common to use lots of single-row tables when layout out your email, but if you need to add more rows, simply mix-in regular HTML (`</tr><tr>') where appropriate.\n\n## Cellpadding\n\nCellpadding is one of those attributes that is treated differently depending on the email client.  Inkcite eliminates the rendering inconsistencies by allowing you to specify a single `padding` attribute at the `{table}` level.  Here's an example:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{table padding=15}\\n  {td}I'm a cell with 15px padding{/td}\\n  {td}I also have 15px padding{/td}\\n{/table}\",\n      \"language\": \"html\",\n      \"name\": \"email.html\"\n    }\n  ]\n}\n[/block]\nThis will produce the following HTML.  Notice that not only is the `cellpadding` attribute set, but that *all* `<td>`s in the table also have CSS `padding` specified.  This duplication and ensures that all email clients display your padded cells correctly.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<table border=0 cellpadding=15 cellspacing=0><tr>\\n  <td style=\\\"padding:15px\\\">I'm a cell with 15px padding</td>\\n  <td style=\\\"padding:15px\\\">I also have 15px padding</td>\\n</tr></table>\",\n      \"language\": \"html\",\n      \"name\": \"build/email.html\"\n    }\n  ]\n}\n[/block]\n## Vertical Alignment\n\nWhen you've got multiple horizontal columns, specifying vertical alignment may be important.  You can control vertical alignment at both the tables and the td-levels, depending on your needs.  Specifying at the table-level sets the alignment for all `<td>`s in the table.  Setting it at the `{td}` \n\n## Responsive Tables","excerpt":"Make 90's era tables fun again","slug":"tables","type":"basic","title":"Tables"}

Tables

Make 90's era tables fun again

As you probably already know, `<table>`s are the necessary and exceptionally-verbose building blocks of modern HTML emails. Inkcite's `{table}` and `{td}` helpers simplify building complicated nested tables - while offering tremendous flexibility and include built-in responsiveness. Let's begin our deep dive into Inkcite's table helpers with some examples: [block:code] { "codes": [ { "code": "{table}\n {td}I'm a single column table{/td}\n{/table}", "language": "html", "name": "source.html" } ] } [/block] With minification disabled, running `inkcite build` would produce this HTML: [block:code] { "codes": [ { "code": "<table border=0 cellpadding=0 cellspacing=0><tr>\n <td>I'm a single column table</td>\n</tr></table>", "language": "html", "name": "build/email.html" } ] } [/block] With no other parameters, the `{table}` helper renders a `<table>` tag with all of its attributes defaulted to `0`. On the other hand, the `{td}` helper renders an empty `<td>` by default. It's important to note that Inkcite *always* starts a new table row whenever you start a table, saving you keystrokes and keeping your source file clean. It is common to use lots of single-row tables when layout out your email, but if you need to add more rows, simply mix-in regular HTML (`</tr><tr>') where appropriate. ## Cellpadding Cellpadding is one of those attributes that is treated differently depending on the email client. Inkcite eliminates the rendering inconsistencies by allowing you to specify a single `padding` attribute at the `{table}` level. Here's an example: [block:code] { "codes": [ { "code": "{table padding=15}\n {td}I'm a cell with 15px padding{/td}\n {td}I also have 15px padding{/td}\n{/table}", "language": "html", "name": "email.html" } ] } [/block] This will produce the following HTML. Notice that not only is the `cellpadding` attribute set, but that *all* `<td>`s in the table also have CSS `padding` specified. This duplication and ensures that all email clients display your padded cells correctly. [block:code] { "codes": [ { "code": "<table border=0 cellpadding=15 cellspacing=0><tr>\n <td style=\"padding:15px\">I'm a cell with 15px padding</td>\n <td style=\"padding:15px\">I also have 15px padding</td>\n</tr></table>", "language": "html", "name": "build/email.html" } ] } [/block] ## Vertical Alignment When you've got multiple horizontal columns, specifying vertical alignment may be important. You can control vertical alignment at both the tables and the td-levels, depending on your needs. Specifying at the table-level sets the alignment for all `<td>`s in the table. Setting it at the `{td}` ## Responsive Tables