esper: (Default)
Suki ([personal profile] esper) wrote2011-12-25 04:54 pm
Entry tags:

(no subject)

dreamwidth, tables, and you
- or -

how i stopped worrying and embraced new html standards

RPers love their tables. Love them. Profile codes, muselists, CR charts, you name it. And the problem with transferring RP journals and games from Livejournal to Dreamwidth is that if you copy-paste your HTML wholesale, it won't show up the same. Basically, this is because of Dreamwidth conforming to an updated HTML standard, but knowing that doesn't help you if you don't know how to fix it. I'll take you through making a simple muselist table here, to teach by example-- feel free to ask questions in the comments, and I'll answer as best I can, since really I'm just going over what I can think of off the top of my head.

the goal

What we want to do is make this table:

aradia megido

[personal profile] aliveandticking

How you would do this on Livejournal is the following:

<tr height="120px">
<img src="http://" border="10px" color="#000000">
<font face="georgia" size="5"><i>aradia megido</i></font>
<lj user=aliveandticking>

But try sticking that into Dreamwidth, and you get:

aradia megido
[personal profile] aliveandticking

This is a problem!

the code

Let's take this step by step.

The most obvious thing is probably the font. That is not what we're going for! The thing is that the <font> tag is being phased out of HTML; it's kind of clunky, and there are much more elegant ways to format your text. What you want to do is use style tags.

There are two ways to format text with style tags: <p style> and <span style>. In tables I prefer to use span style, because p style formats text as a paragraph, which can add extra spacing that you weren't planning on. So, the way to format the text properly using a style tag is:

<span style="font-size: 16pt; font-family:georgia, serif; font-style: italic;">aradia megido</span>

which gives you

aradia megido

Everything useful relating to text can basically be done with this tag. For the titles in the entry, for example, I used the properties text-transform: uppercase; for the capitals, and letter-spacing: 0.2em; to kern the text.

Next, let's tackle the border around the userpic. We're going to use style tags again, this time <img style>. The correct code is:

<img style="border:10px solid" src="" />

which gives you:

You don't technically have to close the tag at the end, but it's more compliant if you do. If you're at all used to making or customizing layouts, this may be starting to remind you a bit of CSS, where you name an attribute and then apply all of the properties to it that you want in one go. Instead of separate tags for font, alignment, etc., you name your "style" category, and tell the item what you want its style to look like.

That takes care of the styling, but what about the table itself? If we apply the code we have now, what we get is:

aradia megido

[personal profile] aliveandticking

That sure is ridiculously off-kilter! The thing about tables on dreamwidth is that what is inside the cels won't necessarily auto-align itself in a way that suits you, even if you manually enter the width and height you want. How do we fix this? Three guesses, and the first two don't count. That's right, style tags. These are the last three bits of code you need:

At the top, instead of <tr height="120px"> : <tr style="height: 120px;">

Added into the img style tag: "align:center;" for a total line of <img style="align:center; border:10px solid" src="" />

And for the td containing the text: <td style="vertical-align: middle">

the end

Our final code is in this textbox for your copying pleasure!

Like I said, this is just how I got one particular simple table to work. If you have any questions on how to format a particular effect, or a particular table you'd like to update for dreamwidth, let me know in the comments! If I don't know off the top of my head, I'll play around until I get it, and add it to this entry for general usage.

EDIT: there is a problem with nested tables where the alignment goes haywire and there's all this blank space. I'll put up some examples later-- for now, add table style="margin: opx;" to anything having that problem.
ein_myria: (Default)

[personal profile] ein_myria 2011-12-26 01:58 am (UTC)(link)
Hi, here from /latest. This is very useful (despite me not being an RPer); thanks for making a guide. I'll be sure to add this to my memories. :)
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)

[personal profile] ninetydegrees 2011-12-26 08:46 am (UTC)(link)
From Latest too:

This is a great, great, great post and yay for inline CSS instead of deprecated attributes! How about linking to it from [community profile] getting_started? It's such an awesome tutorial.

[personal profile] lilmoka 2011-12-26 07:14 pm (UTC)(link)
This is uber useful, thank you! :D
blue_rampion: A cartoon tiger: "I'm a tiger! I roar, I hunt, I climb, I eat, I wash, I sleep" (Tiger)

[personal profile] blue_rampion 2011-12-26 09:38 pm (UTC)(link)
Hi! This is a really useful guide - would you be alright with me including a link to this on the profile of the DW code sharing comm ([community profile] dreamcodes) I am planning to set up?
blue_rampion: A happy mermaid from 'The Little Mermaid': "Squee!" (Squee!)

[personal profile] blue_rampion 2011-12-26 09:46 pm (UTC)(link)
Thank you!
tree: drew barrymore blowing a pink bubble ([else] soap and water)

[personal profile] tree 2011-12-26 10:18 pm (UTC)(link)
this is fab. thanks so much!
rainfall: A girl stands in the midst of fallen leaves. You can't see her face. (Default)

[personal profile] rainfall 2011-12-27 04:49 am (UTC)(link)

Now if only I could make even simple things in profiles. :(
ai: (Default)

[personal profile] ai 2011-12-27 05:28 am (UTC)(link)
Thanks for the tut. Gonna add to memories and pass the link 'round a bit.
vivi: ([Zelda] i can't even words)

[personal profile] vivi 2011-12-27 06:12 am (UTC)(link)
I have a question! Do you know how to use float tags in this? I confess it's baffling me. I'd like to put a thumbnail image into a body of text without interrupting the actual flow of text, and the ways I did it on LJ aren't working here.

Thank you SO SO SO MUCH for explaining the above, though, that helped me immensely on other things. xD
vivi: ([Katamari] JUST ROLL IT!)

[personal profile] vivi 2011-12-27 06:22 am (UTC)(link)
--Nevermind! I figured it out immediately after I posted this, ahaha. I realized that it seems like, gasp, everything uses style values on here, maybe I should try that...

To anyone else, the code I used was:

You can see it in action on this page (excuse the under construction-ness).
vivi: ([Katamari] JUST ROLL IT!)

[personal profile] vivi 2011-12-27 06:23 am (UTC)(link)
Wow okay, and now I have verified that <code> tags don't work on DW... THIS IS JUST SUCH A LEARNING EXPERIENCE, I apologize profusely, random stranger. l-lol.

In any case, the code was thus:

Hopefully THAT works.
ceesoo: (Default)

[personal profile] ceesoo 2011-12-27 12:40 pm (UTC)(link)
Try calling it <raw-code> next time. I'm pretty sure I saw somewhere on DW that that's how you're supposed to call it :|a.
guiltapalooza: (combative puppy eyes)

[personal profile] guiltapalooza 2011-12-28 08:46 am (UTC)(link)
...... Wait what.

What why do I leave my corner of the internet and then enter the same corner again?????
driverpicksthemusic: (Butterfly)

[personal profile] driverpicksthemusic 2011-12-27 05:58 pm (UTC)(link)
Thank you so much! I'm going to do my muselist like this.

I see that each part is its own table, but is there any way to rig up something like this? That was done in Paint, unfortunately.
driverpicksthemusic: (Kitten)

[personal profile] driverpicksthemusic 2011-12-27 06:58 pm (UTC)(link)
omg thank you so much
griff: (Faded)

[personal profile] griff 2011-12-28 07:14 pm (UTC)(link)
Hello! Thanks for this guide, it's helped me learn a lot.

I do have a question that I hope you may be able to shed some light on; I've been working on fixing my CR chart for a character and am running into some difficulties.

Here is how the code looks on Livejournal. Meanwhile, here is what's happened to the code on Dreamwidth.

I've mostly fixed the top part to my liking, but as for the bottom section, I can't seem to figure out how to remove the odd spaces between the different components of the table. Do you have any suggestions?
nightprince: (KYAAAA A KITTY ♥)

[personal profile] nightprince 2012-01-02 02:50 am (UTC)(link)
...!!!! Oh my goodness, I don't know who you are but coming from someone who plays TWO Persona 3 characters, if you and [personal profile] esper manage to get this fixed for Dreamwidth, would you be willing to share this amazing chart with other people?

I'd be totally willing to credit you! But as it is, I've ALWAYS wanted a proper Social Link chart for my Minato and my Ryoji ;///; ahsdflfhg I know this might be asking a lot b-but.............

UM... W-WELL.... IF NOT, I totally understand and I'm sorry for bothering you!

griff: (Faded)

[personal profile] griff 2012-01-02 03:04 am (UTC)(link)
Ahaa, I'm really happy you like it... I designed it for myself, though, so I'd kind of rather not make the whole thing public. If you'd just like the section with the tarot cards at the top though, I can give you the code for that. I found the images for it on Pixiv.
galvantula: (Derptagonist.)

[personal profile] galvantula 2012-01-02 03:25 am (UTC)(link)
Oh, that's fine. I actually have bigger versions of Tarot cards I made for my own social link pages, but thanks anyway. It's really lovely, haha, I wish I had half your skills with coding ♥

I will just admire from afar, in this case!

[personal profile] spiritgun 2011-12-30 08:29 pm (UTC)(link)
Thank you so much for this!

I have a question, tho-- What are the updated html tags for table width, td bgcolor, and cellpadding/spacing?

I use tables quite often for my uploads comm's posts, but I can't support them on DW without journal style pages turned on which may also mess up certain designs. :C

[personal profile] spiritgun 2011-12-30 08:38 pm (UTC)(link)

arigatou, [personal profile] esper-senpai...!
rainfall: The words "Do I dare disturb the universe" written with a fingertip on a foggy windowpane. (dare disturb?)

[personal profile] rainfall 2012-01-03 03:29 pm (UTC)(link)
If you're at all used to making or customizing layouts, this may be starting to remind you a bit of CSS, where you name an attribute and then apply all of the properties to it that you want in one go.

FYI, the style code is CSS; specifically, it's "inline CSS".

Additionally, I'm not sure WHY, but adding whitespace (like a line break) to the beginning of table cells on Dreamwidth tends to fix a LOT of problems -- especially when it comes to lining up images and text, but also when it comes to getting a table cell to shrink to fit its contents.

It, and no other changes, are the difference between the vertical-align on the first table NOT working and the vertical-align on the second table WORKING here, not to mention the height of the first row shrinking down.

It, and no other changes, are also what caused this profile code I'm sitting on for a friend to work. Without the white space, the image and text were hopelessly off-kilter in spite of heights and vertical-alignments; with it, they just instantly worked, even with no other changes to the LiveJournal code.
ex_stakes70: (Default)

[personal profile] ex_stakes70 2012-01-14 06:08 am (UTC)(link)
I'm having difficulty with the font showing up in my profile - I copy-pasted the tag, only changing the text within the span. I tried using it both within a table and independently of a table, and neither version made it look like anything more than the basic style of the website.

Any chance I'm just... doing it wrong?
stakes: 7. (Default)

[personal profile] stakes 2012-01-15 12:44 am (UTC)(link)
:( That's what I'm finding out, and even then it's not doing what I want. Thank you so much though! And this code's awesome. <3
crystalmuse: (Get that reference)

[personal profile] crystalmuse 2012-01-15 10:55 am (UTC)(link)
Thank you so much for this! I haven't done HTML in ages, so the adjustment to DW was a bit confusing. It's working great, and I even managed to slide another line of text in, so it's all good!
maerhys: elementary | joan watson (œ detective dani reese)

[personal profile] maerhys 2012-02-05 12:48 am (UTC)(link)
Thank you so very much for this!
the_citadel_mods: (Default)

[personal profile] the_citadel_mods 2012-04-27 02:25 am (UTC)(link)
I actually just stumbled on this and I must say it is most helpful! I am still having trouble with one attribute however.

I am trying to include a background image in my table and I cannot for the live of me get it to work. The table is not maintaining the width I set for it so I'm not sure if it is just overlapping the image entirely or if it is not calling it up at all.

The padding and spacing values I've specified are not applying either.

Any suggestions would be greatly appreciated!
asthedrivensnow: (bright smile)

[personal profile] asthedrivensnow 2012-07-02 03:09 pm (UTC)(link)
Incredibly helpful, thank you!
mayfairmods: (Default)

[personal profile] mayfairmods 2012-07-22 03:33 am (UTC)(link)
How can you easily change the color of the border? This is all so different from what I'm used to..
je_suis_avec_toi: Lia (D'Eon) leaning forward looking through her bangs (Default)

[personal profile] je_suis_avec_toi 2012-10-15 01:33 pm (UTC)(link)
Is there any way to keep Dreamwidth from squashing the code up when it's saved? I need to make a table that I'm going to make constant changes to, adding information to some cells and more rows as needed. I understand the basic table format from old style HTML--I just need to learn the new style codes--but I need that nested structure and spacing in the code itself to stay put so I know where to make changes.

I can't imagine any programmer appreciates having things all squashed together like this.