basic user info tables
Basic Tables Info
You need 3 different HTML tags to make a table. They are as follows.
- You need one pair per table you create; a at the very beginning of your table and a at the very end.
- This is a table row tag. Like the name implies, you use it to create rows in your tables, a at the start of the row and a at the end of the row. You will need one pair of tags for each row.
- This is a table data tag, used to create individual cells within each row of a table. Just like a tag, you need one pair per cell, with a at the start and a at the end.
Example table:
Let's say we want a simple table with 3 columns and 5 rows. This is what the coding looks like:
1 a1 b1 c2 a2 b2 c3 a3 b3 c4 a4 b4 c5 a5 b5 c
And the table:
1 a1 b1 c2 a2 b2 c3 a3 b3 c4 a4 b4 c5 a5 b5 c
Notice how I did not hit enter between the tags. It's a personal preference, but if you do choose to use the enter key, it can possibly cause gaps between the rows and cells of your table.
Another thing you should know about tables is colspan and rowspan. When you want a cell to stretch over multiple columns (colspan) or rows (rowspan) in your table, that is when these come into play. They are both used with the tag, and the number you enter is how many columns or rows you want that particular cell to cover. Using the same 3 column, 5 row example:
Colspan Table
12 a2 b2 c3 a3 b4 a4 b4 c5 a5 c
12 a2 b2 c3 a3 b4 a4 b4 c5 a5 c
Rowspan Table
1 a1 b1 c2 b2 c3 a3 b3 c4 a4 b5 a
1 a1 b1 c2 b2 c3 a3 b3 c4 a4 b5 a
If you want to change the spacing between table cells, you can add cellspacing to your tag, or if you want to change the spacing between the edge of the cell and the cell content, you can add cellpadding to your tag.
Cellspacing and Cellpadding Table
1 a1 b1 c2 a2 b2 c3 a3 b3 c4 a4 b4 c5 a5 b5 c
1 a1 b1 c2 a2 b2 c3 a3 b3 c4 a4 b4 c5 a5 b5 c
Simple Table - aka text alignment in your user info
You might see someone with all of the text aligned in a box in the center of their user info. Even though it might not look like it, they're using a table. I have bolded the table width so that you can see where it is - you can change this to a number of your choosing, either in pixels (like I have) or percents (%).
width="350">
some text goes here
some more text goes here
Notice how I did not hit enter between the tags. It's a personal preference, but if you do choose to use the enter key, it can possibly cause gaps between the rows and cells of your table.
One more thing you should know about tables is colspan and rowspan. When you want a cell to stretch over multiple columns (colspan) or rows (rowspan) in your table, that is when these come into play. They are both used with the tag, and the number you enter is how many columns or rows you want that particular cell to cover.
Simple Table with Header Bars
Now we'll add some colors to give the previous table "headers". So you can see the changes I've made, I'll make the new bits of code bold.
about me
some text goes hereother stuff
some more text goes here<
about me
Notice how I did not hit enter between the tags. It's a personal preference, but if you do choose to use the enter key, it can possibly cause gaps between the rows and cells of your table.
other stuff
One more thing you should know about tables is colspan and rowspan. When you want a cell to stretch over multiple columns (colspan) or rows (rowspan) in your table, that is when these come into play. They are both used with the tag, and the number you enter is how many columns or rows you want that particular cell to cover.
And now we'll add some font changes to the headers.
cellpadding="3" cellspacing="2">align="right">about me
some text goes here
align="right">other stuff
some more text goes here
about me
Notice how I did not hit enter between the tags. It's a personal preference, but if you do choose to use the enter key, it can possibly cause gaps between the rows and cells of your table.
other stuff
One more thing you should know about tables is colspan and rowspan. When you want a cell to stretch over multiple columns (colspan) or rows (rowspan) in your table, that is when these come into play. They are both used with the tag, and the number you enter is how many columns or rows you want that particular cell to cover.
That should give you an idea of how you can use tables in your user info. For other things you can do with tables, check out http://www.livejournal.com/users/carriep63t2/info and http://carriep63t2.livejournal.com/2913.html.