(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:
aliveandticking
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 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:
and . 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:
aradia megido
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
. The correct code is:
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 :
Added into the img style tag: "align:center;" for a total line of
And for the td containing the text:
the end
Our final code is in this textbox for your copying pleasure!
| aradia megido |
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.