Tables in HTML are the easiest way to learn how to layout your web pages, it should be noted that tables are not as effective as using CSS but they are good for starting web designers.
Just like a spreadsheet a HTML table is a series of cells, these cells will take the shape and width of it's contents and each one can have different attributes. Lets look at a typical table and the text that corresponds to it.
Here we have a 3x3 cell grid at 400px wide, a border, and both a margin and padding applied to the overall table. Before we get into all of that lets look at how the table is written. We typed out ' ' (non-breaking space) just to have content in each cell and since our content is all the same height and width the cells are also all the same size.
We start with the table tag <table> signifying the start of a new table.
Next we will write a
tag to signify our first row with 3 <td> tags to represent the columns
It's important to write out all 3 <tdɚ (table columns) tags even if we are not using them because it's a good habit and could cause errors if we don't.
Margins and Padding
The two highlighted areas are the margin and padding. Margins (yellow highlight) are the area around and between cells, padding (blue highlight) is the spacing on the inside of a cell to the content. The black line (the border) represents the edge of each cell.
If we were to include an image we need to start with the <img> tag and add a 'src' ('source' - where our file is located) attribute to it. As is good practice we should also add an 'alt' (alternative text) attribute so that the visually impaired can tell what our image is as well as help search engines like Google find our content.
Adding Elements to Tables
<img> = include a new image
<img src="images/my_image_name.jpg" >
The 'source' of an image (where it's located) is in the 'images' folder of the site and is named 'my_image_name'. We end the name with .jpg because it is a JPEG image file.
<img src="images/my_image_name.jpg" alt="Illustrated mountain tops" >
It's good to always add an 'alt' (alternative text) attribute so search engines and those visually impaired can tell what the image's contains.
Our photo is taking up more space than the cell was originally at 120px high and 120px wide, all of the cells are stretched so the picture can fit. Unless otherwise specified all the text will be left a lined and vertically centered. If we had this same sized picture in all the cells (including padding and margins) the over all width would stretch beyond the 400px overall width to 460px.
If we had wanted to keep the table at 400px wide the images would have to be re-sized to a smaller size, although in HTML you can dictate an images size it would look pixelated and tacky so it's recommended you re-size in a photo editing program.
Another note is how we can merge two or more cells using column span and row span. using the rowspan attribute will combine cells vertically, a colspan attribute will combine the cells horizontally. When using the rowspan attribute you exclude a <TD> tag in the next table row ( <tr> )
All combined cells must form a rectangle of some sort, you cannot currently (by today's web-browser standards) make one cell's text or content flow into another.