ALIGNING YOUR CONTENT!

Web Design Lessons > Lesson 1-09: Aligning Your Content

Welcome to the next lesson of your free online web design course. If you think you are having difficulty learning HTML or you just do not have the time for it anymore, you know what to do - go and purchase SiteBuildIt! It makes designing your highly profitable website a breeze, taking care of all the technical details. If, on the other hand, you feel great about your progress so far, then kudos to you - and some more delicious HTML tags and attributes, of course! :)

Centering Your Content The Old Way

The <center> tag is one of the oldest methods for aligning your content. You just put the content you need centered between the <center> and </center> tags and voila! - your content is centered. Let's center some text:

When you copy and paste the above code to your notepad and save it as .htm, you should have "Some text content" centered on the screen:

Using Divisions

Online web design course continues as we delve deeper into aligning our content. By using the <div> tag along with the "align" attribute, you can align any piece of content to the left, to the right or to the center. Just copy and paste the sample code below to your text editor:

We should have three pieces of text aligned left, center and right respectively:

You can also use the <div> tag and the "align" attribute to justify some text so that it will be aligned both to the left and to the right and look neat and tidy:

We'll get a neat paragraph of shameless self-promotion from me as an output:

As you can see, both sides of this paragraph are justified properly to the left and to the right.

**Before we proceed further in this lesson of our free online web design course, please note that you can use the <div> tag to align any type of content you want (i.e. text, images, links, tables, flash animations, etc.)

Now let's learn how to align content to the top, middle or bottom of a table cell.

Aligning Inside The Cell

OK, let's say we have a two-column-single-row table, and let's assume that this table is 300 pixels wide, with a picture inside one cell and some text inside the other. And let's also set the "width" attributes of one of the cells to 50%, in order to make the table shared equally by the two cells (the other cell will be automatically set to 100% - 50% = 50% by default by the web browsers, so we do not need to manually set it to 50%, as well):

In the output, you should notice that the text inside the second cell automatically gets aligned horizontally to the left and vertically to the middle of the cell:

Some text

Now... We can align the text horizontally the center or the right, if we want to by adding an "align" attribute to the second <td> tag. Let's align our text to the center:

Our text should align to the center horizontally:

Some text

If you want to vertically align the contents of a particular cell to the top or bottom, you need to add a "valign" (vertical alignment) attribute to the corresponding <td> tag as well. For example, if we wish to align the text to the top, we add a valign="top" value to the second <td> tag:

This should align the text to the top of the cell:

Some text

Similarly, you can align the contents of a particular cell to the bottom by adding a valign="bottom" value to the corresponding <td> tag.

Sidenote: You can also use the <div> tag along with the "valign" attribute inside the cell (in between the <td> and </td> tags) to get the same results! However, this would be a redundant use of the <div> tag.

Aligning Tables

If you have tables that need to be centered or aligned to the sides, the top or the bottom, you can simply use the same attributes we used with the <td> tags above; the "align" and "valign" tags. Below is a sample code, which contains two tables - one big table, and a smaller table that is "nested" inside the big table:

For your convenience, I've bolded out the nested table code above. The code will display in a web browser as shown below:

The nested table is aligned to the left by default. What if we want to align it to the center? Well, we use the align="center" inside the <table> tag (of the nested table), as shown below:

The above code will get our nested table centered:

What if our outer table is 150 pixels high and we want to align our nested table to the bottom? This is the spot where it gets a little complicated: The <table> tag doesn't support a "valign" attribute! Therefore, we have to put the "valign" attribute inside the <td> tag of our outer table:

The above HTML code will get our nested table align to the center bottom of the 150-pixel-high outer table:

Sidenote: We could have defined the align="center" expression inside the same <td> tag as well - it would be the same as defining it inside the <table> tag of our nested table.

Aligning Paragraphs

Our free online web design course lesson will continue by teaching you how to align the content of your paragraphs. As we have learned in Lesson 1-03-02, you can use the <p> and </p> tags to create paragraphs. By adding an "align" attribute to your <p> tag, you can actually align your text to the left, the center and to the right or you can justify it. Let's do an example by aligning some text to the right of the screen:

We get a paragraph of text aligned to the right:

You can also justify your paragraphs or align them to the center or by using the "justify" and "center" values with the "align" attribute.

Sidenote #1: Check out my web design resources page to download a superb eBook!

Sidenote #2: If you enjoyed this lesson, please link to it :)

This lesson is over. Next lesson of your free web design course is going to teach you how to integrate forms into your HTML documents.

Nearby Lessons:

Back To Top

Home  |  Resources  |  Articles  |  Lessons  |  Directory  |  Forums

Contact  |  Submit Article  |  Submit Site

Forums Archive  |  Site Map

Copyright© 2004 Onur Özcan. All Rights Reserved.

Long Distance Phone Service
Online-web-design-course.com

You must set the "ad_network_ads.txt" file to be writable.