| Week 8 - HTML Tables  | Now we move into the more advanced features of HTML. Tables are tricky to learn, but once you understand how to build them, you'll never have a problem displaying tabular data on any of your Web pages. If you're really good, you might be able to create a table faster in plain HTML than some designers can with a WYSIWYG editor. Note: if you didn't receive the previous weeks you can always pick up missed lessons online at: http://webdesign.about.com/c/ec/9lost.htm You can also get the lessons more quickly if you'd like. | |
| Syllabus |
Week 8
- HTML Table Tags - the basics of building tables
- When to Use Tables - and when not to
- Homework
|
|
| HTML Table Tags |
How do you build an HTML table from scratch?
There are only three tags you need to learn to build a basic table: There's One More Table Tag You Should Learn
The <th> tag acts a lot like the <td> tag, but it's a table header tag, rather than a plain table cell. Use this at the top and sides of your table columns and rows to define what information is in your HTML tables.
|
HTML Table Attributes
The only attribute of the <table> tag we'll use on a regular basis is the "border" attribute. There are many other possible attributes to use, many are deprecated or invalid. This article explains both the valid attributes and alternatives to the invalid or deprecated ones.
|
Colspan and Rowspan Attributes
These attributes weren't in the last article because they are attributes of the <td> and <th> tags. They allow your cells to take up the space of more than one row or column. If you can't visualize what the HTML in this article does, try pasting the examples into your Web page.
|
Get Fancy - Lots More Table Tags
If you're bored with a basic table, you can use other table tags to enhance your tables. This is very advanced, and most people never use these tags. But they give you lots of hooks for CSS and ways to improve your tables.
|
| When to Use Tables |
Do You Really Need That Table?
Many Web designers, once they learn to build HTML tables, end up using them for everything. I knew one designer who started every page with <html><body><table>. This is overkill. Tables have a definite purpose in HTML, but there are often many simpler ways to do the same thing.
|
Don't Use Tables for Web Page Layout
This is the most common mis-use of tables. And you'll find a lot of sites (even older pages on this one) that explain how to use tables for layout. But it's not a good idea. Tables should be used for tabular data and leave the layout to the CSS.
|
| Homework |
Practice What You've Learned
Tables are tricky, so you should do as many as you can to get the practice. For homework, build a two column by two row table. Use the th tags if you would like to label the columns or rows. Once you've mastered a two-by-two table, create a table with at least one colspan or rowspan attribute. If you have questions, post them to the HTML class forum. Be sure to include your URL. Here's how I handled the homework: http://webdesign.about.com/od/html101classes/l/zhtmlclass8.htm
|
No comments:
Post a Comment