Tessisamess

Layouts, Codes, Tutorials, & Resources

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

June 2019

S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
30      

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal
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! ♡

Comments

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.