Tessisamess

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 which tr 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 to display: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.

CAST LIST

CHARINFO

CHARINFO

CHARINFO

CHARINFO

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?!

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 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 id="container" style="margin:0 auto;width:600px;padding:40px;text-align:justify;line-height:170%;font-family:Open Sans,helvetica,sans-serif;font-size:14px;background:#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:2px;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 table 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. <table align="center" width="680" cellpadding="40" cellspacing="0" style="text-align:justify;line-height:170%;font-family:Open Sans,helvetica,sans-serif;font-size:14px;background:#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:2px;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.)

Do this, not that! ♡