SB Tutorial: Mixed Content Side by Side or Tables
Account Status: All
Actions: Mixed Content Side by Side
Theme: All
What you want to accomplish:
How You Accomplish It:
This actually isn't hard but seems that way because LiveJournal took away our ability to create tables in our journals so we have to make them by scratch using the html coding.
Let's Start With Basics:
This is our coding for a table. Let's start at the beginning of the coding with the attributes.
1. As you can see, I've made the border=0 because I don't what a border showing up. Customizing a border for a table is a lot more complicated so when it comes to LJ I just don't just borders.
2. Now cellspacing is important. This is basically the padding around whatever is in your table's cells. This just means there is a little space between them so they don't look too close together.
3. The style attributes are a good place for width, height, font-family, font-size, etc. Here I'm just doing height and width. Width is important because you have to know how big you want your table to be. I have it set at 95% which only means it will be 95% of the width of my journal entry. You can also make it a set width say 600px. Height is a good one to leave on auto because you may have a small table or a table that has many rows.
4. You put the body of your table between the and .
5. basically means this is one row so if you've got 4 lines of between the this means you'll have for columns.
6. Here you can see I have the even columns with an align="left" (horizontal) and a valign="middle" (veritcal). This is how the text in the image above is floating in the middle range of the image next to it.
7. If we want to add an image to the first TD section it would go something like this:
![]()
But in this case we have a specific sized image so we need to add width and height into this coding:
![]()
But as you can see from the above image I also have a border around the image.
![]()
Once you insert the url for your image you are done with this line.
8. Now what about this line:
We want all the information about the book here right? So:
Title: Outlander
Author: Diana Gabaldon
Pages: 896
Link: Amazon
Notice the coding has spread down several lines. This is an easy way in LJ to make paragraphs. You can also keep everything on the same line and and a
whenever you want to create a new paragraph or line. This means if you want to skip a line you need
. (The is a bold function for anyone out there who didn't know that.)
Now I want to add the link to Amazon.com:
Title: Outlander
Author: Diana Gabaldon
Pages: 896
Link: Amazon
9. What if you want two rows?
You will basically be copying everything from to and duplicating it.
10. According to the above table the or columns are flexible meaning that if the text gets too big or an image is resized it will shrink the other columns around it.
11. How to prevent this? Add a width for all the or columns. We are working with a table that is 95% of your post but it is 100% of the size of the table so you want to cut down these columns to be a quarter or a third or even half of the table's 100%. Four columns at 25%. They will now remain their width despite what is add to each cell but will flex with your table if say your entry becomes a different width in a different layout.
Any more questions? Comment.
Actions: Mixed Content Side by Side
Theme: All
What you want to accomplish:
How You Accomplish It:
This actually isn't hard but seems that way because LiveJournal took away our ability to create tables in our journals so we have to make them by scratch using the html coding.
Let's Start With Basics:
This is our coding for a table. Let's start at the beginning of the coding with the attributes.
1. As you can see, I've made the border=0 because I don't what a border showing up. Customizing a border for a table is a lot more complicated so when it comes to LJ I just don't just borders.
2. Now cellspacing is important. This is basically the padding around whatever is in your table's cells. This just means there is a little space between them so they don't look too close together.
3. The style attributes are a good place for width, height, font-family, font-size, etc. Here I'm just doing height and width. Width is important because you have to know how big you want your table to be. I have it set at 95% which only means it will be 95% of the width of my journal entry. You can also make it a set width say 600px. Height is a good one to leave on auto because you may have a small table or a table that has many rows.
4. You put the body of your table between the and .
5. basically means this is one row so if you've got 4 lines of between the this means you'll have for columns.
6. Here you can see I have the even columns with an align="left" (horizontal) and a valign="middle" (veritcal). This is how the text in the image above is floating in the middle range of the image next to it.
7. If we want to add an image to the first TD section it would go something like this:
But in this case we have a specific sized image so we need to add width and height into this coding:
But as you can see from the above image I also have a border around the image.
Once you insert the url for your image you are done with this line.
8. Now what about this line:
We want all the information about the book here right? So:
Title: Outlander
Author: Diana Gabaldon
Pages: 896
Link: Amazon
Notice the coding has spread down several lines. This is an easy way in LJ to make paragraphs. You can also keep everything on the same line and and a
whenever you want to create a new paragraph or line. This means if you want to skip a line you need
. (The is a bold function for anyone out there who didn't know that.)
Now I want to add the link to Amazon.com:
Title: Outlander
Author: Diana Gabaldon
Pages: 896
Link: Amazon
9. What if you want two rows?
You will basically be copying everything from to and duplicating it.
10. According to the above table the or columns are flexible meaning that if the text gets too big or an image is resized it will shrink the other columns around it.
11. How to prevent this? Add a width for all the or columns. We are working with a table that is 95% of your post but it is 100% of the size of the table so you want to cut down these columns to be a quarter or a third or even half of the table's 100%. Four columns at 25%. They will now remain their width despite what is add to each cell but will flex with your table if say your entry becomes a different width in a different layout.
Any more questions? Comment.