How To Format a Table
.
Someone (Hi, Sarah!) asked how I made the grid for my titles in my starwatcher_fic LJ. That is made with a "simple" (ha!) table. I struggle with them; uniquewonders had to whip my Links Post into shape; bless her. But if you don't nest tables within tables (as the List Post did), or put several in one post (as I've done here) they're fairly simple, and I can show you the basics.
NOTE: In the examples below, I have NO idea why there's either too much blank space between my last text lines and the start of the table, or too little. One table works just fine; it may be because I have several on the page. Still, the coding is right -- I've checked each individually -- but I can't figure out where the glitch is. I said I wasn't great at this. But at least this tutorial will get you started.
ETA: (A year later.) When I changed my LJ layout, these tables disappeared; I've just been in to try to fix them. Oddly enough, the tables show up when I DON'T use the open table () command at the top, but I still need close table () at the bottom. Crazy. You should start with that command but, if preview doesn't show a table, try deleting. (There's no telling what background information LJ is dealing with.)
ETA: (A few weeks after that.) Well, DUH! Do I feel dumb. I told you the table code started this way --
"3" CELLSPACING="1" CELLPADDING="1" width="100%">
What that means is, I opened the table twice -- it's just that, the second time, there was a lot of extra stuff added. No wonder it all fell apart. So, I'll take out that extra open-table, and a straight copy and paste should work. If, for some reason it doesn't, first make sure that all your code is closed with a >. (That's the easiest point to overlook.) If you still can't find the problem, try adding at the top. You never know...
Remember, like all HTML, you have to open and close each command. In the setup example below, the information in red is variable; you can make changes. The information in black is essential.
1. Open a table at the top of everything.
2. As part of that string, specify the size of the edges of the grid (see below). You can play with the red numbers to get a different look.
3. Open a line for your title then type your title, then close the line when you're finished. Note that it is possible to specify font size, color, and bold or italics (the stuff in red) if you choose; don't forget to close them after the title, before you close the caption.
4. Open a table row and remember to close the table row when you're finished.
5. To insert your information, you need to open table data and remember to close table data when you're finished.
(If words help you remember, it's -- open table row, open table data, type information, close table data, close table row.)
(Opening table row and table data can be done in one line [see below] and then closed the same way. But if you want columns, it will be easier for you to see what you're doing if you separate them [see farther below].)
6. Repeat 4 and 5 as many times as you need.
7. Close the table when you're finished.
For you to copy and paste in your information processor, then insert your needed changes, I've made a template. (Remember you don't need font color, size, and bold in your caption but I like it; just delete those codes if you don't need them.) Also remember -- NO SPACE AFTER = SIGN. Because this LJ-style justifies all the lines, it might look like a space, but there shouldn't be one.
The template code reads --
"3" CELLSPACING="1" CELLPADDING="1" width="100%">
YOUR TITLE
Information one
Information two
Information three
-- which gives you a simple one-column table like this --
TITLE
Information one
Information two
Information three
But -- ah-HA! You see that the width of the column adjusts to the amount of information within. (Well, it did until I found out how to fix it.) I tried specifying a 100% width in the table row, but it didn't work. I found the answer in another table. Put your width="100%" right after the cellpadding! Or, if you want a table to take up less than the full width of the page, 90% or whatever. (In which case, all your columns, as described below, will have to equal no more than the percentage you've chosen.)
Now, with the use of percentages, it is possible to specify multiple columns. For instance, two of 50% is coded like this --
"3" cellspacing= "1" cellpadding= "1" width="100%">
TITLE
Information one A
Information one B
Information two A
Information two B
Information three A
Information three B
which should look like this --
TITLE
Information one A
Information one B
Information two A
Information two B
Information three A
Information three B
or we could make 3 columns of 33% --
TITLE
Information one A
Information one B
Information one C
Information two A
Information two B
Information two C
Information three A
Information three B
Information three C
or we could make one column of 50% and two of 25% --
TITLE
Information 1 A
Information 1 B
Information 1 C
Information 2 A
Information 2 B
Information 2 C
Information 3 A
Information 3 B
Information 3 C
Now that you have two templates, you should be able to copy / paste / manipulate to form a table to your needs. Use the first one for a simple one-column grid. Use the second one for percentage variables; I'm assuming you can manage to paste extra lines with varying percentages as needed. Just remember that the sum of your column-width percentages canNOT be greater than 100%; trying to make five columns, each 25% wide (125% of total) will give you some very strange results. If something doesn't code right, check to be sure you have all the necessary < and " in place, with no spaces. Just one missing character will screw up everything.
I mentioned above that the spacing was wonky, but it doesn't look too bad after all. I accomplished that with judicious use of
and or
. That's code for break line and Non Breaking Space and code for Paragraph following a blank line. It ain't easy -- I've had a document open, code, paste in LJ, check the result, back to document for changes, paste and check, repeat, repeat, repeat... It's taken me about five hours to get this right.
(Also note that the blank lines I place between table elements are not necessary; the HTML coding will not 'read' it. However, it's easier for our human eyes to make sense of it if everything isn't jammed together.)
BUT -- making a table won't be that hard for you! As I said, each table posted singly without problems; it's the mix and match that seems to play havoc with LJ coding. If you're only doing one table, copy one of the templates. If you want columns, figure out the percentage codes for ONE table row, then copy paste to your heart's content. For example, you want 5 columns of 20% each.
1. Do this -- XXX
2. Then copy and paste four more under it. (I like to hold my information space with X's so I can see where it goes.
3. Then add your on the line above, and your on the line below.
4. Then copy all seven lines, and paste, paste, paste for as many rows as you want.
5. Now add your information where the X's are.
6. Then add your table heading / border information at the top, and close your table at the bottom.
And that's it for this post. I have other tips on making LJ work for you in THESE POSTS.
.
Someone (Hi, Sarah!) asked how I made the grid for my titles in my starwatcher_fic LJ. That is made with a "simple" (ha!) table. I struggle with them; uniquewonders had to whip my Links Post into shape; bless her. But if you don't nest tables within tables (as the List Post did), or put several in one post (as I've done here) they're fairly simple, and I can show you the basics.
NOTE: In the examples below, I have NO idea why there's either too much blank space between my last text lines and the start of the table, or too little. One table works just fine; it may be because I have several on the page. Still, the coding is right -- I've checked each individually -- but I can't figure out where the glitch is. I said I wasn't great at this. But at least this tutorial will get you started.
ETA: (A year later.) When I changed my LJ layout, these tables disappeared; I've just been in to try to fix them. Oddly enough, the tables show up when I DON'T use the open table () command at the top, but I still need close table () at the bottom. Crazy. You should start with that command but, if preview doesn't show a table, try deleting. (There's no telling what background information LJ is dealing with.)
ETA: (A few weeks after that.) Well, DUH! Do I feel dumb. I told you the table code started this way --
"3" CELLSPACING="1" CELLPADDING="1" width="100%">
What that means is, I opened the table twice -- it's just that, the second time, there was a lot of extra stuff added. No wonder it all fell apart. So, I'll take out that extra open-table, and a straight copy and paste should work. If, for some reason it doesn't, first make sure that all your code is closed with a >. (That's the easiest point to overlook.) If you still can't find the problem, try adding at the top. You never know...
Remember, like all HTML, you have to open and close each command. In the setup example below, the information in red is variable; you can make changes. The information in black is essential.
1. Open a table at the top of everything.
2. As part of that string, specify the size of the edges of the grid (see below). You can play with the red numbers to get a different look.
3. Open a line for your title then type your title, then close the line when you're finished. Note that it is possible to specify font size, color, and bold or italics (the stuff in red) if you choose; don't forget to close them after the title, before you close the caption.
4. Open a table row and remember to close the table row when you're finished.
5. To insert your information, you need to open table data and remember to close table data when you're finished.
(If words help you remember, it's -- open table row, open table data, type information, close table data, close table row.)
(Opening table row and table data can be done in one line [see below] and then closed the same way. But if you want columns, it will be easier for you to see what you're doing if you separate them [see farther below].)
6. Repeat 4 and 5 as many times as you need.
7. Close the table when you're finished.
For you to copy and paste in your information processor, then insert your needed changes, I've made a template. (Remember you don't need font color, size, and bold in your caption but I like it; just delete those codes if you don't need them.) Also remember -- NO SPACE AFTER = SIGN. Because this LJ-style justifies all the lines, it might look like a space, but there shouldn't be one.
The template code reads --
"3" CELLSPACING="1" CELLPADDING="1" width="100%">
YOUR TITLE
Information one
Information two
Information three
-- which gives you a simple one-column table like this --
TITLE
Information one
Information two
Information three
But -- ah-HA! You see that the width of the column adjusts to the amount of information within. (Well, it did until I found out how to fix it.) I tried specifying a 100% width in the table row, but it didn't work. I found the answer in another table. Put your width="100%" right after the cellpadding! Or, if you want a table to take up less than the full width of the page, 90% or whatever. (In which case, all your columns, as described below, will have to equal no more than the percentage you've chosen.)
Now, with the use of percentages, it is possible to specify multiple columns. For instance, two of 50% is coded like this --
"3" cellspacing= "1" cellpadding= "1" width="100%">
TITLE
Information one A
Information one B
Information two A
Information two B
Information three A
Information three B
which should look like this --
TITLE
Information one A
Information one B
Information two A
Information two B
Information three A
Information three B
or we could make 3 columns of 33% --
TITLE
Information one A
Information one B
Information one C
Information two A
Information two B
Information two C
Information three A
Information three B
Information three C
or we could make one column of 50% and two of 25% --
TITLE
Information 1 A
Information 1 B
Information 1 C
Information 2 A
Information 2 B
Information 2 C
Information 3 A
Information 3 B
Information 3 C
Now that you have two templates, you should be able to copy / paste / manipulate to form a table to your needs. Use the first one for a simple one-column grid. Use the second one for percentage variables; I'm assuming you can manage to paste extra lines with varying percentages as needed. Just remember that the sum of your column-width percentages canNOT be greater than 100%; trying to make five columns, each 25% wide (125% of total) will give you some very strange results. If something doesn't code right, check to be sure you have all the necessary < and " in place, with no spaces. Just one missing character will screw up everything.
I mentioned above that the spacing was wonky, but it doesn't look too bad after all. I accomplished that with judicious use of
and or
. That's code for break line and Non Breaking Space and code for Paragraph following a blank line. It ain't easy -- I've had a document open, code, paste in LJ, check the result, back to document for changes, paste and check, repeat, repeat, repeat... It's taken me about five hours to get this right.
(Also note that the blank lines I place between table elements are not necessary; the HTML coding will not 'read' it. However, it's easier for our human eyes to make sense of it if everything isn't jammed together.)
BUT -- making a table won't be that hard for you! As I said, each table posted singly without problems; it's the mix and match that seems to play havoc with LJ coding. If you're only doing one table, copy one of the templates. If you want columns, figure out the percentage codes for ONE table row, then copy paste to your heart's content. For example, you want 5 columns of 20% each.
1. Do this -- XXX
2. Then copy and paste four more under it. (I like to hold my information space with X's so I can see where it goes.
3. Then add your on the line above, and your on the line below.
4. Then copy all seven lines, and paste, paste, paste for as many rows as you want.
5. Now add your information where the X's are.
6. Then add your table heading / border information at the top, and close your table at the bottom.
And that's it for this post. I have other tips on making LJ work for you in THESE POSTS.
.