Mr. Emu Tutorials: Lesson 3 - Tables and Lists *Web Design*

Lenny

Press "X" to admire hat
Joined
Jan 11, 2007
Messages
3,958
Location
Manchester
Today, I'm going to look at what I think is the most important thing in web design - tables. Also thrown into the mix is lists. I was going to play around with frames, but I've found the Nvu seems to, shall we say, despise them. If I can work out how Nvu does them, then I may add to this at a later date, if not, ah well - no great loss, anyway. I'm with Nvu on this, by the way - I abhor frames.

In case you missed them: Lesson 1 - The Basics, Lesson 2 - More Complicated Tags.

If you're having problems getting things to work, then please post your HTML code when you ask for help with the problem.

If you're having troubles with Nvu, then please ask in the Nvu Help Thread, or read Lesson 1 if you just need to know where to enter the code.

----------

Tables

A table is exactly what it says on the tin - a table. Ever inserted a table into Microsoft Word (or equivalent)? You can do exactly the same with HTML.

A table consists of three tags - <table></table>, <tr></tr> and <td></td>.

The <table> tag defines the table. It comes with some common attributes which you'll find very useful - height, width, border, cell spacing and cell padding, but I'll get to those in a bit.

Each row in a table is defined using the <tr> tag. Within each row is what is called a "cell" - an individual rectangle in the table. These are defined using the <td> tag - "table data".

A two row, two column table with a border, then, would be coded as such:

<table border="1">

<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
</tr>

<tr>
<td>Row 2, Col 1</td>
<td>Row 2, Col 2</td>
</tr>

</table>

Notice the structure - each cell is within a row, which itself is within a table. Also notice how the columns are set up - HTML tables do things in rows, so your columns are based on the number of cells per row.

It is also possible to make cells span multiple rows, and/or columns. For example, a table in with two rows and two columns, but only three cells (the first spans both rows):

<table border="1">

<tr>
<td rowspan="2">Row 1 and 2, Col 1</td>
<td>Row 1, Col 2</td>
</tr>

<tr>
<td>Row 2, Col 2</td>
</tr>

</table>

As the first cell in the first row spans both rows, there is only one cell in the second row. Remember that rows are spanned downwards - that is to say that if a cell spans two rows, it always starts in the first row and goes down to the second, rather than starting in the second and going up, thus it must be defined in the first row. Also remember that if a cell spans two rows, the row below has one less cell.

The same can be done but horizontally to make a cell that spans two columns:

<table border="1">

<tr>
<td colspan="2" >Row 1, Col 1 and 2</td>
</tr>

<tr>
<td>Row 2, Col 1</td>
<td>Row 2, Col 2</td>
</tr>

</table>

Notice this time that the first row, which contains a cell spanning both columns, has only one cell, whilst the second row has two. You have to remember that a cell spans columns from left to right.

And if you want to combine the two:

<table border="1">

<tr>
<td colspan="2" rowspan="2">Row 1 and 2, Col 1 and 2</td>
<td>Row 1, Col 3</td>
</tr>

<tr>
<td>Row 2, Col 3</td>
</tr>

<tr>
<td>Row 3, Col 1</td>
<td>Row 3, Col 2</td>
<td>Row 3, Col 3</td>
</tr>

</table>

If you have the mind to, you can create what is called "nested tables" - one table within another. Say, for example, you want a three row by three column table within the cell above that spans two rows and columns. It's a simple case of replacing the text between the <td></td> tags with a new table (in red to show the two tables):

<table border="1">

<tr>
<
td colspan="2" rowspan="2"><table border="1">

<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
<td>Row 1, Col 3</td>
</tr>

<tr>
<td>Row 2, Col 1</td>
<td>Row 2, Col 2</td>
<td>Row 2, Col 3</td>
</tr>

<tr>
<td>Row 3, Col 1</td>
<td>Row 3, Col 2</td>
<td>Row 3, Col 3</td>
</tr>

</table></td>
<td>Row 1, Col 3</td>
</tr>

<tr>
<td>Row 2, Col 3</td>
</tr>

<tr>
<td>Row 3, Col 1</td>
<td>Row 3, Col 2</td>
<td>Row 3, Col 3</td>
</tr>

</table>

It's my personal opinion that nested tables are the best thing since sliced bread. I love them so much that every single website I build is built using nested tables, because they're extremely easy to use (when you've got your head around them), and never go wrong - if it does go wrong, it's because I've messed up a width or twelve.

If your head is reeling, it might help to think of nested tables as layers - the first table is the bottom layer. When you nest a table within that, it is as if you taken a second layer and placed it on the first. A table nested then within the second table is like a third layer.

I understand that nested tables, and maybe tables as a whole, are probably the hardest thing I've covered so far (not hard to execute, rather they can be very hard to understand and make sense of, particularly as there are so many tags to close and open), so if people are terribly confused, complain, and I'll throw together a small pictorial aid before the end of the week.

One more thing to mention - any form of content can go between the <td> tags. You could nest another table, add simple text, paragraphs, images, links, videos, lists, anything.

-----

Table Attributes

You may remember that I earlier mentioned the attributes that can be used in the <table> tags. The ones I mentioned were: height, width, border, cell spacing, and cell padding. I'm now going to explain what each one does.

height - allows you to set the height of the table in pixels - height="number"

width - allows you to set the width of the table in pixels - width="number"

border - allows you to set the thickness of the table border in pixels. For no border, set the value to "0" - border="number"

cell spacing - allows you to set the space between each cell of the table in pixels. For no spacing, set the value to "0" - cell spacing="number"

cell padding - cell padding is the white space inside the cell between the border and the cell contents. The larger the value, the more white space there is. For no padding, set the value to "0" - cell padding="number"

You can also use attributes such as "bgcolor" and "bordercolor". I'll be covering the available colours in a future tutorial.

Individual cells can use the height, width, and bgcolor, whilst a row can have the height and bgcolor attributes.

All three tags can use a wider range of attributes, but I'm trying to keep it simple for the moment, and I doubt you'll need to use others until we get to CSS.

-----

Lists

A list is just that - a list of items. There are three types of lists - unordered lists, ordered lists, and definition lists.

An unordered list is a bullet-pointed list of data, and uses the tags <ul></ul> and <li></li>. The <ul> tag defines the unordered list, and content between the <li></li> tags is defined as a list item.

<ul>
<li>Harry Potter</li>
<li>Cheese</li>
<li>Zimbabwe</li>
</ul>

An ordered list is virtually the same, except it uses the <ol></ol> tags to define an ordered list, and each list item is numbered, rather than bullet-pointed.

<ol>
<li>Birth</li>
<li>Life</li>
<li>Death</li>
</ol>

A definition list, in contrast, is not a list of items. Instead, it is a list of terms and their definitions. It uses three tags - <dl></dl>, which defines it as a definition list, <dt></dt>, which defines a term, and <dd></dd> with defines a definition.

<dl>
<dt>The Chronicles Network</dt>
<dd>Forum, SFF, Cool</dd>
<dt>Real Life</dt>
<dd>Outside the internet, cold, bright, fresh air = poisonous</dd>
</dl>

Content between the <li> and <dd> tags can be anything - paragraphs, line breaks, images, links, other lists, etc.

Before I forget again - you can also put lists within lists and "nest" them. A pat on the back for whoever works it out (think of nested tables).

----------

And that's it for today. As usual, if you have any questions or problems, ask away. Don't forget to post your code if you are having a problem, and try out as many things as you can - don't just put lists in tables, but also use things from the first two lessons.

Next week, unless Nvu suddenly reveals that is actually a graphics package, I'll go through Forms.

Happy HTMLing!
 
I take it this means no-one has been having troubles with tables and lists?

Supah! :D :rolleyes:
 
I'm waiting on 'forms' and hoping that you get around to iFrames, which are so much cooler than regular frames. ;)

Actually, I know the basics for setting up forms - but since I couldn't get the form I was working with to do what I wanted, I stopped working with them.
 
Oh, you really won't be happy with what I'm doing, then. :rolleyes:

I've decided that Forms are useless without something behind them, so I'm going to stick them into a second ASP lesson. Which means that if you (or others) can't wait, it might be best to PM me with your code and explain your problem.

Same goes for any other problem - if anyone can't wait for the actual thread, which could be three weeks away, drop me a PM and I'll answer as quickly as I can.

Frames will come eventually, and will most probably end up being iFrames, rather than the regular variety (I just hope that Nvu doesn't laugh at me again).
 
I notice you've only talked about the width and height of columns and cells in pixels, while a friend recommends doing them in percentages of the total dimension available, so that squeezing up the screen gets them all clustering friendly like rather than some being pushed off the edge.
Now, I estimate about 8,500 links in my site, and I'm building it in a USB key. When I want to release it on the unsuspecting world will I have to change it all to URL addresses somewhere? And, if this be the case, is there a standard program to do it automatically?
 
Pixels or percentages depends on your preferences. The Chrons site, for example, will use percentages so that is fits the entire screen regardless of resolution, whilst I prefer to centre my sites and have them a fixed width that will be seen in the centre of all screens. The current trend (it's kind of like a Web Fashion! :p) is for websites to be centred and a fixed size, but either works fine.

Both have their disadvantages, of course - if you're using images and percentages, then you need to make sure that your images are able to repeat in the x and y directions seamlessly (up and down, and left and right), and if youre using pixels then it can sometimes be hell to get everything to match up. I still work with paper designs on which I scribble heights and widths in pixels, and then check them with my calculator.

---

As for your links, it depends how you're doing it. If your links look something like:

<a href="f:/Chrispy's Site/Items/item1.mp3"></a>

...then when you come to publish the site to the web, you'll need to update every single link.

What I advise doing is setting up multiple folders within the site folder for different things, and then linking to the folder and the item rather than the full path name. Say your site includes images, and you link to MP3 files and other items, then I'd set your folders up like so:

Site Folder
> images
> mp3s
> other_items

Three folders within one containing folder - the containing folder (Site Folder) should only contain HTML pages, whilst the other three folders contain the different things you link to, like MP3 files or images. Then, when you come to link to things, you can easily do it like this (to link to an MP3 file in the mp3s folder):

<a href="mp3s/song1.mp3"></a>

...or (to link to an HTML page, all of which should be saved in the containing folder rather than their own separate one):

<a href="superpage.html"></a>

Does that help? If it's not completely clear, I'll take a few screenshots of one of my sites for you.

As for a program that does it... not that I know of, but there are ways to do it easily manually.
 
Yes, a bit like you said. Main folder "Musicsite" subfolders "HTML pages", "Samples" (mp3s) and "squeezed covers" (mainly disc sleeves and photos, but a few graphic elements. I should rename the folder, but with the number of links I have going to it, I suspect this is not going to happen).
I ran it in another computer (to see what it looked like in Internet Explorer, among other things) and just a few of the links (randomly distributed) failed, and needed replacing. Odd, that.

And manually changing lots and lots of links is a bit mechanical – it's what computers and undergraduates were designed for.
 
E 'at's champion. Get it right whilst you're in the early stages and it's less of a pain. :)

How's it all going, by the way? Have you managed to get your tables sorted?
 
Tables are nesting like a dream; I just wish I could find some preferences so I don't need to redo their defaults all the time. Still, cpoy/paste can do marvels. mp3s going back to the main page when they've finished playing, not so good. There's going to be a lot of editing when I find out how to do that (Colin's sent me some code to try out, so it might even start tomorrow) Getting the thing to look the same on different browsers, is that important? As long as it functions the same? Because, for the time being it doesn't.

Please don't tell me I should have started with a simpler exercise; it needed to be real for me to put the effort into learning it (forty years ago, even thirty five, this wouldn't have been the case) And it's not going to look all that spectacular, not like yours, anyway. Nay, bot iffit wuks, 'tl be right grately.
Now I'll joost glance at yoor nu page, afor shutting dawn for 't night.
 
If you can't get the code from Colin to work, it might be worth playing MP3s in a new window (Lesson 2 will help you with that - look for the target attribute under the Anchor bit).

Getting it to look the same on different browsers is something to do when it works, really. No point having a site that looks pretty in Opera, FF, IE, Maxthon, Safari, and powers know what else, if it doesn't work for toffee.

As for starting with a simpler exercise... you never get anything done if you start simple and take your time working up. What type of place would the world be if all the great inventors and engineers spent their time getting simple things right before progressing onto more complex things rather than jumping into the deep end? Anyway, half the fun is in trying to stay afloat after throwing yourself in it! :p
 
Lenny - are you planning to work with div-layers at all?

I have a div layer on my site (which sort of works like a nested table, but it sits where I want it better) - H2sMsK.com

Here's something I had a question about - my other sub-site -> Harry Dresden - Wizard -> I have it set with a landing page that asks how the user wants to view, b/c I couldn't figure out how to make it 'float' correctly when the browser windows are different sizes. I tried all SORTS of codes and nothing seemed to work, so I built the thing twice.

I'd really rather not do that again when I redesign if I don't have to.

The problem I run into is that I browse with non-full-screen windows, so I design for such, but then it doesn't always work in a full-screen window.

As an FYI - no, I won't be using an image map when I redesign. They're too darned hard to update. *g*
 
Another question about tables -

Somehow I managed to get this to line up correctly:

Photography by Highlander II

but, at one point, it didn't want to work out correctly - getting everything to line up and not be off-center was a pain. Don't ask me how I finally managed it, but I did. But, for a while, the left and right sides of the table in the center didn't line up, which off-set part of the text at the top and bottom.

I know that w/o seeing the 'off-set', it's probably hard to determine what the issue was, but maybe someone else is having the same issue.
 
Lenny - are you planning to work with div-layers at all?

I wasn't going to, but if you'd like a tutorial about DIV Layers, then I'd be happy to add it in.

I don't actually use DIV layers - I find that I can do everything I want with tables, and that I can do it easier with tables than with DIV layers.

Here's something I had a question about - my other sub-site -> Harry Dresden - Wizard -> I have it set with a landing page that asks how the user wants to view, b/c I couldn't figure out how to make it 'float' correctly when the browser windows are different sizes. I tried all SORTS of codes and nothing seemed to work, so I built the thing twice.

I'll have a look at it, if you want. I may be able to sort it ut for you.

Another question about tables -

Somehow I managed to get this to line up correctly:

Photography by Highlander II

but, at one point, it didn't want to work out correctly - getting everything to line up and not be off-center was a pain. Don't ask me how I finally managed it, but I did. But, for a while, the left and right sides of the table in the center didn't line up, which off-set part of the text at the top and bottom.

I know that w/o seeing the 'off-set', it's probably hard to determine what the issue was, but maybe someone else is having the same issue.

Could have been bad widths, could have been content that was too big, or it could have even been lots of &nbsp's - if I see an &nbspp in my code I delete it, as it can often interfere with heights and widths that I've set.
 
I don't want to start a war, but isn't DIV generally considered "more modern" and "better" than tables-for-everything?
 
It probably is, but I find them to be horrible to use. And although DIVs might be "more modern" and "better", a lot of big sites still use tables.

I personally see no reason to switch to DIVs and DIV layers as I can do everything I need to do with tables.
 
In the case of my site, as I set it up, the DIV layer was easier. I could also assign a different attribute to DIV than to TABLE. I have CSS in the [head] section that 'floats' the text of the DIV layer over the table behind it and allows for the scrolling.

Could that be done in a table? Possible, but the code that I found did it w/ DIV layers, so that's what I used. ;)

I get too frustrated to try to write it all on my own, so I copy/paste and adjust to make things work. 'Trial and Error' doesn't work as well for me with code as it does w/ some other things I do. *g*
 
I've been fiddling around with HTML for a while, (i.e. ten years) but only at a very basic level. More recently I've getting a bit more into it, adding Javascript and more recently CSS. My comment was based on the accumulation of advice from various books I've read. Not a definitive statement. Tables are best for some things anyway, and CSS supports them. They're probably also more browser-independent: I've found some weirdness trying to get some things like 3-column format with floating wobbles (can't remember the details) to work cross-browser.
 

Back
Top