Tables

For table content, four tags are important:

<table>: This is the root tag for Table. You can apply any tag on it and the entire table will get effected,
<th>(table header): With this tag we can create a top header of each column in a bold format,
<tr>(table row): This tag is used to put the data in a row format order, as a first row, second row and so on,
<td>(table data): With this tag, we can put the actual data in a table cell, that what we want to store or display.

The example bellow is a table with no border:

ONE	Two	Three
A	B	C
I	II	III

Now, using the attribute "border" on the table's openning tag, the same table but with border:

ONE	TWO	THREE
A	B	C
I	II	III

Now two cells are made only one (using "colspan") :

Red	Blue	Green

Table Header: The <th> tag should be used when you want to designate the content in the cell as a header for that column or row.

Name	Location
Smith	New York
Carl	France

Colspan and Rowspan

"The way the HTML markup is structured means that you in some rows can have four cells, some three cells, some two cells and so forth. In order for this to actually function, you need to use the attributes colspan and rowspan (the value of these attributes is always whole numbers). It can be quite tricky to use these attributes so you might need some patience." (Source: HTML5 Tutorial)

THIS TABLE HEADER IS APPLIED IN 5 COLUMNS (colspan="5")
E X A M P L E S	Default Aligment Is Left	Default Forced Down	Text Lenght Could Make It Look Like It Is Centered !!!!!	Default Forced Up
E X A M P L E S	4 Columns-wide Row Centered Text			Colunm & Row centered text

Another example of colspan and rowspan:

Before and After facts about pacients' Stomach Reduction Surgery
NAME		Mariana		John		Pete
Period of Time		Before	After	Before	After	Before	After
C H A R A C T E R I S T I C S	Eating Disorder	Yes	No	Yes	No	Yes	More or less
	Emocional Condition	Felt Horrible	Feels Great Now	Felt Horrible	Feels Great Now	Felt Horrible	Feels OK
	Productivity	No Productivity	Increased Productivity	No Productivity	Increased Productivity	No Productivity	Somewhat Increased Productivity
	Health	Was Unhealthy	Health Improvement Accurred	Was Unhealthy	Health Improvement Accurred	Was Unhealthy	Health Improvement Accurred

Down bellow we have an example of NESTED cells.

title1

title2

title3

cell1

cell2

cell3

cell2

cell3

cell4

cell5

cell6

In the example bellow I'm altering the table's position by using the align attribute inside your table tag:

ssssss

ONE	Two	Three
A	B	C
I	II	III

Coloring Cells and/or Tables

Now, I'm coloring some cells using the bgcolor attribute (<td bgcolor="red">). BGColor stands for Background Color and it is highly recomended not to use this function using HTML, but it is better to do it using CSS instead with the "background-color" CSS attribute. It is interesting to take a look at this function in order to know about it in case one come across this on old website's codes.
One can also do it to a whole table just by adding the attribute "bgcolor" and its color value to the openning table tag (<table bgcolor="red" border="1">).

Name	Location
Rodrigo	Leominster
Pedro	Lowell

Caption

One also can add captions to the table.
The <caption> tag defines a table caption.
The <caption> tag must be inserted immediately after the <table> tag.
Note: You can specify only one caption per table.
Tip: By default, a table caption will be center-aligned above a table. However, the CSS properties text-align and caption-side can be used to align and place the caption.

Monthly Savings
Month	Savings
January	U$ 500
February	U$ 1000

8 HTML: Tables