Displaying your data on a table is good for readers because it\u2019s the easiest way to read a lot of information in one place. If you are still learning how to code, it might be a little confusing because, though writing code goes from left to right, up to down, coding for a table can get weird. It\u2019s really good to keep in mind that coding tables are filled out by rows. Those rows are then filled in with data cells. Make sure to create separate sheets for HTML and CSS, and link to the CSS sheet on the HTML sheet in the <head> section. Here\u2019s an example of the code that will create a straightforward table where you can organize data:<\/p>\n
To copy and paste the code, follow this link:\u00a0https:\/\/codepen.io\/imrizzy\/pen\/ZKpoyL<\/a><\/p>\n And here’s the CSS code:<\/p>\n As the columns grow, you may have trouble reading the data because of the amount of information being displayed. It\u2019s easier on the eyes to add background color to every other row by adding the following code to the main.css file:<\/p>\n As bland as tables might sound, you can always get creative with the little things. For example, adding cellpadding to each data cell. This allows for buffer space between the words and cell walls. Or, you can make the category names different colors, causing them to stand out from the rest of the table. That would make the categories more clear amongst all the other cells. You can play with border colors and thickness, or even highlight the entire row your cursor is hovering over in a different color using with the code below:<\/p>\n If you want just the cell to be highlighted, then you can change the \u201ctr\u201d to \u201ctd\u201d. Finally, of course, you can change the background color to your preferred hue!<\/p>\n Using Tables in Email Templates<\/strong><\/p>\n Creating email templates is not the easiest, considering you have to know what kind of information you want to present and exactly how you want it be formatted. Luckily, most of the web audience these days is on mobile. If this is true of your audience you have the option of just placing each section below the previous one, like building blocks. Here\u2019s a Warner Music Group email that I coded onto my Codepen:\u00a0https:\/\/codepen.io\/imrizzy\/pen\/Lxqpje?editors=1000#0<\/a>.<\/p>\n![\"Screen](\"https:\/\/cssdeck.com\/blog\/\/wp-content\/uploads\/2017\/04\/Screen-shot-2017-04-25-at-17.23.46-.png\")
<\/a><\/p>\ntable, th, td {\r\n\tborder: 1px solid black;\r\n}<\/pre>\ntr:nth-child(2n) {\r\n background: lime;\r\n}<\/pre>\ntr:hover {\r\n background: yellow;\r\n}<\/pre>\n