HTML Tables used to be THE WAY web designers would create complex designs. Even today many websites employ tables for layout of the website. While I much prefer the faster and cleaner CSS method of creating web page layouts, understanding Tables will help you gain valuable insight into web programming and page layout.
The following graphic illustrates the main takeaway from tables. TR designates a Table Row, while TD designates a Table Data Cell. Table Rows contain one or more Table Data Cells. There is no real thing as a “table column” tag. Several rows containing several table data cells make up rows and columns.
HTML Tables
Here is a quick overview of tables with a couple of graphics along with a 30 minute “crash course” video tutorial on how to create tables with rowspans and colspans. Rowspan and colspan are the attribute tags used in tables to “merge” cells or rows together.
Here is an example of a table with column and rowspans:
| 1 | |
| 3 | |
| 5 | 6 |
| 8 | |
Watch the following video for a complete introduction and code examples.
Download the video file with quicktime.
tables
#1 by Jimmy Araneda on March 4th, 2010
Quote
I’m doing table 3, and I can’t change the height of cells K or L. Even though I type in the command nothing changes. I also tried rowspan(ning?) those two cells and nothing happened. I hope I have been clear enough haha.
#2 by andrew on March 4th, 2010
Quote
4.3.2010
hello, my name is andrew and i live in the united kingdom.
i found your tables video very good. you explain how to make a table in html and merge cells and rows etc very well.
cheers and thanks