Lenny
Press "X" to admire hat
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:
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):
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:
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:
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):
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.
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.
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.
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!
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:
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):
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:
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:
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):
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.
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.
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.
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!
