Before we begin - a fair warning - this is where HTML starts to get a little more challenging and confusing. Learning basic tags and structures which are solid and unchanging is easy. I mean, you can only make italic text in 2 possible ways. That's pretty straightforward. There are no variations. No options. No variables.

Tables are a different story.

Think of tables in HTML like Lego bricks - their structure is solid and unchanging, but the options in which they can be creatively combined are endless and can become very intricate. Therefore, if you have been sailing through this learning process with ease, don't become discouraged if tables suddenly "slow you down" and get really confusing. Tables certainly have the potential to be quite befuddling. So, just take it easy and know that you may need to re-read this page and study this code a little bit more than the previous material.

Also, like Legos, you can build HTML tables in a very "clean" and streamlined way, or you can build a near-identical-looking structure in a rather "sloppy" way. Just like learning to build with Legos, your first HTML tables will likely be poorly constructed. That's okay. Give youself permission to screw up and do it badly. In time and with experience, you'll learn to make things more elegantly and efficient.

In the simplest terms, "tables" are made up of rows and columns to create a grid on the page which holds your content. The squares of the grid are called cells. The content in your table cells can be anything from text to images to video to whatever. Tables can have visible or invisible borders. For this course, we will obviously leave the borders visible most of the time, so you can see where the tables are on the page. This is another page where viewing the comments in the sourcecode will teach you far more than what you see in the browser.

This text is inside a single table cell with a 1-pixel border.

This text is inside a single table cell with a 5-pixel border.

This table has all of the sourcecode in a single line. It displays in a browser the same as the first tables above, but it gets harder to read when you view source.

This text is inside a table with 2 columns.

This text is inside the second column.

This text is inside a table with 2 rows.

This text is inside the second row.

This text is inside a table cell.

This is another cell, with a table nested below this sentence. This is a table... ... nested within the cell of another table.

The "cells" within table can also "span" rows and columns. This is where table layout can get really intricate. Let's start simply:

This text spans 3 columns.
A	B	C

This text spans 3 rows.	1
	2
	3

As you can imagine, between nesting tables and "colspan" and "rowspan" attributes, you have an enormous amount of diversity and control over your table layouts. Tables can also have many, many cells and rows and columns, like you can see below:

1	2	3	4	5
6	7	8	9	10
11	12	13	14	15

Below is the same table as the previous one, but with the borders turned off. To achieve this, note I simply changed the border from border="1" to read border="0" instead...

1	2	3	4	5
6	7	8	9	10
11	12	13	14	15

This table has added attributes of "cellspacing" and "cellpadding" which are set to "0". If you do not declare a "cellspacing" and "cellpadding" amount, the default for cellspacing and cellpadding is "2" pixels.

This table has an added attribute of "cellspacing" which is set to "10" and "cellpadding" which is set to "0".

This table has an added attribute of "cellspacing" which is set to "0" and "cellpadding" which is set to "10".

This table has a width of "100%". Resize your browser window and this table will always stretch across the whole screen.

This table has a width of "50%". Resize your browser window and this table will always stretch across half the screen.

Okay, I know that was a LOT to absorb all at once. Don't fret. As I said earlier - tables are one of the areas where beginners often get really perplexed and intimidated by HTML. Since tables are pure "customization", they can become very confusing. However, learning HTML tables is the big "cornerstone" of HTML layout. Tables are very powerful tools which provide a large amount of controls. There isn't much "creativity" involved in a bold tag. But tables? Tables are pure creativity. I can show you how they work, but you need to figure out what to do with them to suit your own needs. "Tables" are another feature of HTML which computer-nerds consider to be "outdated" and will tell you not to use them. Terrible advice. Why? Because it all depends on your reason for using them! There are a number of very popular websites still using tables for certain types of information, because sometimes a big old chart or graph is the best thing to use. Well, that about covers all the basics of HTML!

Below, you will find links to all of the previous pages we have viewed.

First page
Second page
Third page
Fourth page
Fifth page
Sixth page
Seventh page