Nov. 22nd, 2017
Do This, Not That: Ditching tables

Welcome to my new monthly series: Do This, Not That! wherein I'm going to be teaching you better rules of thumb and good coding habits to use when creating and editing things for your characters and games! Today's lesson of DTNT! is going to focus on tables and why you should not be using them. Ever.*
*Almost. If you're displaying tabular data, then please use a table if you're not using Google Sheets or similar, but I'm pretty sure most of us defer to Sheets for our data tracking at this point.
Why shouldn't I use tables?! I see them everywhere!
Here's what you need to understand: When our journaling sites first came to fruition back in the late 90s, tables were the way of life on the web. CSS was in its infancy, and most of the CSS standard we have today just didn't exist then. Hobbyist coders who wanted to make custom code for journal sites evolved to incorporate new CSS as it was rolled out, but found it hard to shake old habits when tables became obsolete for styling.But here's the thing! Tables are bad for styling. They were never meant for that—that's why CSS has come such a long way. If tables had been meant for styling, if they had been appropriate for it, websites would still be made with tables. (Spoiler: No websites are made with tables now.)
Insanejournal is very insular, guys. You see tables for styling things here, but that is not the norm.
Okay, but they still work; can't I just use them anyway?
No one's stopping you, but consider this: How many table-based cast lists have you or someone you know had to edit only to have to hunt for whichtr
or td
you forgot to duplicate or close? And god forbid you want to reorganize the ordering. And how long does it take you to pick through that mess of nested tables just to add two new characters?...yeah.
So no, no one's saying you're not allowed, just that you really shouldn't. They're a pain in the ass to work with, they're ill equipped for what we're using them for, and there are much better ways to achieve the things we used to need tables for now! And those ways are much easier to write, edit, add to, and remove from.
Alright, you convinced me. So what should I be using?
A year or two ago I would have said to just set the elements you want for rows and columns todisplay:inline-block
and that's still a very valid option, but honestly? The best way, in my opinion, would be to start learning how to use flexbox.Don't worry! I know it probably sounds like I just asked you to learn French, but flexbox is easy to use and extremely versatile. You can read more about it here, but for now I'm going to show you the dead basics for what you'd normally want a table for on IJ or DW: A cast list.
Presenting: A basic flexbox cast list
There are plenty of different ways to do this, and I'm going to show you a nice simple one here.
This cast list will do anything you need it to! The best part? Everything is in percents except for the outer container, so if you want to resize everything all you need to do is change the outer container width. How cool is that?!CAST LISTCHARINFO
CHARINFO
CHARINFO
CHARINFO
Oh and, of course, there's no digging around for where each row starts. You can delete a character without worrying about a row breaking, paste a new character anywhere you want, and reorder on the fly with no hassle!
Still not convinced? Seriously! Give it a whirl and see what you think!<div id="container" style="display:flex;flex-wrap:wrap;width:600px;margin:0 auto;text-align:center;font-family:helvetica,arial,sans-serif;font-size:12px;"> <!---THIS TITLE'S WIDTH ALLOWS IT TO SPAN THE WIDTH OF THE CONTAINER---> <div class="title" style="width:100%;font-weight:bold;font-size:15px;letter-spacing:2px;margin-bottom:1%;"> CAST LIST </div> <!---EACH CHARACTER IS SELF CONTAINED AND CAN BE DELETED, DUPLICATED, AND REORDERED WITHOUT KEEPING TRACK OF CELLS--JUST STICK IT ANYWHERE!---> <div class="character" style="width:21%;background:#ddd;margin:1%;padding:1%;"> <img src="URL" style="width:100%;margin-bottom:5px;"> CHARINFO </div> <div class="character" style="width:21%;background:#ddd;margin:1%;padding:1%;"> <img src="URL" style="width:100%;margin-bottom:5px;"> CHARINFO </div> <div class="character" style="width:21%;background:#ddd;margin:1%;padding:1%;"> <img src="URL" style="width:100%;margin-bottom:5px;"> CHARINFO </div> <div class="character" style="width:21%;background:#ddd;margin:1%;padding:1%;"> <img src="URL" style="width:100%;margin-bottom:5px;"> CHARINFO </div> </div>
But what if I don't need rows or columns?
Then I honestly have no clue why you'd be using a table to begin with in this day and age, excuse the bluntness. But here's the bottom line: A div will do what you want that table to do and it's going to do it better, cleaner, and with less work.
This is a divClass aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum maximus dapibus pulvinar. In hac habitasse platea dictumst. Sed posuere volutpat quam non accumsan. Nunc molestie nisi a massa laoreet convallis. Mauris volutpat odio id libero fringilla pharetra. Phasellus vel aliquam tellus, a condimentum ipsum. Nulla facilisi. Quisque vehicula mauris nec sollicitudin porttitor. Quisque commodo quam non risus laoreet porta.
<div id="container" style="margin:0 auto;width:600px;padding:40px;text-align:j
ustify;line-height:170%;font-family:Open Sans,helvetica,sans-serif;font-size:14px;b ackground:#fff;-webkit-box-shadow:1px 1px 4px 0 rgba(0,0,0,0.3);box-shadow:1px 1px 4px 0 rgba(0,0,0,0.3);">
<div class="title" style="font-size:20px;font-weight:bold;text-transform:uppercase;letter-spacing:2 px;background:#000;color:#fff;padding:0 5px;margin-bottom:15px;">This is a div</div>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum maximus dapibus pulvinar. In hac habitasse platea dictumst. Sed posuere volutpat quam non accumsan. Nunc molestie nisi a massa laoreet convallis. Mauris volutpat odio id libero fringilla pharetra. Phasellus vel aliquam tellus, a condimentum ipsum. Nulla facilisi. Quisque vehicula mauris nec sollicitudin porttitor. Quisque commodo quam non risus laoreet porta.
</div>
This is a tableClass aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum maximus dapibus pulvinar. In hac habitasse platea dictumst. Sed posuere volutpat quam non accumsan. Nunc molestie nisi a massa laoreet convallis. Mauris volutpat odio id libero fringilla pharetra. Phasellus vel aliquam tellus, a condimentum ipsum. Nulla facilisi. Quisque vehicula mauris nec sollicitudin porttitor. Quisque commodo quam non risus laoreet porta.
<table align="center" width="680" cellpadding="40" cellspacing="0" style="text-align:justify;line-height:17
0%;font-family:Open Sans,helvetica,sans-serif;font-size:14px;b ackground:#fff;-webkit-box-shadow:1px 1px 4px 0 rgba(0,0,0,0.3);box-shadow:1px 1px 4px 0 rgba(0,0,0,0.3);"><tr><td>
<div style="font-size:20px;font-weight:bold;text-transform:uppercase;letter-spacing:2 px;background:#000;color:#fff;padding:0 5px;margin-bottom:15px;">This is a table</div>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum maximus dapibus pulvinar. In hac habitasse platea dictumst. Sed posuere volutpat quam non accumsan. Nunc molestie nisi a massa laoreet convallis. Mauris volutpat odio id libero fringilla pharetra. Phasellus vel aliquam tellus, a condimentum ipsum. Nulla facilisi. Quisque vehicula mauris nec sollicitudin porttitor. Quisque commodo quam non risus laoreet porta.
</td></tr></table>
They look identical, right? Except the table is using outdated superfluous coding that a div can and should be doing with no extra work at all. What do you really have to lose? Oh, and there's always the bonus that a div will not break inside of a generator layout if you use it without a cut, and a table almost always will because of conflicting coding. So. There's always that. (Seriously, guys. Please rethink putting info containers like game ads and character bios into tables.)
Comments
display:flex;
to align your content the way you want it works in a way that won't bug the way float can with uneven content! You can finally have a sidebar and content that are the same height with no need for positioning or background images.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce luctus in lorem at pharetra. In sollicitudin laoreet nibh, id aliquam orci pharetra a. Pellentesque in mollis est. Curabitur hendrerit leo sit amet rhoncus placerat. Maecenas euismod diam ac nisl fringilla feugiat. Duis mollis imperdiet maximus. Aenean id metus erat. Nulla id metus bibendum, convallis neque a, molestie dui. Curabitur ultrices varius tempor. In hac habitasse platea dictumst.
flex-wrap
you can also usedisplay:flex;
to create headers and footers.For instance, if you made an outer container set to flex and then four inner containers, you could set the first container to
width:100%;
for the header, the second container towidth:30%;margin-right:5%;
for the sidebar, the third container towidth:65%;
for your content, and your fourth container towidth:100%;
for your footer. And that's all you would need to lay out a basic page setup!float
.The text will overflow the container's height given the nature of
float
.Curabitur ultrices varius tempor. In hac habitasse platea dictumst.
float
.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce luctus in lorem at pharetra. Pellentesque in mollis est. Curabitur hendrerit leo sit amet rhoncus placerat.
float
even broke my comment footer because elements are in the way hahaha.But would you be able to show the code that you did in order to create the three boxes above for the flex display? It's what I've been trying to do with adding more tables beneath it but at about that same height and I'm just having the worst time figuring it out on my own.
orz
THANK YOU. I'm in love :D