Lesson 2: HTML Advanced
All layout coding works on a basic principle. You have a tag, and in that tag are attributes and values. For instance:That entire line is a tag - anything that goes inside the arrow brackets < >. Table is the property you're styling, width is an attribute and the number 400 is a value so the syntax of a tag looks like this:
property attribute="value"
Values should always be surrounded by quotation marks - either double or single " or ' - to make sure your code is valid. ^^
This syntax doesn't just apply to tables, but to all HTML including codes like font and span.
The faster you learn the three terms tag, attribute and value the easier Coding School will be but be aware that there are other names for them, these are just the ones that make the most sense to me.
Lesson
This lesson, I'm going to teach you the rest of tables and you're going to code something like this. Notice how it's not much different from your last assignment, but that it has colours involved. I've even made the colour of the page itself change. ^^ Here's the code:
Now then, you will remember some of that, since I made you write it out about 60 times for assignment one. XD However, you've probably already spotted the new stuff, right? Most importantly the background, border color and rowspan.
We're also going to use nested tables* and valign, cellspacing and we're going to discuss body background too. *rubs hands together*
* A nested table (shown here with the quiggle image) is simply a table inside another table. They come in handy if you want to alter the dimensions of a single cell and a lot of other things you can't do with an ordinary table. I've used borders and extra background colours to show you where the difference lies, but you could treat it however you wanted.
| Tag | Description |
| bgcolor="#E0E5EA" | This one is actually pretty simple. I'm not sure I even need to explain it. =P The bgcolor attribute is what actually sets the background colour. I always use hex codes* personally, but feel free to use colour names* if you wish. You can apply bgcolor to many tags including body and table. |
|
* Colours on the web are determined either by name or hex code. Names are fairly simple, things like red and orange, and you can get a pretty good list of colour names from W3S. Hex codes on the other hand require either a graphics programme (MS Paint is okay and usually comes free with your computer) or a list like the W3S one (which isn't very comprehensive as far as hex codes go). Hex codes consist of six numbers following a # hash. It's also possible to use RBG numbers (again with a graphics programme) but I have no experience with them.
I would strongly recommend using hex codes if you can, especially for more advanced layouts, because all browsers display colours differently if you use names, whereas the hex codes are much more accurate. | |
| bordercolor="#617689" | bordercolor sets the colour of your table borders. Putting this in the table tag means that the entire table's borders change - if you put it in a td tag, then only that cell's borders will change. ^^ |
| cellspacing="5" | cellspacing is much like cellpadding in that it puts 'white space' around your cell. However, unlike cellpadding which puts the space inside the cell itself, cellspacing puts it outside of the cell. If you set it to 0, for example, each cell would be touching the next and the border would be a thin line rather than separated by blank space. |
| valign="center" | Valign is vertical alignment and it works in much the same way as align does. The values are top, bottom and middle and will affect where the contents of the table go. The default is middle so unless you change it all your content will appear in the middle of the table, height-wise. This has its uses but you can experiment with the valign values to see what you prefer. |
| rowspan="2" | Like colspan, this attribute merges two or more cells so that you can have a large image or block of text without exploding your table's dimensions, except this merges them vertically and is much harder to figure out. =P Play around with it. ^__^ |
Tables can be fun and quite versatile. They're enough to liven up your pages (assuming you don't mind a lot of typing) so it's important to understand them, even if - like me - you abandon them as soon as you understand CSS. XD
Assignment
I want you to start a new table from scratch (that is, you could use the table from lesson 1 but I don't recommend it), combining what you've learned in lessons one and two to create a table that:- Displays an understanding of all the attributes and values I've mentioned both in lessons one and two (by this I mean that you should use each attribute at least once)
- Shows variety and a growing understanding of the visual aspects of layout coding (fonts, colours, etc)
- Has at least five rows
- Is at least four columns across
- Has at least two images in it
- Has differently formatted text in every cell
- Has a border of some kind
Lesson 3 ->