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. 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