Tessisamess

Basic HTML Tables

Okay, we all know how I feel about tables at this point, so I won't harp on it because the fact still remains that basic HTML and tables with no inline styling are the only things you can use in your account profile bio. I still don't recommend using the things you learn here for entry codes, and recommend divs with inline styling instead, because S1 Generator will break your table-based codes if they aren't behind a cut. Now that you know the basics about where you should and shouldn't be using tables, let's get to it!

What's inline styling and why can't I use it?

Inline styling is when you inject CSS into an element directly via a style="" tag. For instance: Using <table style="width:500px;margin:0 auto;background:#ddd;"> to style a table or <a href="URL" style="text-decoration:none;color:#000;">link</a> to style a link.

Why doesn't it work? It will be automatically stripped out of the form used to process your bio text and won't render the inline styling in your bio. The form used to input and upload your bio only allows certain types of HTML, and this is not one of the things it permits.

So what can I use?

Any basic HTML tag and as many tables (nested in each other or otherwise) as you can fit into the wordcount limit. This tutorial is about basic tables, so I'm not really going to go into basic HTML tags. You can find a glossary here to search through if you need it! Not all of these will be usable in account profiles, but most will be!

Why aren't we talking about tables yet?

Ugh, okay okay okay. Let's dissect a standard table and what it does. These are normally used to display data (think spreadsheets), so the way we use them on IJ is super not the right use for them these days, but you work with what the site gives you.

TH #1	TH #2	TH #3
TD #1	TD #2	TD #3
TD #4

What we've made here is a table that utilizes most basic table style properties, as well as multiple table rows, table headers, cells, and one cell that spans multiple columns. Here's what that table's HTML looks like:

<table align="center" width="550" height="" bgcolor="#ddd" background="" cellpadding="5" cellspacing="10" border="0" bordercolor=""> <tr bgcolor="#fff"> <th width="100">TH #1</th> <th>TH #2</th> <th width="100">TH #3</th> </tr> <tr height="200" bgcolor="#fff"> <td>TD #1</td> <td bgcolor="#F6E8EA">TD #2</td> <td>TD #3</td> </tr> <tr bgcolor="#fff"> <td colspan="3">TD #4</td> </tr> </table>

Let's talk about the pieces. For the table itself we have:

• align="center" Where you want your table to sit on the horizontal axis. Your options are left/center/right, and your default is left.
• width="550" How wide your table should be.^
• height="" How tall your table should be.*
• bgcolor="#ddd" The table background color.*
• background="" The table background image. You cannot use this for a background color and you can use both bgcolor and background together (useful for transparent background images.) You cannot resize or reposition your background image.*
• cellpadding="5" The padding for the overall table and each cell inside it.
• cellspacing="10" The margin for the overall table and each cell inside it.
• border="0" The border size for the table and all cells inside it. You cannot specify border style or border collapse.
• bordercolor="" The border color for the table and all cells inside it.

*Can also be used in tr, th, and td
^Can also be used in th and td

The empty elements are just there for your reference. Anything you want left empty can just be left out. Ex. If you don't have a background image, you do not need to specify an empty background="" to say this.

If you want to achieve different borders/paddings/margins within specific cells of a table, you'll need to be comfortable nesting tables inside of each other.

Now let's talk about the inner content! The inside of a table is comprised of rows and cells.

• tr Each table row. Your td tags MUST go inside a row. If you want all cells in a row to have the same background color, put it in this tag rather than specifying it for every cell inside of it.
• tr height="" To give table cells a certain height, put it in the row instead for brevity's sake since you can't have multiple heights per row anyway.
• th Table heading. This is just like a td and also must be inside a row, except it's specified as a column header, and it automatically bolds and centers its text. There cannot be multiple table headers in a table (unless it's a new table nested in the existing table.)
• td Each cell. You can give these their own background color or image, even if the row it's in already has one.
• th width="" or td width="" You can specify multiple widths per row in table cells; you only need to do this in one row (the th or the top row of td cells if you aren't using a table header.) You cannot specify different widths per row. Use colspan instead.
• colspan="" If you have 5 of columns in your table (ie. each row has 5 td cells, so there are 5 columns) you can specify less of them in new rows while still filling the width. Example: Your table has five columns, you make a row with three columns and set one to span 3 columns and one to span 2 columns. You then make a new row that you want to span the full width. That would look like this: <tr> <td>TD</td> <td>TD</td> <td>TD</td> <td>TD</td> <td>TD</td> </tr> <tr> <td colspan="3">TD</td> <td colspan="2">TD</td> </tr> <tr> <td colspan="5">TD</td> </tr>
  
  
• td valign="" and th valign="" this isn't actually in the demo, but it's important. This is the vertical alignment of the content inside your table cell. Your options are top/middle/baseline/bottom and default is middle. This is useful if one cell has a lot more content than the cell next to it and you want the one with less content to sit at the top or bottom relative to it. Example:
  
  

  td valign="top"	Integer ac nisi metus. Nam id nulla tincidunt augue malesuada convallis. Fusce vehicula ut quam et aliquet. In ante nisi, consectetur eget semper ac, fermentum id quam. Nulla a nulla vitae odio gravida feugiat eget nec risus. Sed felis lacus, consectetur at eleifend nec, placerat id ex. Sed et velit et magna ullamcorper cursus eget in ipsum.
  td valign="middle"	Integer ac nisi metus. Nam id nulla tincidunt augue malesuada convallis. Fusce vehicula ut quam et aliquet. In ante nisi, consectetur eget semper ac, fermentum id quam. Nulla a nulla vitae odio gravida feugiat eget nec risus. Sed felis lacus, consectetur at eleifend nec, placerat id ex. Sed et velit et magna ullamcorper cursus eget in ipsum.
  td valign="bottom"	Integer ac nisi metus. Nam id nulla tincidunt augue malesuada convallis. Fusce vehicula ut quam et aliquet. In ante nisi, consectetur eget semper ac, fermentum id quam. Nulla a nulla vitae odio gravida feugiat eget nec risus. Sed felis lacus, consectetur at eleifend nec, placerat id ex. Sed et velit et magna ullamcorper cursus eget in ipsum.

Nesting Tables

I'm not going to go too in depth here, because nesting tables can get confusing very quickly even if you're used to making tables. Indenting new lines to stagger your information is your most helpful tool while nesting tables so that you can read it and tell where you're putting things. A new table inside of an existing table MUST go into a td and not anywhere else.

Caveats & Notes

When styling text in a table, you cannot wrap the whole table in a font tag. It won't change anything inside the table. The only place you can add font tags to change text within a table is inside of each td. If that sounds tedious, that's only because it absolutely is. Obviously, the usual workaround for this would be inline styling in the base table tag, but alas alack and all that.

When styling a link in your profile, regardless of whether or not it's in a table, you can do your font size/face etc outside of the links, but you'll need a font color tag inside the link to recolor it. Example:

<font face="times" size="2"> <a href="URL"><font color="#000">Link</font></a> <a href="URL"><font color="#000">Link</font></a> <a href="URL"><font color="#000">Link</font></a> </font>

If you're using sanity your default tables will look a little nicer to you and anyone else using the extension, WINK WINK. Links won't have a default underline and will have a hover function, and if you don't want to go through styling fonts in every cell, Sanity's default font is pretty nice!

Please note that if you decide to use tables in your entries you can go ahead and use inline styling, so once you've read the basic setup of how to structure a table, that's about all you'll need from this guide.

If you hate using tables but aren't sure how to utilize divs for arranging rows/columns of information you can check out my Flexbox tutorial here and follow it along to part two here!

Stay tuned!

This was just a general tutorial for the ins and outs of table structure, and what they can and cannot do without CSS. Next week we'll have a fun smaller tutorial on making gif-with-text profile codes, since those are the kinds I see used the most on IJ.

♡ You're Done! ♡