Monday, February 12, 2007

Linda's How-Do-I Series? How Do I Build A Simple Table?

Tables can be very, very useful. The <***TABLE><***/TABLE> tag (minus the 3 ***'s) displays its' content in a tabular fashion.

Your table can contain one column and one row or multiple columns and multiple rows. The contents can be text, numbers, images, combinations of all, etc. Columns and rows can be of different heights and widths.

So, how do you build a simple table? Well, each table starts and ends with a TABLE tag and TBODY contents tag. Each table row starts and ends with a TR tag. Each row can contain one or more cells of table data. Each table data starts and ends with a TD tag. Table data can be text, images, or a combination of both.

Let's say I want to build a simple table with the heading "My Websites" and my "Linda Walsh Originals" website listed. Also, I want a 1px border around my table so I can see what my tables borders are. If I set the borders to "0" then no borders will show. So, how would I build this simple table?

Here's how (minus the ***'s which are there so you can view the HTML in this article):

<***h4>My Websites:<***/h4><***table border="1"><***tbody><***tr><***td>Linda Walsh Originals<***/td><***/tr><***/tbody><***/table>

That produces this:

My Websites:

Linda Walsh Originals

Now, let's say I want my table to have one row with 2 columns. The names of my two doll pattern websites (Linda Walsh Originals and Linda Walsh Originals E-Patterns) will be in each column. How would I do that?

Here's how (minus the ***'s which are there so you can view the HTML in this article):

<***h4>My Websites<***/h4><***table border="1"><***tbody><***tr><***td>Linda Walsh Originals<***/td><***td>Linda Walsh Originals E-Patterns<***/td><***/tr><***/tbody><***/table>

That produces this:

My Websites

Linda Walsh OriginalsLinda Walsh Originals E-Patterns


Now, let's say that I want my table to have a 2nd row with 2 columns. In my second row will be the names of a couple of my blogs. How would I do that?

Here's how (minus the ***'s which are there so you can view the HTML in this article):

<***h4>My Websites<***/h4><***table border="1"><***tbody><***tr><***td>Linda Walsh Originals<***/td><***td>Linda Walsh Originals E-Patterns<***/td><***/tr><***tr><***td>Linda's Blog<***/td><***td>DOLLS Blog<***/td><***/tr><***/tbody><***/table>

And, that produces this:

My Websites

Linda Walsh OriginalsLinda Walsh Originals E-Patterns
Linda's BlogDOLLS Blog


Now let's say I want to add color a blue color (i.e. bordercolor="#000069") to my border and I want to thicker the border. Do thicker the border I need to increase the amount of pixels - ley's say to 4. How would I do that?

Here's how (minus the ***'s which are there so you can view the HTML in this article):

<***h4>My Websites<***/h4><***table bordercolor="#000069" border="4"><***tbody><***tr><***td>Linda Walsh Originals<***/td><***td>Linda Walsh Originals E-Patterns<***/td><***/tr><***tr><***td>Linda's Blog<***/td><***td>DOLLS Blog<***/td><***/tr><***/tbody><***/table>

That produces this:

My Websites

Linda Walsh OriginalsLinda Walsh Originals E-Patterns
Linda's BlogDOLLS Blog


Now, let's say I want to add the backgound color of yellow (i.e. bgcolor="#FFFF00") to the table. How would I do that?

Here's how (minus the ***'s which are there so you can view the HTML in this article):

<***h4>My Websites<***/h4><***table bordercolor="#000069" bgcolor="#ffff00" border="4"><***tbody><***tr><***td>Linda Walsh Originals<***/td><***td>Linda Walsh Originals E-Patterns<***/td><***/tr><***tr><***td>Linda's Blog<***/td><***td>DOLLS Blog<***/td><***/tr><***/tbody><***/table>

That produces this:

My Websites

Linda Walsh OriginalsLinda Walsh Originals E-Patterns
Linda's BlogDOLLS Blog


Now, let's say I want to make my website and blog names clickable back to my websites and blogs within the table. How would I do that?

Here's how (minus the ***'s which are there so you can view the HTML in this article):


<***h4>My Websites<***/h4><***table bordercolor="#000069" bgcolor="#ffff00" border="4"><***tbody><***tr><***td><***a href="http://lindawalshoriginals.com">Linda Walsh Originals<***/a><***/td><***td><***a href="http://lindawalshoriginalsepatterns.com">Linda Walsh Originals E-Patterns<***/a><***/td><***/tr><***tr><***td><***a href="http://lindawalshoriginals.blogspot.com">Linda's Blog<***/a><***/td><***td><***a href="http://dollsbylindawalshoriginals.blogspot.com/">DOLLS Blog<***/a><***/td><***/tr><***/tbody><***/table>

And, that produces this:

My Websites

Linda Walsh OriginalsLinda Walsh Originals E-Patterns
Linda's BlogDOLLS Blog


Hopefully, now you know how to build a simple table, add a colored border, and add background to the cells. Plus, now you know how to make the content within your cells clickable. Next time we will add some images to our table.

Posted by Linda Walsh Originals - "Doll Patterns for Grown-up Girls!"

No comments:

Post a Comment