esper | (no subject)

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

aliveandticking

How you would do this on Livejournal is the following:


<table>
<tr height="120px">
<td>
<img src="http:// www.dreamwidth.org/userpic/1022941/1156522" border="10px" color="#000000">
</td>
<td>
<font face="georgia" size="5"><i>aradia megido</i></font>
<lj user=aliveandticking>
</td>
</tr>
</table>

But try sticking that into Dreamwidth, and you get:

aradia megido

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="http://www.dreamwidth.org/userpic/1022941/1156522" />

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

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="http://www.dreamwidth.org/userpic/1022941/1156522" />

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.

Flat | Top-Level Comments Only

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

Glad to help! I only wrote this with RPers in mind because there's a bit of an exodus starting right now, I'm happy others can get usage out of it too.

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

getting_started? It's such an awesome tutorial.

Ooh, I hadn't heard of that comm! I'll definitely link it there. Thanks!

This is uber useful, thank you! :D

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 (

dreamcodes) I am planning to set up?

Yeah, that's totally fine! Glad you found it useful.

Thank you!

this is fab. thanks so much!

Gorgeous.

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

Thanks for the tut. Gonna add to memories and pass the link 'round a bit.

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

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

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.

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.

Vivi... it's suki.........

...... Wait what.

What why do I leave my corner of the internet and then enter the same corner again?????

We're basically the mafia. You can leave... but you can never escape.

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.

Totally possible! Tables nest with no problem.

<table>
<tr>
<td>
<table>
<tr style="height: 120px;">
<td height="120" width="120">
<img style="align:center;border:10px solid" alt="aliveandticking" src="http://www.dreamwidth.org/userpic/1022941/1156522" />
</td>
<td style="vertical-align: middle"><span style="font-size: 16pt; font-family:georgia, serif; font-style: italic;">aradia megido
</span>
<user name="aliveandticking">
</td>
</tr>
</table>
</td>
<td>
<table>
<tr style="height: 120px;">
<td height="120" width="120">
<img style="align:center;border:10px solid" alt="aliveandticking" src="http://www.dreamwidth.org/userpic/1022941/1156522" />
</td>
<td style="vertical-align: middle"><span style="font-size: 16pt; font-family:georgia, serif; font-style: italic;">aradia megido
</span>
<user name="aliveandticking">
</td>
</tr>
</table>
</td>
<td>
<table>
<tr style="height: 120px;">
<td height="120" width="120">
<img style="align:center;border:10px solid" alt="aliveandticking" src="http://www.dreamwidth.org/userpic/1022941/1156522" />
</td>
<td style="vertical-align: middle"><span style="font-size: 16pt; font-family:georgia, serif; font-style: italic;">aradia megido
</span>
<user name="aliveandticking">
</td>
</tr>
</table>
</td>
</tr>
</table>

Duplicate from the first <tr> to the last </tr> to add additional rows!

OOPS I LEFT MY JOURNAL IN THERE if it's not clear what you have to replace, let me know.

omg thank you so much

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?

First of all, COOLEST CHART EVER. Second of all, I think I may know what the problem is, I'll play around with the code and get back to you!

...!!!! Oh my goodness, I don't know who you are but coming from someone who plays TWO Persona 3 characters, if you and

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!

/flees

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.

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!

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

for td bgcolor: <td style="background color="#xxxxxx">

table width: <table style="width: 555px"> although this sometimes doesn't stick, which I'm still messing with.

same with padding and spacing-- padding: 0px; spacing: 0px, stuck in a style tag. c:

arigatou,

esper-senpai...!

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.

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?

Profiles are tricky and require pure html-- you have to do <font face="xxx" color="#xxxxxx"> etc etc etc to get it to show up correctly. Unfortunately the only reliable way I've found to do font size is to stack <big> and <small> tags. :/

:( 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

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!

Thank you so very much for this!

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!

Incredibly helpful, thank you!

How can you easily change the color of the border? This is all so different from what I'm used to..

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.

Flat | Top-Level Comments Only