Custom Search

HTML Lesson 4

by Caroline Seawright

 

Here's HTML Lesson 4! If you've missed out, here is HTML Lesson 1 and HTML Lesson 2 and HTML Lesson 3 (don't worry - they will open in new windows, so you won't lose your place!)

Tables

Tables can be rather confusing, and very frustrating at times, because often the browser draws tables the way it wants, not the way you want it! (Even after 3 years of doing tables, I want to toss them out the window! If only the graphics department would give me a design that doesn't require tables! Tables were never designed to be used for making a page look good....)

I hope that my lesson is not too complex, though - tell me if it is, and I'll see what I can do to simplify this lesson! ^^;

But let's start off with a simple table.

  
  

That's a table, two columns across by two rows down, with the border showing, and nothing inside but nonbreaking spaces ( ).

Here is the code I used:

<table border=1>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr><tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Table on the outside (always). Tr around td. If this is out of order, or if the tags are not closed, then your table may not display at all, or it might display incorrectly!

Simplified, it goes:

<table>
  <tr>
    <td>
    </td>
  </tr>
</table>

If you want more rows down, you repeat the tr and td tags inside the table tags! You'll see more examples below.

Note that if I don't put something between the td tags (this is called a cell) (in this case, the nonbreaking spaces), the table will not show properly in some browsers. Here is an example, with nothing in the bottom right cell:

  
 

Now, when making a table, one thing that you have to be careful of is your addition! Tables were designed to have the same amount of cells going across, on each line down. You might have to do some math, especially in big tables, but this is what I mean:

1234
1234
1234

Each cell across, in this case, must add up to 4. This is what happens if I miss some cells:

134
1234
124

See how the numbers fail to line up, now? See how there are missing blocks at the end of the top and bottom rows? When working with tables, we're aiming at having our numbers lining up, without having missing cells!

You might ask, what if you want a cell to stretch all the way, or part way across a table? What if you want to have 4 cells across on one line, but only two on the next, with each cell double the width of the normal cells. Eg:

1234
1 & 23 & 4
1234

For this, we add an attribute in the td tag, called colspan, as it spans the columns! Here is how I used it (notice how it still adds up to 4 across? Colspan=2 + colspan=2 is equal to 4!):

<table border=1>
  <tr>
    <td><b>1</b></td>
    <td><b>2</b></td>
    <td><b>3</b></td>
    <td><b>4</b></td>
  </tr><tr>
    <td colspan=2>1 & 2</td>
    <td colspan=2>3 & 4</td>
  </tr><tr>
    <td><i>1</i></td>
    <td><i>2</i></td>
    <td><i>3</i></td>
    <td><i>4</i></td>
  </tr>
</table>

We also can use the attribute rowspan, to span rows instead of columns:

<table border=1>
  <tr>
    <td rowspan=3><b>1 & 1 & 1</b></td>
    <td><b>2</b></td>
    <td><b>3</b></td>
    <td><b>4</b></td>
  </tr><tr>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr><tr>
    <td><i>2</i></td>
    <td><i>3</i></td>
    <td><i>4</i></td>
  </tr>
</table>

1
& 1
& 1
234
234
234

Want to know how to make the borders different sizes, now you have a basic table going? (Remember to play around, trying to make bigger or smaller tables with different amounts of cells in rows and columns! See for yourself what you can and can't do with rowspan and colspan!) Here are some simple attributes for table:

<table border=1 cellpadding=4>

12
12

<table border=1 cellspacing=4>

12
12

<table border=1 width="100%">

12
12

<table border=1 width=100>

12
12

<table border=1 height=100>

12
12

You can mix and match these (apart from the width - you can only have one type of width - percentages or pixel width!) like so:

<table border=1 cellspacing=4 cellpadding=8 height=100 width=100>

12
12

Have fun, play around, and see what sorts of tables your can come up with! Wherever you have a number, change it! You can use 0, too! See what happens when you put border=0 instead of border=1! See what you can do!

Try putting the height and width in the td as well as the table! Just remember to make sure that the numbers you put in each td add up to the correct height and width specified in the table! It can be messy, but if you use a little math, you should be fine. Here's an example to leave you with:

12
12
<table border=1 cellspacing=4 cellpadding=8 height=100 width=100>
  <tr>
    <td height="30" width="20">1</td>
    <td height="30" width="80">2</td>
  </tr><tr>
    <td height="70" width="20">1</td>
    <td height="70" width="80">2</td>
  </tr>
</table>

See how 30 + 70 (down) = 100 height... and 20 + 80 (across) = 100 width. Notice that the height is the same between the tr attribues (first lot is 30, second is 70) and the width is the same on the corresponding line of the td? I hope you see what I'm getting at there!!)

See what you can do with that!! Good luck! ^_^

Next Lesson, I will go more into tables. I'll try to explain how you can use different alignments with tables, how to put text and images into the table (though you might have picked that one up already!), and I'll also tell you where not to put things in tables, too!

End of Lesson 4

Go on to HTML Lesson 5 for more!

That's it for this lesson! I hope this helps! ^_^


© Caroline 'Kunoichi' Seawright 2000 - present

If you enjoyed this page, please join my Egyptology & Archaeology Essays Mailing List.

Or contact me on Twitter:

comments powered by Disqus