Tessisamess

Previous | Next

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

Tags:

Comments

Nov. 23rd, 2017 04:08 pm (UTC)
What's great about this tutorial is that it covers one of those questions I thought was too dumb to ask about but never bothered to google. So thank you for that!

I do have one question...

When using div in IJ entries as opposed to off-site, it seems like the class portion of the tag is a bit superfluous, especially with character limits & no css section for the id to refer back to.

Is there a reason to include the class or id sections of the coding?

Forgive me if this is an obvious question- my knowledge of code comes from breaking it until I figure out what edits what. And through your lovely tutorials.
Nov. 28th, 2017 02:33 pm (UTC)
You're welcome! ♥

And yep, it's completely superfluous haha. I generally only put them into my codes as an aid for other people since not everyone knows what to look for, or they look at code and go cross-eyed LOL.

If you're ever using a code of mine and you're worried you're going to cut it close on the character limit, those are always 100% fine to delete!
Nov. 27th, 2017 04:06 am (UTC)
Nov. 28th, 2017 02:31 pm (UTC)
PSHHHHHHHH ♥ TY TY!
Dec. 2nd, 2017 11:32 pm (UTC)
I almost skipped over this because I already know the basics of using divs instead of tables. Boy, am I glad I didn't! Excuse me while I fawn over flexboxes and their shiny usefulness. Thanks for the tutorial/guide. ♥
Dec. 3rd, 2017 02:12 am (UTC)
I'm glad you didn't too! You're gonna love flexbox, man. I use it in almost every project to lay my content out these days and it is honestly just the best, and the uses are so broad. You can build just about any content layout you need with it.
Dec. 3rd, 2017 07:14 am (UTC)
Ok I migh be having a dumb moment. Differences between flex and divs cause I can't really see a difference atm?
Dec. 3rd, 2017 02:26 pm (UTC)
Oh no, flex isn't a replacement for divs. A div is an HTML tag and flexbox specs are CSS elements; you use flexbox as a styling rule for your divs.
Dec. 4th, 2017 12:36 am (UTC)
Bad wording on my end! Yes I realised that but I can't figure out what it does vs what divs do normally. I might need to look into it further when I have time though maybe cause yeah I just can't see it O.O
Dec. 4th, 2017 12:38 am (UTC)
I mean looking at the example it looks like once it hits 600px it would automatically wrap down to a new line but that's what the divs do anyway?
Dec. 4th, 2017 12:55 am (UTC)
A div has a default state of display:block; and to rearrange content you will need to use extra elements on the inner divs to create any other sort of layout; an example would be S2 Complete Style, which creates a sidebar next to its content by using float:left; or float:right; to achieve the display.

This is the first div
This is the second div
This is the third div


A div set to display:flex; is a powerful design tool that allows you to lay out your page's content inside of it without using combinations of float, inline, inline-block, or severely outdated tables.

This is the first div
This is the second div
This is the third div
Dec. 4th, 2017 07:00 am (UTC)
Oh so it replaces the float style! Thank god I hated that thing.
Dec. 4th, 2017 02:35 pm (UTC)
It does! Except way better. Using 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.

This is the first div in a flex display.

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.
This is the second div. No elements are using float or clearing margins, and all three elements stretch the height of the container based on the div with the most content.
This is the third div. With flex-wrap you can also use display: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 to width:30%;margin-right:5%; for the sidebar, the third container to width:65%; for your content, and your fourth container to width:100%; for your footer. And that's all you would need to lay out a basic page setup!



This div is using float.

The text will overflow the container's height given the nature of float.

Curabitur ultrices varius tempor. In hac habitasse platea dictumst.
This div is also using 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.
This is a normal div with side margins. If it is not as tall as or taller than the floated elements, this what what it will look like.
Dec. 4th, 2017 02:35 pm (UTC)
Lmfao, see? Using float even broke my comment footer because elements are in the way hahaha.
Jun. 29th, 2018 03:57 am (UTC)
I'm so horrendously bad at even this simple stuff so please forgive the silly questions!

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
Jul. 2nd, 2018 06:42 pm (UTC)
Hi! You can find a flex-based shell in my Back to Basics post under the Easy Columns tab; that should be exactly what you need! ♥
Dec. 5th, 2017 09:23 am (UTC)
Which I can totally now see you trying to explain in the post and the link. God I must have been tired. Oh well.

THANK YOU. I'm in love :D
Dec. 5th, 2017 06:35 pm (UTC)
THANK YOU. I'm about ready to start coding up a game and I try not to use tables because I hate them, but using straight divs for my cast pages have always been a pain in my butt. This flexbox is going to solve all of my problemssss :D
Dec. 11th, 2017 06:02 pm (UTC)
Aw, no problem! ♥ Yeah man, for sure use flex! It's literally going to make everything so much easier for your modding duties when it comes time to update it.
Jan. 21st, 2018 05:27 pm (UTC)
I'm just gonna put this here, cause I used some of this tutorial stuff to reconstruct my 'table' for my sticky note post into divs, but thank you so much for all your tutorials and your codes and things. I did a ton of coding for a game yesterday, and I deconstructed some stuff and built onto it, and I think there are things I understand a lot better now. You're just such an amazing resource for this community so thank you not just for sharing your designs, but also HOW to do some of these things!
Jan. 24th, 2018 11:49 pm (UTC)
Thank you so much, that means so much to hear! ♥ I love being able to do all of this stuff, and I'm always so happy that it gets use and helps people out!
Nov. 16th, 2018 05:03 am (UTC)
out of curiosity, would you consider one of your next tutorials being on changing the appearance of flexbox cells? i.e. how to make them pretty in different ways, maybe. i've been reading up on them but i'm still not confident.
Nov. 16th, 2018 05:58 am (UTC)
Yeah, I would love to do that! I've been meaning to make a more in-depth flexbox tutorial ever since I did this one tbh, haha.
Nov. 18th, 2018 08:29 am (UTC)
I super look forward to it!! Your tutorials are much easier to understand than most coding guides on the web tbh.