OOC: Help with Table Tagging for Userinfo Pages
So, have you ever wanted one of these handy-dandy tables for your userinfo, and not known how to make them?
Welcome to Tables 101.
THE VERY BASICS OF HTML TAGGING FOR TABLES
In HTML, everything is basically defined by tags to turn things on and off again. If you've used italics and bold to prove a point in an LJ comment, you already know some basic HTML.
To set up a table, the first thing you need is a tag. At the very end, we'll close it again with .
Each table row then gets a section, opened with and closed with .
Finally, each cell in a table is and .
The last thing to remember is that you want to nest tags. All s should be inside a , and all s should be inside s. When you go to close a tag, close them in the opposite order you opened them - first, then , then .
A one-celled table would be:
Note: a lot of browsers don't like empty cells like that there. So a quick way to get around this is to give all of your empty s nonbreaking spaces, like so: . We'll add these in later.
To give you a better example of how tables work: if you wrote the numbers 1-4 like so:
1
2
3
4
You'd get this as a result:
1
2
3
4
Congratulations! You built a table.
So for your summer workshop schedule, you would want 5 slots horizontally (the five days of the week) and six slots vertically (periods 1-5 plus lunch), plus one extra each way for headers. So you need seven s, each of which has six open-and-closed s.
Which means your starting point is this:
Which only looks huge and intimidating. Promise. Let's add in the headers (Period, Monday, Tuesday, Wednesday, Thursday, Friday) and the numbers, and let's not forgetting the reassuring row of "Lunch" in there, either. Heck, let's make 'em bold.
Period
Monday
Tuesday
Wednesday
Thursday
Friday
1
2
3
Lunch
Lunch
Lunch
Lunch
Lunch
Lunch
4
5
See? Much better. Here's what it looks like:
Period
Monday
Tuesday
Wednesday
Thursday
Friday
1
2
3
Lunch
Lunch
Lunch
Lunch
Lunch
Lunch
4
5
Doesn't that look nice and handy? Let's add the classes in there before things get confusing. What you want to remember is that each is a row, for that period - the first spot tells you what row you're in, and then the five blank s afterwards are for MTWRF respectively. So, for example, if you were in Potpourri (B. Bluth) - Tuesdays, 4th period - you would change
4
to
4
Potpourri (B. Bluth)
Which means Rikku's table looks like so:
Period
Monday
Tuesday
Wednesday
Thursday
Friday
1
2
How to Blow Things Up (Without Losing an Eye or Other Important Bodypart) (Alianne)
How to Annoy Your Teachers (And Not Get Turned into Animals) (Crichton)
3
Lunch
Lunch
Lunch
Lunch
Lunch
Lunch
4
5
Freelance Treasure Hunting (Mal Doran)
And looks like:
Period
Monday
Tuesday
Wednesday
Thursday
Friday
1
2
How to Blow Things Up (Without Losing an Eye or Other Important Bodypart) (Alianne)
How to Annoy Your Teachers (And Not Get Turned into Animals) (Crichton)
3
Lunch
Lunch
Lunch
Lunch
Lunch
Lunch
4
5
Freelance Treasure Hunting (Mal Doran)
Wow, is that ugly. Don't worry. That's next.
One last detail before we clean this up: Friday has that pesky Friday Event covering periods 3, 4, 5 and lunch. This means we need a rowspan.
Let's change
3
to
3
FRIDAY EVENT
This means that the last column - Friday's - is going to span down four rows from there (including row 3 as one of the four).
Which means that you need to remove the very last "Lunch" as well as the last for each of the rows for periods 4 and 5. If you don't, your table will have a weird floating column at the right margin. So, do that now before you forget.
If your student has a job, you'll probably need to add in another "rowspan" to account for that, since he or she will be working all day. Make sure, when you remove s from the appropriate rows, that you take out the right ones.
Done? On to prettiness!
STYLES AND FEATURES ADDED ON TO TABLE TAGS
Alignments
You can set the alignment for s in two different directions: vertical and horizontal. If you've ever used Excel, things default there to being left-aligned horizontally and centered vertically. With a table like this, you probably want everything to be centered horizontally and top-aligned vertically, although you're free to play with the settings however you'd like.
To do this, you're going to need to search and replace. Change
to
and select "Replace All."
This will get all of your s except the four-row Friday Event earlier. Which is okay, because it gets a different alignment anyway. Change:
FRIDAY EVENT
to
FRIDAY EVENT
so that it isn't floating up at the top of that huge cell.
Note: for a table with long headings, sometimes it looks better to set the valign for just that top row to "baseline" or "bottom". But for a table this size, it shouldn't matter.
Border
A border makes everything look nice, and clarifies what box ends where. Very helpful if you have lots of empty spaces, or if some rows are wider than others.
Border goes on the table tag itself, so change
to
You can use a different number for a heavier border, if you'd like. But "1" gets the job done.
Width
You can set each column to have a specific width. This seriously helps when you've got some columns that are going to be empty and others that are going to be huge. Like this one.
The column widths are specified on the tag, but you only need to do it for the top row. Make sure your math works; if the table width is supposed to be over 100%, things will go wonky.
To make this simple, let's have the first column be 10%, and then the other five will make up the other 90%, so - 18% each.
So let's take the top row:
Period
Monday
Tuesday
Wednesday
Thursday
Friday
And make it into this:
Period
Monday
Tuesday
Wednesday
Thursday
Friday
Once you take a look at your table, you can fiddle with these. If you don't have any classes on Tuesday, maybe you drop Tuesday down to 10% and make the other four 20% each. If Wednesday's class has a really long name, maybe you make Wednesday 25% and chop a few percent off the others to make up the slack. Or you leave it as it is.
Colors
You can add color to the cells that have classes in them, to set them off a little. Colors go on the tag, and can either be identified by name - red, orange, yellow, green, blue, and purple all worked in LJ when I checked just now - or by hexadecimal value. Hexadecimal values give you a lot more control over the shade. You can find a list of the 216 basic web-safe colors here, and a lot more shades at the Hex Hub here. Make sure you pick a color that's light enough so that you can still read the text in the box. We'll do one each way.
Let's say you've decided Bluth's "Potpourri" class should be yellow. Then you would change
Potpourri (B. Bluth)
to
Potpourri (B. Bluth)
For Alianne's "How to Blow Things Up" class, I chose a mint green color whose hexadecimal value is b6f292. Hexadecimal numbers require a pound sign in front of them. So let's change
How to Blow Things Up (Without Losing an Eye or Other Important Bodypart) (Alianne)
to
How to Blow Things Up (Without Losing an Eye or Other Important Bodypart) (Alianne)
Nonbreaking Spaces
Let's add those in while we're at it. Do a search and replace
with
Links
This is really optional, but it's fun and it makes everything easier to find, so let's take these a step at a time. Feel free to just skip this section if you don't want links in your table.
Workshops first. The tags for classes in fandomhigh mean that you can link to just that workshop's entries, which makes finding them a snap. You can find the list of tags here - remember that spaces need to become a plus sign in the URL.
Alianne's class is tagged as "blow things up", which means text will let you link to just her class. So change:
How to Blow Things Up (Without Losing an Eye or Other Important Bodypart) (Alianne)
to
How to Blow Things Up (Without Losing an Eye or Other Important Bodypart) (Alianne)
Now for teachers. There are two ways to do this, so we'll do this for Rikku's two other workshops.
One way is to replace the teacher's name with the name tag. We'll do that for Vala Mal Doran, whose username is spacepiratevala. Which means we change:
Freelance Treasure Hunting (Mal Doran)
to
Freelance Treasure Hunting (spacepiratevala)
The other way is to link the teacher's name to his or her profile page. John Crichton's is found at . So change:
How to Annoy Your Teachers (And Not Get Turned into Animals) (Crichton)
to
How to Annoy Your Teachers (And Not Get Turned into Animals) ( Crichton)
Pick one and do that for your classes now. I'm going to leave mine different just to show you how each looks.
THE FINAL RESULT
Here's how Rikku's table ended up.
Period
Monday
Tuesday
Wednesday
Thursday
Friday
1
2
How to Blow Things Up (Without Losing an Eye or Other Important Bodypart) ( Alianne)
How to Annoy Your Teachers (And Not Get Turned into Animals) ( Crichton)
3
FRIDAY EVENT
Lunch
Lunch
Lunch
Lunch
Lunch
4
5
Freelance Treasure Hunting (spacepiratevala)
How does it look? Let's see.
Period
Monday
Tuesday
Wednesday
Thursday
Friday
1
2
How to Blow Things Up (Without Losing an Eye or Other Important Bodypart) ( Alianne)
How to Annoy Your Teachers (And Not Get Turned into Animals) ( Crichton)
3
FRIDAY EVENT
Lunch
Lunch
Lunch
Lunch
Lunch
4
5
Freelance Treasure Hunting (spacepiratevala)
This is nearly identical to the version on Rikku's profile page currently. The only differences are that I linked all three teachers the same way, and that I played with the column widths to find something that looked better, to me. Also, for the two classes with really long parentheticals, I decided it looked better to only link the first part of the class name, and I set the top row's valign tag to "bottom" out of sheer force of habit.
Rikku's table, the version which is currently on my profile:
Period
MONDAY
TUESDAY
WEDNESDAY
THURSDAY
FRIDAY
1
2
How to Blow Things Up (Without Losing an Eye or Other Important Bodypart) ( Alianne)
How to Annoy Your Teachers (And Not Get Turned into Animals) ( Crichton)
3
FRIDAY EVENT
Lunch
Lunch
Lunch
Lunch
Lunch
4
5
Freelance Treasure Hunting ( Mal Doran)
And the visual, which should oddly resemble that image up at the top of this insanely long post:
Period
MONDAY
TUESDAY
WEDNESDAY
THURSDAY
FRIDAY
1
2
How to Blow Things Up (Without Losing an Eye or Other Important Bodypart) ( Alianne)
How to Annoy Your Teachers (And Not Get Turned into Animals) ( Crichton)
3
FRIDAY EVENT
Lunch
Lunch
Lunch
Lunch
Lunch
4
5
Freelance Treasure Hunting ( Mal Doran)
It's easy enough when you break it down. Really. And hopefully this helped you do just that.
ENOUGH BLABBING, JUST GIVE ME A TEMPLATE
Can't argue with that!
Period
Monday
Tuesday
Wednesday
Thursday
Friday
1
2
3
FRIDAY EVENT
Lunch
Lunch
Lunch
Lunch
Lunch
4
5
Add things in where they need to go. That's much better than putting them where they don't belong.
Comments? Questions? Clarifications? Quiche?
Welcome to Tables 101.
THE VERY BASICS OF HTML TAGGING FOR TABLES
In HTML, everything is basically defined by tags to turn things on and off again. If you've used italics and bold to prove a point in an LJ comment, you already know some basic HTML.
To set up a table, the first thing you need is a tag. At the very end, we'll close it again with .
Each table row then gets a section, opened with and closed with .
Finally, each cell in a table is and .
The last thing to remember is that you want to nest tags. All s should be inside a , and all s should be inside s. When you go to close a tag, close them in the opposite order you opened them - first, then , then .
A one-celled table would be:
Note: a lot of browsers don't like empty cells like that there. So a quick way to get around this is to give all of your empty s nonbreaking spaces, like so: . We'll add these in later.
To give you a better example of how tables work: if you wrote the numbers 1-4 like so:
1
2
3
4
You'd get this as a result:
1
2
3
4
Congratulations! You built a table.
So for your summer workshop schedule, you would want 5 slots horizontally (the five days of the week) and six slots vertically (periods 1-5 plus lunch), plus one extra each way for headers. So you need seven s, each of which has six open-and-closed s.
Which means your starting point is this:
Which only looks huge and intimidating. Promise. Let's add in the headers (Period, Monday, Tuesday, Wednesday, Thursday, Friday) and the numbers, and let's not forgetting the reassuring row of "Lunch" in there, either. Heck, let's make 'em bold.
Period
Monday
Tuesday
Wednesday
Thursday
Friday
1
2
3
Lunch
Lunch
Lunch
Lunch
Lunch
Lunch
4
5
See? Much better. Here's what it looks like:
Period
Monday
Tuesday
Wednesday
Thursday
Friday
1
2
3
Lunch
Lunch
Lunch
Lunch
Lunch
Lunch
4
5
Doesn't that look nice and handy? Let's add the classes in there before things get confusing. What you want to remember is that each is a row, for that period - the first spot tells you what row you're in, and then the five blank s afterwards are for MTWRF respectively. So, for example, if you were in Potpourri (B. Bluth) - Tuesdays, 4th period - you would change
4
to
4
Potpourri (B. Bluth)
Which means Rikku's table looks like so:
Period
Monday
Tuesday
Wednesday
Thursday
Friday
1
2
How to Blow Things Up (Without Losing an Eye or Other Important Bodypart) (Alianne)
How to Annoy Your Teachers (And Not Get Turned into Animals) (Crichton)
3
Lunch
Lunch
Lunch
Lunch
Lunch
Lunch
4
5
Freelance Treasure Hunting (Mal Doran)
And looks like:
Period
Monday
Tuesday
Wednesday
Thursday
Friday
1
2
How to Blow Things Up (Without Losing an Eye or Other Important Bodypart) (Alianne)
How to Annoy Your Teachers (And Not Get Turned into Animals) (Crichton)
3
Lunch
Lunch
Lunch
Lunch
Lunch
Lunch
4
5
Freelance Treasure Hunting (Mal Doran)
Wow, is that ugly. Don't worry. That's next.
One last detail before we clean this up: Friday has that pesky Friday Event covering periods 3, 4, 5 and lunch. This means we need a rowspan.
Let's change
3
to
3
FRIDAY EVENT
This means that the last column - Friday's - is going to span down four rows from there (including row 3 as one of the four).
Which means that you need to remove the very last "Lunch" as well as the last for each of the rows for periods 4 and 5. If you don't, your table will have a weird floating column at the right margin. So, do that now before you forget.
If your student has a job, you'll probably need to add in another "rowspan" to account for that, since he or she will be working all day. Make sure, when you remove s from the appropriate rows, that you take out the right ones.
Done? On to prettiness!
STYLES AND FEATURES ADDED ON TO TABLE TAGS
Alignments
You can set the alignment for s in two different directions: vertical and horizontal. If you've ever used Excel, things default there to being left-aligned horizontally and centered vertically. With a table like this, you probably want everything to be centered horizontally and top-aligned vertically, although you're free to play with the settings however you'd like.
To do this, you're going to need to search and replace. Change
to
and select "Replace All."
This will get all of your s except the four-row Friday Event earlier. Which is okay, because it gets a different alignment anyway. Change:
FRIDAY EVENT
to
FRIDAY EVENT
so that it isn't floating up at the top of that huge cell.
Note: for a table with long headings, sometimes it looks better to set the valign for just that top row to "baseline" or "bottom". But for a table this size, it shouldn't matter.
Border
A border makes everything look nice, and clarifies what box ends where. Very helpful if you have lots of empty spaces, or if some rows are wider than others.
Border goes on the table tag itself, so change
to
You can use a different number for a heavier border, if you'd like. But "1" gets the job done.
Width
You can set each column to have a specific width. This seriously helps when you've got some columns that are going to be empty and others that are going to be huge. Like this one.
The column widths are specified on the tag, but you only need to do it for the top row. Make sure your math works; if the table width is supposed to be over 100%, things will go wonky.
To make this simple, let's have the first column be 10%, and then the other five will make up the other 90%, so - 18% each.
So let's take the top row:
Period
Monday
Tuesday
Wednesday
Thursday
Friday
And make it into this:
Period
Monday
Tuesday
Wednesday
Thursday
Friday
Once you take a look at your table, you can fiddle with these. If you don't have any classes on Tuesday, maybe you drop Tuesday down to 10% and make the other four 20% each. If Wednesday's class has a really long name, maybe you make Wednesday 25% and chop a few percent off the others to make up the slack. Or you leave it as it is.
Colors
You can add color to the cells that have classes in them, to set them off a little. Colors go on the tag, and can either be identified by name - red, orange, yellow, green, blue, and purple all worked in LJ when I checked just now - or by hexadecimal value. Hexadecimal values give you a lot more control over the shade. You can find a list of the 216 basic web-safe colors here, and a lot more shades at the Hex Hub here. Make sure you pick a color that's light enough so that you can still read the text in the box. We'll do one each way.
Let's say you've decided Bluth's "Potpourri" class should be yellow. Then you would change
Potpourri (B. Bluth)
to
Potpourri (B. Bluth)
For Alianne's "How to Blow Things Up" class, I chose a mint green color whose hexadecimal value is b6f292. Hexadecimal numbers require a pound sign in front of them. So let's change
How to Blow Things Up (Without Losing an Eye or Other Important Bodypart) (Alianne)
to
How to Blow Things Up (Without Losing an Eye or Other Important Bodypart) (Alianne)
Nonbreaking Spaces
Let's add those in while we're at it. Do a search and replace
with
Links
This is really optional, but it's fun and it makes everything easier to find, so let's take these a step at a time. Feel free to just skip this section if you don't want links in your table.
Workshops first. The tags for classes in fandomhigh mean that you can link to just that workshop's entries, which makes finding them a snap. You can find the list of tags here - remember that spaces need to become a plus sign in the URL.
Alianne's class is tagged as "blow things up", which means text will let you link to just her class. So change:
How to Blow Things Up (Without Losing an Eye or Other Important Bodypart) (Alianne)
to
How to Blow Things Up (Without Losing an Eye or Other Important Bodypart) (Alianne)
Now for teachers. There are two ways to do this, so we'll do this for Rikku's two other workshops.
One way is to replace the teacher's name with the name tag. We'll do that for Vala Mal Doran, whose username is spacepiratevala. Which means we change:
Freelance Treasure Hunting (Mal Doran)
to
Freelance Treasure Hunting (spacepiratevala)
The other way is to link the teacher's name to his or her profile page. John Crichton's is found at . So change:
How to Annoy Your Teachers (And Not Get Turned into Animals) (Crichton)
to
How to Annoy Your Teachers (And Not Get Turned into Animals) ( Crichton)
Pick one and do that for your classes now. I'm going to leave mine different just to show you how each looks.
THE FINAL RESULT
Here's how Rikku's table ended up.
Period
Monday
Tuesday
Wednesday
Thursday
Friday
1
2
How to Blow Things Up (Without Losing an Eye or Other Important Bodypart) ( Alianne)
How to Annoy Your Teachers (And Not Get Turned into Animals) ( Crichton)
3
FRIDAY EVENT
Lunch
Lunch
Lunch
Lunch
Lunch
4
5
Freelance Treasure Hunting (spacepiratevala)
How does it look? Let's see.
Period
Monday
Tuesday
Wednesday
Thursday
Friday
1
2
How to Blow Things Up (Without Losing an Eye or Other Important Bodypart) ( Alianne)
How to Annoy Your Teachers (And Not Get Turned into Animals) ( Crichton)
3
FRIDAY EVENT
Lunch
Lunch
Lunch
Lunch
Lunch
4
5
Freelance Treasure Hunting (spacepiratevala)
This is nearly identical to the version on Rikku's profile page currently. The only differences are that I linked all three teachers the same way, and that I played with the column widths to find something that looked better, to me. Also, for the two classes with really long parentheticals, I decided it looked better to only link the first part of the class name, and I set the top row's valign tag to "bottom" out of sheer force of habit.
Rikku's table, the version which is currently on my profile:
Period
MONDAY
TUESDAY
WEDNESDAY
THURSDAY
FRIDAY
1
2
How to Blow Things Up (Without Losing an Eye or Other Important Bodypart) ( Alianne)
How to Annoy Your Teachers (And Not Get Turned into Animals) ( Crichton)
3
FRIDAY EVENT
Lunch
Lunch
Lunch
Lunch
Lunch
4
5
Freelance Treasure Hunting ( Mal Doran)
And the visual, which should oddly resemble that image up at the top of this insanely long post:
Period
MONDAY
TUESDAY
WEDNESDAY
THURSDAY
FRIDAY
1
2
How to Blow Things Up (Without Losing an Eye or Other Important Bodypart) ( Alianne)
How to Annoy Your Teachers (And Not Get Turned into Animals) ( Crichton)
3
FRIDAY EVENT
Lunch
Lunch
Lunch
Lunch
Lunch
4
5
Freelance Treasure Hunting ( Mal Doran)
It's easy enough when you break it down. Really. And hopefully this helped you do just that.
ENOUGH BLABBING, JUST GIVE ME A TEMPLATE
Can't argue with that!
Period
Monday
Tuesday
Wednesday
Thursday
Friday
1
2
3
FRIDAY EVENT
Lunch
Lunch
Lunch
Lunch
Lunch
4
5
Add things in where they need to go. That's much better than putting them where they don't belong.
Comments? Questions? Clarifications? Quiche?