@deron
To create a responsive HTML table for email, you can follow these steps:
Here is an example of a responsive HTML table:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Table</title> <style> table { width: 100%; max-width: 600px; border-collapse: collapse; margin: 0 auto; } td, th { border: 1px solid #ddd; padding: 8px; } @media screen and (max-width: 600px) { td, th { padding: 4px; } } </style> </head> <body> <table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> </tr> </table> </body> </html> |
You can customize the styles and layout of the table as needed to fit the design of your email template. Make sure to test the responsiveness of the table by previewing it on different devices and email clients.